你的位置:首页 > Java教程

[Java教程]由编辑器从光标处插入图片(失去焦点后仍然可以在原位置插入)实现的富文本编辑器


转载请注明: TheViper http://www.cnblogs.com/TheViper 

大家都知道,如果只是大概的实现一个简单的富文本编辑器,直接用execCommand就可以了,虽然不同浏览器对execCommand命令的反应不一样,最后效果是差不多的。当然,如果要严谨的,用像ueditor那种只有很少部分实现是用execCommand的富文本编辑器。

昨天,本屌就试着用execCommand搞一个简单的编辑器。在本屌看来,什么字体加粗,斜体,下划线,对齐,列表。。直接用execCommand就可以搞定,至于保存草稿,编辑器全屏,,那些也很好搞定,另外,稍微难点的在原光标位置插入图片也在更简单的 编辑器从光标处插入图片(失去焦点后仍然可以在原位置插入)里面说的很清楚了,开干。

容器 div contenteditable

然而理想是美好的,现实是残酷的,过程中遇到点坑。

1.插入的图片img标签display不能设置成block.有时候,为了消除低版本ie图片底部间距,可能会很干脆的把所有img的样式设置成display:block;.这样的后果是在ie8中,无法通过移动光标,或点击鼠标让光标到图片后面,在ie6,7中,同样无法通过移动光标让光标到图片后面,但可以点击鼠标做到。

其实可以看到就算光标可以移到图片后也没啥用,因为display:block的缘故,一输入马上就跳到下一行了。

ie8

ie7

ie6

2.如果按照更简单的 编辑器从光标处插入图片(失去焦点后仍然可以在原位置插入)中的做法,在ie8中,光标移到图片前面后,无法重新移到图片后面,也无法通过鼠标点击解决。这个问题就严重了,因为有时候要在图片后面接着输字。

ie8

解决方法很简单,将原来的editor.insertImage("<img src='1.jpeg'/>");后面加一个空格,变成editor.insertImage("<img src='1.jpeg'/> ");。

修改后的ie8

3.列表ol,ul设置好,很多时候,在reset css里面将ol,ul的样式都删了。

4.在div contenteditable中使用execCommand。这个很坑爹,因为在现代浏览器中,即使选中文字,也无法通过execCommand操作。

比如firefox

解决方法在执行execCommand前,保存当前的selection.

        if(!!-[1,])//不是ie          editor.restoreSelection();        document.execCommand(command,false,args);

修改后效果

5.在图标上添加属性unselectable="on",使图标无法获得焦点,selection.否则,ie中无法执行execCommand。

最后附上下载,同时感谢qq空间的编辑器图标sprite.

如果您觉得本文的内容对您有所帮助,您可以打赏我: