一個簡單方便的富文本編輯器wangEditor

###我用的框架是angular2

1.使用npm install wangEditor

還得在首頁<script type="text/javascript" src="./assets/component/ueditorName/wangEditor.min.js"></script>
	在官網有能夠下載 我用的wangEditor是版本號3的

2.在html頁面中使用

<div id="editor">
    	<p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p>
	</div>

3.在ts裏面作配置信息

<div>個人由於是angular2使用這個wangEditor還要提早申明</div> declare let wangEditor:any;
 var E = wangEditor;
    var editor = new E('#editor');
    editor.customConfig.uploadImgServer = 'https://tdi-mmes.com/cmsComm/fileUpload';// 這是上傳服務的url地址
    editor.customConfig.uploadFileName = 'file';//添加一個file的屬性
    editor.customConfig.withCredentials = true//能夠攜帶cookie信息
    // 顏色
    editor.customConfig.colors = [
        '#000000',
        '#eeece0',
        '#1c487f',
        '#4d80bf',
        '#c21e4d',
        '#8baa4a',
        '#7b5ba1',
        '#46acc8',
        '#f9963b',
        '#ffffff',
        '#C21E4D',
        '#30C223',
        '#3BC2B4',
        '#C2B42F',
        '#C28849',
        '#C24423'

    ];
    editor.customConfig.uploadImgHooks = {

        success: function (xhr, editor, result) {
            // 圖片上傳並返回結果，圖片插入成功以後觸發
            // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果
        },
        // 若是服務器端返回的不是 {errno:0, data: [...]} 這種格式，可以使用該配置
        // （可是，服務器端返回的必須是一個 JSON 格式字符串！！！不然會報錯）
        customInsert: function (insertImg, result, editor) {
            // 圖片上傳並返回結果，自定義插入圖片的事件（而不是編輯器自動插入圖片！！！）
            // insertImg 是插入圖片的函數，editor 是編輯器對象，result 是服務器端返回的結果

            // 舉例：假如上傳圖片成功後，服務器端返回的是 {url:'....'} 這種格式，便可這樣插入圖片：
            var url = result.data[0] //這是返回的結果再插入編輯文本器中
            insertImg("http://img.gxcards.com/"+url)
            console.log(result);

            // result 必須是一個 JSON 格式字符串！！！不然報錯
        }
    };

    editor.create()

使用手冊地址

<a href="https://my.oschina.net/pingheyongfeng/blog/write">連接</a>