最近正在研究开发一款在线web编辑器架构,这是一款真正傻瓜式的web编辑器,可以在正常浏览页面的情况进行编辑,经过测试,对于一般网页页面来说非常好用方便,操作更简单。

一般的在线web编辑器虽说提供了可视化操作,但通常只能用于编辑指动态内容部份,如内容文章,对于那些非常复杂的内容发布系统的页面模板,基本是没用的。绝大部份系统对于专业人员来说,操作起来也是比较困难的,对于非专业人员,根本操作不了,非专业人员想管理一个个人网站,如比较简单的个人博客,想修改模板或模板的部分内容,绝大部份人都是无法办到的,只能发发文章,甚至改个博客名称之类的都难弄。为什么就不能直接在页面上修改呢?前阵子突然产生了这样的想法,于是着手研究开发了一下,发现是可行的,对于一般的系统或者配套系统来说非常实用,以下以测试系统为例简单介绍下,下面是创建工程时vs自带的页面,页面是加上了我设计的在线编辑器框架的,后面我会编辑一下.

我的框架经过封装成控件,引用很简单,只需在页面上加上,如我的工程引用如下:

<easy:OnLineWebEditor ID="OnLineWebEditor2"  runat="server" /> 或者在页面相关程序里new一下对象

protected void Page_Load(object sender, EventArgs e)
        {
            new OnLineWebEditor();
        }

以上都可以加载这个框架。下面是原来页面样子。

在正常浏览情况下,点击一个想修改的区域,变成这样的界面:

变成这个界面后就可以直接修改或输入文字内容了,保存后浏览时会跟编辑时一样的,也可以打开源代码进行编辑:

上面是编辑table区域的,其实区域如<p>是下面这样子的:

编辑后一路点”完成“即可保存,也可以取消。

上面编辑时与下面编辑后浏览时效果一样

还可以这样

保存后

与编辑时所见一模一样,真正的可见既可得的模式。

还可以点击编辑区域的边框,显示出如下的小方形时可进行拖拉操作,如下面的table

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

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

ps:

谢谢你们的留言,发现大部份人都没搞清楚我这编辑器与现流行的编辑器的区别,要么跟那主流编辑器比较,要么跟一个系统比较,大部分人可能都没注意到这是可以用于编辑动态页面的,而且是在浏览页面的情况下编辑的,有说过时的,其实现在都还没有一个很完整的解决方案。如果要比较,我觉的把这跟webparts功能比较还比较靠谱一点,就是都可以在浏览使用的情况下对页面内容进行编辑。

真正在线编辑的在线web编辑器的更多相关文章

  1. 在线web编辑器

    真正在线编辑的在线web编辑器 最近正在研究开发一款在线web编辑器架构,这是一款真正傻瓜式的web编辑器,可以在正常浏览页面的情况进行编辑,经过测试,对于一般网页页面来说非常好用方便,操作更简单. ...

  2. COS控制台进阶 - 文件预览和在线编辑

    导语 | COS控制台新上线了文件预览功能,用户可在控制台内直接预览.编辑文件内容. 前不久,微软发布了 vscode for web 的公告,是基于web的在线代码编辑器,无需下载安装可以直接在we ...

  3. 22个所见即所得在线 Web 编辑器

    前言: 关于编辑器,适合的才是最好的,接下来,我会写一些关于日志编辑器的文章,今天就写写,可能内容会比较多. --------------------------------------------- ...

  4. 22个所见即所得在线Web编辑器

    这些 Web 编辑器可以在线编辑和处理富 Web 内容,包括格式文本,表格,图片,媒体,链接等等,非常适合集成到 CMS网站内容管理系统中使用.本文又搜集了 22 个 Web 在线编辑器,它们基本代表 ...

  5. 强大的在线web编辑器UEditor

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. UEditor在线演示地址:http://u ...

  6. java 网站源码 在线编辑模版 代码编辑器 兼容手机平板PC freemaker 静态引擎

    前台: 支持四套模版, 可以在后台切换   系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以 ...

  7. java web实现在线编辑word,并将word导出(一)

    前段时间领导交代了一个需求:客户需要一个能够web在线编辑文字,如同编辑word文档一样,同时能够将编辑完成的内容导出为word文档并下载到本地. 我们选择了前台使用富文本插件的形式用于编辑内容,使用 ...

  8. Microsoft Azure Web Sites应用与实践【3】—— 通过Visual Studio Online在线编辑Microsoft Azure 网站

    Microsoft Azure Web Sites应用与实践 系列: [1]—— 打造你的第一个Microsoft Azure Website [2]—— 通过本地IIS 远程管理Microsoft ...

  9. 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...

随机推荐

  1. sipp模拟freepbx分机测试(SIP协议调试)

    1.sipp的安装 1) 在centos 7.2下安装 yum install make gcc gcc-c++ ncurses ncurses.x86_64 ncurses-devel ncurse ...

  2. ACM零散知识

    定理与方法专区: 1.两点间的曼哈顿距离如果为偶数,那么两点间可以走偶数步到达 2.求小于等于n 的素数的个数.(即欧拉函数) 100=(2^2)*(5^2)    num[100]=(2+1)*(2 ...

  3. AngularJS 笔记系列(三)模块和作用域

    模块: 在 AngularJS 中,将函数代码全部都定义在全局命名空间中绝对不是什么好主意,全局变量污染会使冲突几率变大,调试困难,降低开发效率.上次写计时器的 controller 时,我们把 co ...

  4. Mac Outlook邮箱MicrosoftExchange邮箱快满了,请减小邮箱大小。

    这两天我的Mac电脑中的Exchange总是收到公司的邮箱发来的[存储空间不足的告警邮件] MicrosoftExchange329e71ec88ae4615bbc36ab6ce41109e@your ...

  5. ionic 配置打包环境

    配置java环境就不说了,太简单 下载AndroidSdkAndroid SDK Tools翻过墙的朋友可以去Google Android的官网上下载:http://developer.android ...

  6. 2017浙江省赛 E - Seven Segment Display ZOJ - 3962

    地址:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3962 题目: A seven segment display, or ...

  7. 如何通过包名打开手机里的APP

    目前已知的打开APP的方式有两种, 一种是通过openUrl打开,这种有一个严重的问题,即必须添加白名单,白名单之外的APP即时安装了也无法打开. 另一种就是今天的重点,通过包名打开APP.先上核心代 ...

  8. SpringBoot入门学习(三)

    基于第二讲,这一讲我们主要讲解包含以下内容 springBoot添加对freemarker的支持 使用@RestController处理ajax请求 使用@PathVariable注解获取url参数 ...

  9. 在父页面访问iframe的东西

    playBox是iframe里的元素id

  10. kali 安装最新firefox的悲惨经历

    最新的的firefox用的是量子内核,在windows上面的确感觉相比之前的firefox快了好多 想把kali 2017虚拟机的也替换掉 按照步骤: 1 添加源: /etc/apt/sources. ...