1.嵌入空页面的iframe，并设置designMode属性值为“on”，这样整个文档就变得可以编辑。
<iframe
name="richtext" src="blank.html"></iframe>
window.addEventListener("load"，function ()｛
frames("richtext").document.designMode = "on"
});
需要在嵌入页面加载之后，动态设置iframe文档的designMode属性。
2.使用contenteditable属性
该属性最早是由IE实现，且可以作用于页面中的任何标签，只需要在文档里给标签设置以上属性即可，无需嵌入iframe、设置js属性，所以这种方式也是目前富文本编辑器插件中更多采用的方式
<div class="editbox" id="richtext" contenteditable>
<p></p>
<p contenteditable="false"></p>
</>
这样，此div元素中包含的内容就可以编辑了，当然也可以设置子元素(如第二个P元素)为不可编辑。通过js设置元素的该属性，也可以改变编辑模式：
var elm = document.getElementById('richtext');
elm.contentEditable = 'true';
3.三方插件
UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala、Tinymce、vue-quill-editor、bootstrap-wysiwyg
