wangeditor視頻

wangeditor網址http://www.wangeditor.com/

目前使用的是3.11版本

使用步驟

1.引用wangEditor.min.js

2.代碼

　　2.1 取得函數var E = window.wangEditor

　　2.2實例化,參數是要變成編輯器的那個DIV的IDvar editor = new E('#editordiv')editor.create()

　　2.3若是1個頁面上要多個編輯器,再new就能夠了var editor1 = new E('#editordiv1')editor1.create()

關於圖片

能夠設置後臺服務端上傳,也能夠設置直接在前端轉成BASE64. [editor.customConfig.uploadImgShowBase64=true],2.x用的時候好像沒有這功能.

從文檔上看,它上傳圖片,使用的是formData對象.

新版本提供了自定義上傳圖片的接口, 只要實現這個方法,就能夠上傳圖片了.

// 這個屬性用於限制圖片選框能選幾個圖片
customConfig.uploadImgMaxLength=1;
// 實現這個方法上傳圖片
customConfig.customUploadImg = async (files, insert) =>
{
   // 這個就是選中的文件,估計就是input控件的 files屬性
   files
   // files 是 input 中選中的文件列表
   // insert 是獲取圖片 url 後，插入到編輯器的方法
   inser();
}

獲取內容

editor.txt.html(),這個方法獲取html內容,也就是包含格式信息的內容

editor.txt.text(),這個方法獲取純文本內容,不含格式

關於視頻

插入格式以下

<iframe src="/cdn/media/info.mp4"></iframe>
<iframe src="http://localhost/cdn/media/info.mp4"></iframe>

注意有個狀況,使用iframe方式插入視頻時,有的瀏覽器不能識別播放.爲此,修改了第2611行附近開始 改進後,只須要輸入一個地址,就能自動生成video標籤,支持mp4,mp3.
2611行處修改內容

if (val) {
    if (val.startsWith('http')) {
        if (val.endsWith('mp4')) {
            // 插入視頻
            var videodom = `<video autoplay="autoplay" controls="controls"><source src="${val}" type="audio/mp4" /></video>`;
            _this._insert(videodom);
        } else if (val.endsWith('mp3')) {
            var audiodom = `<video autoplay="autoplay" controls="controls"><source src="${val}" type="audio/mp3" /></video>`;
            _this._insert(audiodom);
        }
        return true;
    }
    alert('無效的視頻地址');
}