wangEditor富文本框的使用

原創 yehaocheng520 2020-06-19 15:58

wangEditor 輕量級web富文本編輯器，配置方便，使用簡單

使用npm下載：
npm install wangeditor

使用:

var E = window.wangEditor
var editor = new E('#div');
editor.create();

可以使用npm install wangeditor安裝（注意，這裏wangeditor全是小寫字母）

// 引用
var E = require('wangeditor')  // 使用 npm 安裝
var E = require('/wangEditor.min.js')  // 使用下載的源碼

// 創建編輯器
var editor = new E('#editor')
editor.create()

html 初始化內容

直接將內容寫到要創建編輯器的

標籤中

<div id="div1">
    <p>初始化的內容</p>
    <p>初始化的內容</p>
</div>

<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    editor.create()
</script>

js 設置內容

創建編輯器之後，使用editor.txt.html(…)設置編輯器內容

<div id="div1">
</div>

<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    editor.create()
    editor.txt.html('<p>用 JS 設置的內容</p>')
</script>

追加內容

創建編輯器之後，可使用editor.txt.append('<p>追加的內容</p>')繼續追加內容。

清空內容

可使用editor.txt.clear()清空編輯器內容

讀取內容

可以html和text的方式讀取編輯器的內容

<div id="div1">
    <p>歡迎使用 wangEditor 編輯器</p>
</div>
<button id="btn1">獲取html</button>
<button id="btn2">獲取text</button>

<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    editor.create()

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

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

</script>

自定義菜單

編輯器創建之前，可使用editor.customConfig.menus定義顯示哪些菜單和菜單的順序。注意：v3 版本的菜單不支持換行摺疊了（因爲換行之後菜單欄是在太難看），如果菜單欄寬度不夠，建議精簡菜單項。

代碼示例

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

<script type="text/javascript" src="/wangEditor.min.js"></script>
<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'  // 重複
]

配置編輯區域的 z-index

編輯區域的z-index默認爲10000，可自定義修改，代碼配置如下。需改之後，編輯區域和菜單的z-index會同時生效。

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

<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    editor.customConfig.zIndex = 100
    editor.create()
</script>

插入網絡圖片的回調

插入網絡圖片時，可通過如下配置獲取到圖片的信息。v3.0.10開始支持。

var E = window.wangEditor
var editor = new E('#div1')
editor.customConfig.linkImgCallback = function (url) {
    console.log(url) // url 即插入圖片的地址
}
editor.create()

插入鏈接的校驗

插入鏈接時，可通過如下配置對文字和鏈接進行校驗。v3.0.10開始支持。

var E = window.wangEditor
var editor = new E('#div1')
editor.customConfig.linkCheck = function (text, link) {
    console.log(text) // 插入的文字
    console.log(link) // 插入的鏈接

    return true // 返回 true 表示校驗成功
    // return '驗證失敗' // 返回字符串，即校驗失敗的提示信息
}
editor.create()

插入網絡圖片的校驗

插入網絡圖片時，可對圖片地址做自定義校驗。v3.0.13開始支持。

var E = window.wangEditor
var editor = new E('#div1')
editor.customConfig.linkImgCheck = function (src) {
    console.log(src) // 圖片的鏈接

    return true // 返回 true 表示校驗成功
    // return '驗證失敗' // 返回字符串，即校驗失敗的提示信息
}
editor.create()

配置 onfocus 函數

配置onfocus函數之後，用戶點擊富文本區域會觸發onfocus函數執行。

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

<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    editor.customConfig.onfocus = function () {
        console.log("onfocus")
    }
    editor.create()
</script>

配置 onblur 函數

配置onblur函數之後，如果當前有手動獲取焦點的富文本並且鼠標點擊富文本以外的區域，則會觸發onblur函數執行。

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

<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    editor.customConfig.onblur = function (html) {
        // html 即編輯器中的內容
        console.log('onblur', html)
    }
    editor.create()
</script>

隱藏/顯示 tab

顯示“上傳圖片”tab

默認情況下，編輯器不會顯示“上傳圖片”的tab，因爲你還沒有配置上傳圖片的信息。

參考一下示例顯示“上傳圖片”tab

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

<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')

    // 下面兩個配置，使用其中一個即可顯示“上傳圖片”的tab。但是兩者不要同時使用！！！
    // editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存圖片
    // editor.customConfig.uploadImgServer = '/upload'  // 上傳圖片到服務器

    editor.create()
</script>

隱藏“網絡圖片”tab

默認情況下，“網絡圖片”tab是一直存在的。如果不需要，可以參考一下示例來隱藏它。

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

<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')

    // 隱藏“網絡圖片”tab
    editor.customConfig.showLinkImg = false
    editor.create()
</script>

使用 base64 保存圖片

如果需要使用 base64 編碼直接將圖片插入到內容中，可參考一下示例配置

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

<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存圖片
    editor.create()
</script>

上傳圖片 & 配置

將圖片上傳到服務器上的配置方式

提示，如果上傳圖片提示錯誤，可以 打開 debug 模式 （會在 console.log 提示錯誤詳細信息）來輔助排查錯誤。

上傳圖片
參考如下代碼

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

<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')

    // 配置服務器端地址
    editor.customConfig.uploadImgServer = '/upload'

    // 進行下文提到的其他配置
    // ……
    // ……
    // ……

    editor.create()
</script>

其中/upload是上傳圖片的服務器端接口，接口返回的數據格式如下（實際返回數據時，不要加任何註釋！！！）

{
// errno 即錯誤代碼，0 表示沒有錯誤。
// 如果有錯誤，errno != 0，可通過下文中的監聽函數 fail 拿到該錯誤碼進行自定義處理
“errno”: 0,

// data 是一個數組，返回若干圖片的線上地址
"data": [
    "圖片1地址",
    "圖片2地址",
    "……"
]

}
限制圖片大小
默認限制圖片大小是 5M

// 將圖片大小限制爲 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
限制一次最多能傳幾張圖片
默認爲 10000 張（即不限制），需要限制可自己配置

// 限制一次最多上傳 5 張圖片
editor.customConfig.uploadImgMaxLength = 5
自定義上傳參數
上傳圖片時可自定義傳遞一些參數，例如傳遞驗證的token等。參數會被添加到formdata中。

editor.customConfig.uploadImgParams = {
    // 如果版本 <=v3.1.0 ，屬性值會自動進行 encode ，此處無需 encode
    // 如果版本 >=v3.1.1 ，屬性值不會自動 encode ，如有需要自己手動 encode
    token: 'abcdef12345'
}

如果還需要將參數拼接到 url 中，可再加上如下配置

editor.customConfig.uploadImgParamsWithUrl = true
自定義 fileName
上傳圖片時，可自定義filename，即在使用formdata.append(name, file)添加圖片文件時，自定義第一個參數。

editor.customConfig.uploadFileName = 'yourFileName'
自定義 header
上傳圖片時刻自定義設置 header

editor.customConfig.uploadImgHeaders = { 'Accept': 'text/x-json' }
withCredentials（跨域傳遞 cookie）
跨域上傳中如果需要傳遞 cookie 需設置 withCredentials

editor.customConfig.withCredentials = true
自定義 timeout 時間
默認的 timeout 時間是 10 秒鐘

// 將 timeout 時間改爲 3s
editor.customConfig.uploadImgTimeout = 3000
監聽函數
可使用監聽函數在上傳圖片的不同階段做相應處理

editor.customConfig.uploadImgHooks = {
    before: function (xhr, editor, files) {
        // 圖片上傳之前觸發
        // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，files 是選擇的圖片文件
        
        // 如果返回的結果是 {prevent: true, msg: 'xxxx'} 則表示用戶放棄上傳
        // return {
        //     prevent: true,
        //     msg: '放棄上傳'
        // }
    },
    success: function (xhr, editor, result) {
        // 圖片上傳並返回結果，圖片插入成功之後觸發
        // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果
    },
    fail: function (xhr, editor, result) {
        // 圖片上傳並返回結果，但圖片插入錯誤時觸發
        // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果
    },
    error: function (xhr, editor) {
        // 圖片上傳出錯時觸發
        // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
    },
    timeout: function (xhr, editor) {
        // 圖片上傳超時時觸發
        // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
    },

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

        // 舉例：假如上傳圖片成功後，服務器端返回的是 {url:'....'} 這種格式，即可這樣插入圖片：
        var url = result.url
        insertImg(url)

        // result 必須是一個 JSON 格式字符串！！！否則報錯
    }
    }
}

自定義提示方法
上傳圖片的錯誤提示默認使用alert彈出，你也可以自定義用戶體驗更好的提示方式

editor.customConfig.customAlert = function (info) {
    // info 是需要提示的內容
    alert('自定義提示：' + info)
}

自定義上傳圖片事件
如果想完全自己控制圖片上傳的過程，可以使用如下代碼

editor.customConfig.customUploadImg = function (files, insert) {
    // files 是 input 中選中的文件列表
    // insert 是獲取圖片 url 後，插入到編輯器的方法
    // 上傳代碼返回結果之後，將圖片插入到編輯器中
    insert(imgUrl)
}

富文本框的具體使用

<!-- 下面的富文本編輯器爲菜單與內容區分離 -->
<div id="div1" class="toolbar"></div>
<div ref="editor" id="div2" class="text"></div>

import E from 'wangeditor';

在mounted函數裏面添加以下代碼

var editor = new E('#div1', '#div2')  // 兩個參數也可以傳入 elem 對象，class 選擇器
 // 配置服務器端地址
 editor.customConfig.uploadImgServer = this.baseUrl + '/api/file/upload';
 // 自定義菜單配置
 editor.customConfig.zIndex = 10;
 editor.customConfig.uploadImgMaxLength = 1;
 //設置頭部
 editor.customConfig.uploadImgHeaders = {
     "Authorization": getToken()
 };
 editor.customConfig.uploadFileName = 'file';
 editor.customConfig.uploadImgHooks = {
     before: function (xhr, editor, files) {
         // 圖片上傳之前觸發
         // console.log(files);
     },
     success: function (xhr, editor, result) {
         // console.log(result);
     },
     customInsert: function (insertImg, result, editor) {
         var url = result.data.url
         insertImg(url);
     }
 }
 editor.customConfig.onchange = (html) => {
     this.editorContent = html;
 }
 editor.create()
 // 初始化數據
 editor.txt.html(this.obj.content);

富文本框內容校驗

checkEditor(str) {
   if (!str) {
       return;
   }
   // str = str.replace(/<\/?[^>]*>/g, ''); //去除HTML tag
   str = str.replace(/[ | ]*\n/g, '\n'); //去除行尾空白
   // str = str.replace(/[ ]|[&nbsp;]/g, '');//去除&nbsp;
   // str = str.replace(/ /ig, '');//去掉 
   // console.log(str);
   return str;
}

文本內容去除首尾空格

str = str.replace(/[ | ]*\n/g, '\n'); //去除行尾空白

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

wangEditor富文本編輯器的使用

yehaocheng520 2020-05-10 15:37:08

wangEditor富文本編輯器的使用

yehaocheng520 2020-05-10 15:37:08