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