13. HTML在线编辑器

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("&nbsp;").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

 

 

评论

6 楼 Boyyeyeye 2016-10-27  

良心-Emi 写道

   嘿嘿

哈哈哈哈哈哈哈哈

5 楼 良心-Emi 2016-10-27  

   嘿嘿

4 楼 飞翔金鱼儿 2015-11-23  

[b     ][/b]

3 楼 EchoHanInCC 2013-07-02  

nanacan 写道

说好的不考在线编辑器~

说好的不考在线编辑器~ +1

2 楼 nanacan 2013-07-02  

说好的不考在线编辑器~

1 楼 houseyoung 2013-05-24