富文本编辑器对比前端富文本编辑器使用( 二 )

html 初始化内容直接将内容写到要创建编辑器的 <div> 标签中。
<div id="div1"><p>初始化的内容</p><p>初始化的内容</p></div><script type="text/javascript">const E = window.wangEditorconst editor = new E('#div1')editor.create()</script>js 设置内容创建编辑器之后，使用 editor.txt.html(…) 设置编辑器内容。
<div id="div1"></div><script type="text/javascript">const E = window.wangEditorconst editor = new E('#div1')editor.create()editor.txt.html('<p>用 JS 设置的内容</p>') // 重新设置编辑器内容</script>获取 html使用 editor.txt.html() 获取 html。
需要注意的是：从编辑器中获取的 html 代码是不包含任何样式的纯 html ，如果显示的时候需要对其中的 <table> <code> <blockquote> 等标签进行自定义样式（这样既可实现多皮肤功能），下面提供了编辑器中使用的样式供参考。
/* table 样式 */table {border-top: 1px solid #ccc;border-left: 1px solid #ccc;}table td,table th {border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;padding: 3px 5px;}table th {border-bottom: 2px solid #ccc;text-align: center;}/* blockquote 样式 */blockquote {display: block;border-left: 8px solid #d0e5f2;padding: 5px 10px;margin: 10px 0;line-height: 1.4;font-size: 100%;background-color: #f1f1f1;}/* code 样式 */code {display: inline-block;*display: inline;*zoom: 1;background-color: #f1f1f1;border-radius: 3px;padding: 3px 5px;margin: 0 3px;}pre code {display: block;}/* ul ol 样式 */ul, ol {margin: 10px 0 10px 20px;}觉得效果不错的请帮忙加个关注点个赞，每天分享前端实用开发技巧

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：

富文本编辑器对比 前端富文本编辑器使用( 二 )

富文本编辑器对比前端富文本编辑器使用( 二 )