前端使用富文本編輯器的插件有很多，今天獻(xiàn)上wangeditor的使用教程拐云，教你如何在vue中使用富文本編輯器
先敬上官網(wǎng)：http://www.wangeditor.com/index.html
wangeditor是一個(gè)萌新富文本編輯器，基于js和css，重點(diǎn)在于它輕量琅捏，如果你需要的功能不是很復(fù)雜冤狡，那么選它沒錯(cuò)了孙蒙，剛好能滿足你项棠！
第一步：先保證你的電腦中安裝有node，當(dāng)然使用cdn也可以挎峦，下載到本地也行香追，我這里用的vue-cli，順便下載到項(xiàng)目依賴中了
本地下載：
https://github.com/wangfupeng1988/wangEditor/releases
cdn使用：
https://unpkg.com/wangeditor/release/wangEditor.min.js
node下載：
npm i wangeditor -S
第二步：在項(xiàng)目中引入該插件并定義html結(jié)構(gòu)坦胶，我這里使用vue腳手架透典，沒有使用腳手架和其他構(gòu)建工具的同學(xué)可以使用script標(biāo)簽對(duì)插件進(jìn)行引用
例如：
<div id="editor"></div>
<script type="text/javascript" src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
editor.create()
</script>
vue-cli中使用：先建立模板，然后引入插件顿苇，創(chuàng)建即可峭咒，可以對(duì)菜單進(jìn)行配置，也可以對(duì)編輯器中的內(nèi)容進(jìn)行實(shí)時(shí)監(jiān)聽
<template>
<div id="wangeditor">
<div ref="editorElem" style="text-align:left;"></div>
</div>
</template>
<script>
import E from "wangeditor";
export default {
name: "Editor",
data() {
return {
editor: null,
editorContent: ''
};
},
// catchData是一個(gè)類似回調(diào)函數(shù)纪岁，來自父組件凑队，當(dāng)然也可以自己寫一個(gè)函數(shù)，主要是用來獲取富文本編輯器中的html內(nèi)容用來傳遞給服務(wù)端
props: ['catchData'], // 接收父組件的方法
mounted() {
this.editor = new E(this.$refs.editorElem);
// 編輯器的事件幔翰，每次改變會(huì)獲取其html內(nèi)容
this.editor.customConfig.onchange = html => {
this.editorContent = html;
this.catchData(this.editorContent); // 把這個(gè)html通過catchData的方法傳入父組件
};
this.editor.customConfig.menus = [
// 菜單配置
'head', // 標(biāo)題
'bold', // 粗體
'fontSize', // 字號(hào)
'fontName', // 字體
'italic', // 斜體
'underline', // 下劃線
'strikeThrough', // 刪除線
'foreColor', // 文字顏色
'backColor', // 背景顏色
'link', // 插入鏈接
'list', // 列表
'justify', // 對(duì)齊方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入圖片
'table', // 表格
'code', // 插入代碼
'undo', // 撤銷
'redo' // 重復(fù)
];
this.editor.create(); // 創(chuàng)建富文本實(shí)例
</script>
以上內(nèi)容就可以實(shí)現(xiàn)vue中簡(jiǎn)單使用富文本編輯器的功能了漩氨，更多介紹請(qǐng)參考官網(wǎng)
