富文本编辑器WYSIWYG(所见即所得)之ContentEditable和document.execCommand (202201)

富文本编辑器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:撤销链接。