真正在线编辑的在线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

由于现在这框架还没有完成,还有很多功能没有做出来,比如编辑框上的“样式” ,这个样式是用于编辑所选编辑区域的样式的,将可以编辑边框、背景等,还会支持插入图片、设置背景图等,完成后将可以实现各种功能。

而以这种编辑框架设计的网站,系统的管理将会与现流行的系统有很多区别,本人已经设想了几个方案,打算开发一款超简单的小网站系统,其中编辑将变的非常简单、傻瓜化,实现小学生都能使用易用性,但却能将网站的页面设计翻来覆去进行大修改。

 http://ueditor.baidu.com/website/onlinedemo.html
 
分类: asp.net

最新文章

  1. Guava - EventBus(事件总线)
  2. tomcat有哪些性能调优方法
  3. js-统计选项个数
  4. python BeautifulSoup实例测验
  5. dede 单表模型动态浏览设置 arclistsg arc.sglistview.class.php
  6. .net framework缓存遍历
  7. hdu 4143 A Simple Problem (变形)
  8. 关于Store Apps
  9. ubuntu下vim与系统剪切板互相拷贝
  10. ASP.NET上传文件的三种基本方法
  11. (017)将一棵二叉查找树重构成链表(keep it up)
  12. Unity3D 游戏开发架构篇 ——性格一流的设计和持久性
  13. PowerDesigner Constraint name uniqueness 问题处理(转载)
  14. Java基础-递归调用
  15. [Luogu P2966][BZOJ 1774][USACO09DEC]牛收费路径Cow Toll Paths
  16. GridView(多选功能)
  17. mac date命令详解
  18. item 2: 理解auto类型的推导
  19. [转]什么时候该用NoSQL?
  20. Linux /etc/profile文件详解

热门文章

  1. OCP读书笔记(21) - 题库(ExamA)
  2. TCP/IP的经典网络编程
  3. 讨论oracle在rowid和rownum
  4. Error creating bean with name &amp;#39;com.you.user.dao.StudentDaoTest&amp;#39;: Injection of autowired dependencies
  5. 一个数据表对象(NSManagedObject)加入排序
  6. SQL Server 有关EXCEPT和INTERSECT使用
  7. PHP课程十大 PHP图像处理功能和实现的验证码
  8. hdu Color the ball
  9. NET使用了UpdatePanel后如何弹出对话框!
  10. 基于 Android 的 3D 视频样本代码