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

由于现在这框架还没有完成,还有很多功能没有做出来,比如编辑框上的“样式” ,这个样式是用于编辑所选编辑区域的样式的,将可以编辑边框、背景等,还会支持插入图片、设置背景图等,完成后将可以实现各种功能。
而以这种编辑框架设计的网站,系统的管理将会与现流行的系统有很多区别,本人已经设想了几个方案,打算开发一款超简单的小网站系统,其中编辑将变的非常简单、傻瓜化,实现小学生都能使用易用性,但却能将网站的页面设计翻来覆去进行大修改。
ps:
谢谢你们的留言,发现大部份人都没搞清楚我这编辑器与现流行的编辑器的区别,要么跟那主流编辑器比较,要么跟一个系统比较,大部分人可能都没注意到这是可以用于编辑动态页面的,而且是在浏览页面的情况下编辑的,有说过时的,其实现在都还没有一个很完整的解决方案。如果要比较,我觉的把这跟webparts功能比较还比较靠谱一点,就是都可以在浏览使用的情况下对页面内容进行编辑。
真正在线编辑的在线web编辑器的更多相关文章
- 在线web编辑器
真正在线编辑的在线web编辑器 最近正在研究开发一款在线web编辑器架构,这是一款真正傻瓜式的web编辑器,可以在正常浏览页面的情况进行编辑,经过测试,对于一般网页页面来说非常好用方便,操作更简单. ...
- COS控制台进阶 - 文件预览和在线编辑
导语 | COS控制台新上线了文件预览功能,用户可在控制台内直接预览.编辑文件内容. 前不久,微软发布了 vscode for web 的公告,是基于web的在线代码编辑器,无需下载安装可以直接在we ...
- 22个所见即所得在线 Web 编辑器
前言: 关于编辑器,适合的才是最好的,接下来,我会写一些关于日志编辑器的文章,今天就写写,可能内容会比较多. --------------------------------------------- ...
- 22个所见即所得在线Web编辑器
这些 Web 编辑器可以在线编辑和处理富 Web 内容,包括格式文本,表格,图片,媒体,链接等等,非常适合集成到 CMS网站内容管理系统中使用.本文又搜集了 22 个 Web 在线编辑器,它们基本代表 ...
- 强大的在线web编辑器UEditor
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. UEditor在线演示地址:http://u ...
- java 网站源码 在线编辑模版 代码编辑器 兼容手机平板PC freemaker 静态引擎
前台: 支持四套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以 ...
- java web实现在线编辑word,并将word导出(一)
前段时间领导交代了一个需求:客户需要一个能够web在线编辑文字,如同编辑word文档一样,同时能够将编辑完成的内容导出为word文档并下载到本地. 我们选择了前台使用富文本插件的形式用于编辑内容,使用 ...
- Microsoft Azure Web Sites应用与实践【3】—— 通过Visual Studio Online在线编辑Microsoft Azure 网站
Microsoft Azure Web Sites应用与实践 系列: [1]—— 打造你的第一个Microsoft Azure Website [2]—— 通过本地IIS 远程管理Microsoft ...
- 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
随机推荐
- 20165324 Java实验一
20165324 实验一 一.实验报告封面 课程:Java程序设计 班级:1653班 姓名:何春江 学号:20165324 指导教师:娄嘉鹏 实验日期:2018年4月2日 实验时间:13:45 - 1 ...
- testng生成报告 testng-xslt 美化测试报告
testng生成报告 testng-xslt 美化测试报告 testng生成报告 testng-xslt 美化测试报告 用TestNG测试后,自动会生成html的测试报告.利用 testNG-xslt ...
- 接口返回值结果转换成JSON
接口返回值结果转换成JSON,具体的方法如下: public static String GetJsonValue(String result,int index,String key){ int i ...
- phpMyAdmin的安装配置
找到$cfg['blowfish_secret'] = '',将其值改为你自己想要的任意字符,如$cfg['blowfish_secret'] = 'owndownd': 找到$cfg['Server ...
- Spark集群 Python Package管理
具体问题: 不同的数据分析人员/开发团队需要不同版本的Python版本执行PySpark. 同一Python版本下,需要安装多个Python库,甚至需要不同版本的库. 针对问题2的一个解决办法是将Py ...
- Redis维护
关闭redis [root@--x-x log]# cd /usr/local/redis/bin/ [root@--x-x bin]# ./redis-cli -h shutdown 启动redis ...
- Spring Boot企业微信点餐系统
第1章 课程介绍 包括项演示.课程概述.课程安排.学习前提等的介绍, 让同学们了解这课程 1-1 课程介绍 第2章 项目设计 包括需求分析,项?目设计,项?目架构,数据库设计等等. 2-1 项目设计 ...
- CentOS 6.2配置本地yum源
转载自http://www.cnblogs.com/centoser/articles/2411694.html#undefined 一.挂载本地光盘到系统:把Cent6.2安装光盘放入光驱,在终端命 ...
- NuGet version
https://stackoverflow.com/questions/15964935/get-nuget-exe-version-from-command-line Typing nuget he ...
- 解决node-sass安装不了的问题
1.下载https://github.com/sass/node-sass-binaries/blob/master/win32-x64-48_binding.node到E:\primeng\lib目 ...