HTML在线编辑器在网站的开发中占有极为重要的位置,无论是前端用户还是后台管理员都需要一个编辑器用来发表评论、添加文章等操作。
编辑器的使用非常简单,原理基本都是相似的。在jsp页面中有一个隐藏的textarea(input),还有一个iframe,二者的id相同,iframe中的src指向编辑器的默认页。用户在编辑时其实编辑的是iframe中引用的页面,当用户提交表单时,是将iframe中的HTML代码赋值给textarea然后提交上去。
<textarea id="content" style="hidden:true;"></textarea> <iframe src="editor/ewebeditor.html?id=content" frameborder="0" scrolling="no" width="500" height="300"> </iframe>
编辑器的实现原理比较简单,就是将某一个操作定义为一个JS函数,此函数的功能是将用户的按钮操作转换为一段HTML代码。虽然原理简单,但是实现起来非常困难,主要在于浏览器的兼容性很难做的非常好。
所以我们在网络上看到的编辑器并不是很多。基本上都是大公司才有实力编写自己的编辑器。
注意问题:
1、提交表单前,要验证编辑器中的内容是否为空,方法为:
<input type=submit name=b1 value="提交" onClick="checkEweb();"> <script src="/js/ewebeditorCheck.js"></script> 其中ewebeditorCheck.js的代码如下: function checkEweb(){ if (eWebEditor1.getHTML()=="") { alert("编辑器中的文本域不能为空!"); window.event.returnValue=false; } } eWebEditor1指的是页面中iframe的id值,即 <iframe id="eWebEditor1" src="../eWebEditor.jsp?id=content1&style=standard" frameborder="0" scrolling="no" width="800" height="400"></iframe> 另一种方法: var content = eWebEditor1.getHTML().replace(/<.*?>/g,"").split(" ").join("").split(" ").join(""); if(content.length==0){alert('公告内容不能为空!');return false; }
2、尽量使用textarea而不是用input,原因在于当“值”中出现双引号时,input会被截断,而textarea则不会。
3、一定要注意编码方式,编辑器的编码要和网站的编码一致。
下面介绍几个常见的编辑器。
ewebeditor的编辑器:见附件
ckeditor:见附件
kissyeditor:见附件
163的编辑器:http://www.iteye.com/topic/213151
新浪的编辑器:http://www.iteye.com/topic/213151
相关推荐
ASP在线编辑器,ASP.NET在线编辑器,PHP在线编辑器,JSP在线编辑器.html在线编辑器,在线网页编辑器
HTML在线编辑器HTML在线编辑器HTML在线编辑器
阿赛HTML在线编辑器是一款简洁,兼容性极强的HTML在线编辑器(经测试已完美兼容IE全系、火狐、谷歌),可以方便地整合到各种网站系统中(经测试已完美支持ASP、PHP、.NET、JSP),摒弃常规的框架编辑器模式,采用...
sina在线编辑器HTML在线编辑器HTML在线编辑器
html在线编辑器 ,ckeditor kindeditor
CodeMirror在线代码编辑器 版本:5.60.0 官网地址如下: https://codemirror.net/index.html CodeMirror可以在线编辑代码,风格包括js,java,php,c++,sql等等100多种语言。比较强大可以自行配置语言模式。能够...
它相当轻巧, 载入迅速而且祇需要一列 JavaScript 就可以把标准的 textarea 转换成丰富的文字编辑器. 能产生出乾淨而有效的 HTML. 在较旧或不支援的浏览器上, 它也能优雅地降级回去 (变成原始的 textarea 栏位). ...
html在线编辑器,功能很齐全,找了很久才找到的
自己写了一个简单实用的在线编辑器。
HTML在线编辑器原理-简单深入.docx
ASP在线编辑器,ASP.NET在线编辑器,PHP在线编辑器,JSP在线编辑器.html在线编辑器,在线网页编辑器,Js是很久以前的. 更新js兼容ie7,8,9
几款在线的编辑器。有源码和例子。包括以下几款:FCKeditor,HtmlEditor,kindeditor......
松鼠HTML编辑器一款 纯代码式的 HTML 编辑器不管你现在是HTML语言起步,还是已经有很高的语言底子.在没有FrontPage,Dreamw Eaver的时候.虽然网上很多人用记事本编辑网页.但是还是推荐你用<松鼠HTML编辑器这里有个现成...
TinyMCE是一个基于浏览器的所见即所得编辑器,平台独立于Web之外,支持目前流行的各种浏览器,由javascript写成。这个编辑器可工作在Mozilla, firefox和MSIE上.很多网站系统都采用了 TinyMCE,其中包括 Wordpress。...
Flex图文编辑器(FLEX HTML编辑器)汉化版.rar Flex图文编辑器(FLEX HTML编辑器)汉化版.rar Flex图文编辑器(FLEX HTML编辑器)汉化版.rar Flex图文编辑器(FLEX HTML编辑器)汉化版.rar
首先,ace.js编辑器支持多种编程语言,包括但不限于JavaScript、HTML、CSS、Python、Java、C++等。这使得开发者可以在同一个编辑器中编写不同语言的代码,提高了开发效率。对于每种支持的语言,ace.js都能提供语法...
新浪博客的网页在线编辑器PHP版,带图片上传功能,源码爱好者最新修正了一些错误: ·修正了编辑器在PHP5调用时出错的问题; ·将原来的图片上传限制500K增大为800K; ·修正一些其它小问题;