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

转载请注明： 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.