在线web编辑器
真正在线编辑的在线web编辑器
最近正在研究开发一款在线web编辑器架构,这是一款真正傻瓜式的web编辑器,可以在正常浏览页面的情况进行编辑,经过测试,对于一般网页页面来说非常好用方便,操作更简单。
一般的在线web编辑器虽说提供了可视化操作,但通常只能用于编辑指动态内容部份,如内容文章,对于那些非常复杂的内容发布系统的页面模板,基本是没用的。绝大部份系统对于专业人员来说,操作起来也是比较困难的,对于非专业人员,根本操作不了,非专业人员想管理一个个人网站,如比较简单的个人博客,想修改模板或模板的部分内容,绝大部份人都是无法办到的,只能发发文章,甚至改个博客名称之类的都难弄。为什么就不能直接在页面上修改呢?前阵子突然产生了这样的想法,于是着手研究开发了一下,发现是可行的,对于一般的系统或者配套系统来说非常实用,以下以测试系统为例简单介绍下,下面是创建工程时vs自带的页面,页面是加上了我设计的在线编辑器框架的,后面我会编辑一下.
我的框架经过封装成控件,引用很简单,只需在页面上加上,如我的工程引用如下:
<easy:OnLineWebEditor ID="OnLineWebEditor2" runat="server" /> 或者在页面相关程序里new一下对象
protected void Page_Load(object sender, EventArgs e)
{
new OnLineWebEditor();
}
以上都可以加载这个框架。下面是原来页面样子。
在正常浏览情况下,点击一个想修改的区域,变成这样的界面:
变成这个界面后就可以直接修改或输入文字内容了,保存后浏览时会跟编辑时一样的,也可以打开源代码进行编辑:
上面是编辑table区域的,其实区域如<p>是下面这样子的:
编辑后一路点”完成“即可保存,也可以取消。
上面编辑时与下面编辑后浏览时效果一样
还可以这样
保存后
与编辑时所见一模一样,真正的可见既可得的模式。
还可以点击编辑区域的边框,显示出如下的小方形时可进行拖拉操作,如下面的table
由于现在这框架还没有完成,还有很多功能没有做出来,比如编辑框上的“样式” ,这个样式是用于编辑所选编辑区域的样式的,将可以编辑边框、背景等,还会支持插入图片、设置背景图等,完成后将可以实现各种功能。
而以这种编辑框架设计的网站,系统的管理将会与现流行的系统有很多区别,本人已经设想了几个方案,打算开发一款超简单的小网站系统,其中编辑将变的非常简单、傻瓜化,实现小学生都能使用易用性,但却能将网站的页面设计翻来覆去进行大修改。
在线web编辑器的更多相关文章
- 真正在线编辑的在线web编辑器
最近正在研究开发一款在线web编辑器架构,这是一款真正傻瓜式的web编辑器,可以在正常浏览页面的情况进行编辑,经过测试,对于一般网页页面来说非常好用方便,操作更简单. 一般的在线web编辑器虽说提供了 ...
- 22个所见即所得在线 Web 编辑器
前言: 关于编辑器,适合的才是最好的,接下来,我会写一些关于日志编辑器的文章,今天就写写,可能内容会比较多. --------------------------------------------- ...
- 22个所见即所得在线Web编辑器
这些 Web 编辑器可以在线编辑和处理富 Web 内容,包括格式文本,表格,图片,媒体,链接等等,非常适合集成到 CMS网站内容管理系统中使用.本文又搜集了 22 个 Web 在线编辑器,它们基本代表 ...
- 强大的在线web编辑器UEditor
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. UEditor在线演示地址:http://u ...
- 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
- 在线WEB开发编辑器,edt.df5d.com
在线WEB开发编辑器,http://edt.df5d.com 本地服务端下载 : https://pan.baidu.com/s/11SlcoU_D-KbzGFbs-_9Dpg 即可加载本地磁盘,也可 ...
- (视频) 《快速创建网站》 3.2 WordPress多站点及Azure在线代码编辑器 - 扔掉你的ftp工具吧,修改代码全部云端搞定
本文是<快速创建网站>系列的第6篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http://devopshub.cn/tag ...
- Thinkphp下嵌套UEditor富文本WEB编辑器
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 本文实际操作于ThinkPHP框架下,现 ...
- 巧用在线html编辑器,保存文章到数据库(带html标签)
1.对于读取数据库的文章字段刷新到web页面,如何使文章格式很好的显示出来,那么数据库应存text格式,并记录文章的个数(转换为html): 2.如何转换html格式,可以使文章从word直接粘贴到在 ...
随机推荐
- apk当安装程序将文件复制到手机自带的指定文件夹
项目已获得,今天.apk文件以获得另一个非调试手机,发现一个问题. 由于涂料.所以绘图数据的点存储在一个.txt文字档.把它用usb传到指定目录下的,可是明显不科学,由于用户下载了你的.apk文件,你 ...
- javaEE异常摘要——更换工作区相同tomcat当部署在同一个项目疑难解答
我有一个项目,我的工作区公告,没问题,它可以运行正常,但我把项目copy还有一个工作空间,然后发布到tomcat(随着tomcat,先前的工作空间remove deployment,公布信息)上去,想 ...
- ABP模块系统
ABP模块系统 基于DDD的现代ASP.NET开发框架--ABP系列之4.ABP模块系统 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ABP ...
- 【从翻译mos文章】oracle linux 和外部存储系统 关系
oracle linux 和外部存储系统 关系 参考原始: Oracle Linux and External Storage Systems (Doc ID 753050.1) 范围: Linux ...
- Android有效的治疗方法Bitmap,减少内存
Android有效的治疗方法Bitmap,减少内存 照片可能有不同的大小. 在很多情况下,大小.比如,我们的Camera应用,我们所拍的照片的大小远大于屏幕显示的大小 假如你的应用被限制了内存使用,显 ...
- jQuery UI的datepicker日期控件如何让他显示中文
首先是引入UI的JS文件和模板文件,如下: <link rel=”stylesheet” href=”./ui/themes/le-frog/jquery.ui.all.css”> < ...
- 无废话WCF入门教程五[WCF的通信模式]
一.概述 WCF在通信过程中有三种模式:请求与答复.单向.双工通信.以下我们一一介绍. 二.请求与答复模式 描述: 客户端发送请求,然后一直等待服务端的响应(异步调用除外),期间处于假死状态,直到服务 ...
- uva10718 - Bit Mask(贪心)
题目:uva10718 - Bit Mask(贪心) 题目大意:给出32位无符号的整数n ,给定边界L和R,要求在这个边界里面找出一个整数,它和N做或运算得到的值最大. 解题思路:要求做或运算得到的值 ...
- 如何利用【百度地图API】,制作房产酒店地图?(下)——结合自己的数据库
原文:如何利用[百度地图API],制作房产酒店地图?(下)--结合自己的数据库 摘要:应广大API爱好者要求,写了一篇利用自己数据库标点的文章…… -------------------------- ...
- 响应式web前端框架Foundation & Bootstrap 对比
Foundation & Bootstrap都是易用.强大且灵活的前端框架,用于构建基于任何设备上的 Web 应用.提供流式布局,及多种 js UI 组件,如导航.表单.按钮.Tabs 等等. ...