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


html 初始化内容直接将内容写到要创建编辑器的 <div> 标签中 。
<div id="div1"><p>初始化的内容</p><p>初始化的内容</p></div><!-- 引入 wangEditor.min.js --><script type="text/javascript">const E = window.wangEditorconst editor = new E('#div1')editor.create()</script>js 设置内容创建编辑器之后 , 使用 editor.txt.html(…) 设置编辑器内容 。
<div id="div1"></div><!-- 引入 wangEditor.min.js --><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小编还为您精选了以下内容,希望对您有所帮助: