wangEditor的瞭解之路

1.下載地址https://github.com/wangfupeng1988/wangEditor/releases](https://github.com/wangfupeng1988/wangEditor/releasesjavascript

把這個文件下載好了，用哪一個引入哪一個html

2.建立一個文本編輯器java

<script type="text/javascript">
        var E = window.wangEditor
        var editor1 = new E('#div1')  // 兩個參數也能夠傳入 elem 對象，class 選擇器
        editor1.create()
    </script>

<div id="div1" class="text"> 
        <p>請輸入內容</p>
    </div>

3.此時會看到文本編輯器已經顯示出來了git

4.注意路徑js路徑若是不正確就會顯示不出來github

5.給編輯器顯示區寫東西編輯器

editor1.txt.html('<p>用 JS 設置的內容</p>')

6.給編輯器清空東西ide

editor.txt.clear()

7.獲取內容字體

<button id="btn1">獲取html</button>
    <button id="btn2">獲取text</button>

document.getElementById('btn1').addEventListener('click', function () {
        // 讀取 html
        alert(editor1.txt.html())
        }, false)
        document.getElementById('btn2').addEventListener('click', function () {
        // 讀取 text
        alert(editor1.txt.text())
        }, false)

8.菜單配置，建立editor以前url

editor1.customConfig.menus = [
            'head',  // 標題
            'bold',  // 粗體
            'fontSize',  // 字號
            'fontName',  // 字體
            'italic',  // 斜體
            'underline',  // 下劃線
            'strikeThrough',  // 刪除線
            'foreColor',  // 文字顏色
            'backColor',  // 背景顏色
            'link',  // 插入連接
            'list',  // 列表
            'justify',  // 對齊方式
            'quote',  // 引用
            'emoticon',  // 表情
            'image',  // 插入圖片
        ]

　　默認的菜單就是debug

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

9.debug模式，建立editor以前

editor.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0

10.插入連接，建立editor以前

editor.customConfig.linkImgCallback = function (url) {
    console.log(url) // url 即插入圖片的地址
}

11.背景顏色

editor.customConfig.colors = [
        '#000000',
        '#eeece0',
        '#1c487f',
        '#4d80bf',
        '#c24f4a',
        '#8baa4a',
        '#7b5ba1',
        '#46acc8',
        '#f9963b',
        '#ffffff'
    ]

12.base64位上傳圖片

editor1.customConfig.uploadImgShowBase64 = true

　你們以爲不錯的話能夠支持一下