HTML5文本编辑器

最近一直头疼网页编辑的时候加粗,我再想怎么写。开始我一直认为要获取到选择的文本加粗后再放回去。所以搞了很久最后发现非常简单。

使用document.execCommand配合HTML的contenteditable属性非常方便实现这些功能了。

还有一个获取选中属性值的方法:document.queryCommandValue

例如:

  • 加粗document.execCommand("Bold", false);
  • 修改颜色document.execCommand("ForeColor", false, "#CCCCCC");
  • 获取颜色document.queryCommandValue("ForeColor");

更多的属性参考后面的参考文章。

DEMO地址:http://www.acgist.com/demo/editor/index.html

参考文章:
http://blog.csdn.net/woshinia/article/details/18664903
http://www.zhangxinxu.com/wordpress/2011/04/js-range-html%E6%96%87%E6%A1%A3%E6%96%87%E5%AD%97%E5%86%85%E5%AE%B9%E9%80%89%E4%B8%AD%E3%80%81%E5%BA%93%E5%8F%8A%E5%BA%94%E7%94%A8%E4%BB%8B%E7%BB%8D/