wangEditor富文本编辑器的使用
一. wangEditor官方网址
二,wangEditor优势
一个产品的价值,就在于解决用户的问题,提高效率、降低成本、增加稳定性和扩展性。
wangEditor 不是为了做而做,也不是单纯的模仿谁,而是经过上述问题分析之后,给出一个系统的解决方案。旨在真正去解决用户的问题,产出自己的价值。
三,使用
首先创建一个容器,再引入官方js文件
创建一个实例
通过editor.txt.html()以html格式获取富文本框里面的内容
这个主要解决了,前端文本文件在服务器中的存储问题,更加方便
<div id="div1">
</div>
<button id="btn" type="button">asdasdas</button>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"
></script>
<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const E = window.wangEditor
const editor = new E("#div1")
// 或者 const editor = new E(document.getElementById('div1'))
editor.create()
console.log("adsasd");
$("#btn").click(function(){
console.log(editor.txt.html());
});
</script>