标签：文本编辑 文本 ContentEditable execCommand 所见即 设置 document com
富文本编辑器WYSIWYG(所见即所得)之ContentEditable和document.execCommand
一、Textarea
简单的富文本功能，@和#，基本上是评论功能
二、contentEditable
由浏览器实现的富文本编辑器实现方案
https://github.com/quilljs/quill
https://link.zhihu.com/?target=https%3A//github.com/wangfupeng1988/wangEditor
http://ueditor.baidu.com/
https://github.com/ianstormtaylor/slate
https://github.com/facebook/draft-js
三、Google Doc
监听用户交互同时在DOM上通过div等标签绘制
四、相关富文本编辑器列表
https://textbus.tanboui.com/
https://prosemirror.net/
五、开启编辑器
启动富文本编辑：设置contenteditable
让元素的内嵌HTML可以编辑，有三种实现方法：
1.在HTML标签里写入contenteditable即可。
<div style="border:1px solid #f00;width:100px;height:100px" contenteditable>
2.在脚本中设置对应元素的contentEditable值为true。这个属性有三种取值，false/true/inherit分别对应“关闭”/“开启”/“继承”。
document.getElementById("editor").contentEditable = true;
3.对于内嵌框架可以设置designMode="on"，不过这种方式兼容性不太好。
六、编辑器进阶
富文本编辑器样式命令：document.execCommand()
其实元素设置contentedable后就已经实现了一个最基本的富文本编辑器，只是这个编辑器和文本输入框一样，实在简陋。如果它能很便捷的设置内容的样式，那就完美了。
与富文本样式交互的方法是document.execCommand()。execCommand函数传递三个参数，第一个参数为命令，第二个参数表示是否需要提示用户提供给该命令一个值，第三个参数表示执行当前命令的参数值。有些浏览器设置第二个参数为true会报错，所以为了便于移植，通常我们设置为false。
比如要给选中文本字体加粗，命令表达式当如下所示：
document.execCommand(bold, false, null);
常用命令有：
backcolor:设置文档背景颜色、bold:文本加粗、copy:复制到剪切板、createlink:给选中文本设置连接、cut:剪切、delete:删除文本、fontname:字体名称
fontsize:字体大小、forecolor:字体换色、formatblock:用HTML标签格式化选中文本、indet:缩进、inserthorizontalrule:插入<hr>、insertimage:插入图片
insertorderedlist:插入<ol>、insertunorderedlist:插入<ul>、insertparagraph:插入<p>、italic:文本斜体、justifycenter:文本居中、justifyleft:左对齐
outdent:减少缩进、paste:粘贴剪切板内容、removeformat:删除样式、selectall:选中所有文本、underline:添加下划线、unlink:撤销链接。
标签：文本编辑,文本,ContentEditable,execCommand,所见即,设置,document,com 来源： https://www.cnblogs.com/xiongwei/p/15852368.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。