HTML5文本编辑器
0
最近一直头疼网页编辑的时候加粗,我在想怎么写。开始我一直认为要获取到选择的文本加粗后再放回去,所以搞了很久最后发现非常简单。
后来发现使用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/