還猶豫該使用哪款富文本編輯器？別猶豫了用它就是了

簡單介紹一下wangEditor

wangEditor是基於javascript和css開發的 Web富文本編輯器， 輕量、簡潔、易用、開源免費
優點：輕量簡潔，最重要的是開源且中文文檔齊全。設計的UI漂亮。
以前我經常用百度的UEditor，雖然插件多，基本可以滿足各種需求，類似貼吧中的回覆界面，但是恕本人直言，實在是界面太不美觀了，有些小丑。所以本人比較推薦使用wangEditor，這個插件也基本能滿足需求，頁面個人覺得比較美觀，好看。
好了，不多說了，進入正題。

一、下載wangEditor

官方網站：http://www.wangeditor.com

• 點擊 https://github.com/wangfupeng1988/wangEditor/releases
  下載最新版。進入release文件夾下找到wangEditor.js或者wangEditor.min.js即可。

• 使用CDN：//unpkg.com/wangeditor/release/wangEditor.min.js

• 使用bower下載：bower install wangEditor （前提保證電腦已安裝了bower）

• 使用npm下載：npm install wangeditor （注意 wangeditor 全部是小寫字母）

在這裏我項目中採用的是直接下載 wangEditor.min.js 使用的

二、wangEditor的使用

我的項目中是使用了同時使用了兩個wangEditor編輯器

1. 首先將下載好的 wangEditor.min.js 導入項目中
   
2. 頁面中引入wangEditor.min.js，如下:
   

<!-- 注意， 只需要引用 JS，無需引用任何 CSS ！！！-->
<script src="javascript/wangEditor.min.js" charset="utf-8"></script>

接下來大家直接看代碼

javascript

<script type="text/javascript">
		//  初始化編輯器
		var E = window.wangEditor

		var editor = new E('#div1')
		var editor1 = new E('#div2')

	window.onload = function() {
		
		var $text1 = $('#text1')
		editor.customConfig.onchange = function(html) {
			// 監控變化，同步更新到 textarea
			$text1.val(html)
		}
		editor.create()
		// 初始化 textarea 的值
		$text1.val(editor.txt.html())

		var $text2 = $('#text2')
		editor1.customConfig.onchange = function(html) {
			// 監控變化，同步更新到 textarea
			$text2.val(html)
		}
		editor1.create()
		// 初始化 textarea 的值
		$text2.val(editor1.txt.html())

	}
</script>

Html

<tr>
	<td>
		<div class="form-group-col-2">
			<div class="form-label">隱私政策:</div>
			<div class="form-cont" id="div1"></div>
			<textarea id="text1" name="privacypolicy"
				style="width: 100%; height: 200px; display: none"></textarea>
		</div>
	</td>
</tr>

<tr>
	<td>
		<div class="form-group-col-2">
			<div class="form-label">使用條款:</div>
			<div class="form-cont" id="div2"></div>
			<textarea id="text2" name="termsofuse"
				style="width: 100%; height: 200px; display: none"></textarea>

		</div>
	</td>
</tr>

回顯編輯器的內容：

	//回顯編輯器內容
	
	editor.create()
	editor.txt.html($('#text1').val())
	
	editor1.create()
	editor1.txt.html($('#text2').val())

*記得每次要清空編輯器內容

	//清空富文本編輯器
	editor.txt.clear()
	editor1.txt.clear()

禁用編輯功能

// 禁用編輯功能
editor.$textElem.attr('contenteditable', false)

// 開啓編輯功能
editor.$textElem.attr('contenteditable', true)

這是我運行出來的效果圖

是不是效果很棒棒吶，喜歡的夥伴快快去試一試喲，相信你喲，哈哈?

也可以自定義菜單

<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    // 自定義菜單配置
    editor.customConfig.menus = [
        'head',
        'bold',
        'italic',
        'underline'
    ]
    editor.create()
</script>

[
    'head',  // 標題
    'bold',  // 粗體
    'fontSize',  // 字號
    'fontName',  // 字體
    'italic',  // 斜體
    'underline',  // 下劃線
    'strikeThrough',  // 刪除線
    'foreColor',  // 文字顏色
    'backColor',  // 背景顏色
    'link',  // 插入鏈接
    'list',  // 列表
    'justify',  // 對齊方式
    'quote',  // 引用
    'emoticon',  // 表情
    'image',  // 插入圖片
    'table',  // 表格
    'video',  // 插入視頻
    'code',  // 插入代碼
    'undo',  // 撤銷
    'redo'  // 重複
]