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

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