wangEditor富文本编辑器的简单使用

项目需求

发邮件模板，可以动态增加变量，上传图片（网络，本地）
之前查相关资料接触到CKEditor、UEeditor和wangEditor的富文本编辑器，最后选用wangEditor。不足之处wangEditor没有格式刷功能，目前项目需求还未解决格式刷问题。

一、定义富文本显示的区域

<div id="wangEditorWrap" class="toolbar"></div>

二、引入js，创建富文本编辑器

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="wangEditor.js"></script>
<script type="text/javascript">
	var E = window.wangEditor
	var editor = new E('#wangEditorWrap')
	editor.create()  
</script>

三、富文本编辑器

<button id="btn">点击光标后插入新的内容</button>

	/*
	        创建时间：2020年1月6日15:34:07
	        功能：光标处插入文本 
    */
	document.getElementById('wangEditorWrap').addEventListener('click', function () {

        //获取光标位置
        var range = window.getSelection().getRangeAt(0);
        //新建标签及内容
        var newSpan=document.createElement("span");
		//插入的内容
        newSpan.appendChild(document.createTextNode("Water"));
        //插到光标处
        range.insertNode(newSpan); 	
        
        //获取到富文本的html
        console.log("富文本的html为：" + editor.txt.html());
        //获取到富文本的text
        console.log("富文本的text为：" + editor.txt.text());
	        
	}, false)