node安裝的同學請直接用我本文的demo,原作者的demo好像有一點點小問題,本文demo是我修改過的,親測可用
先敬上官網:http://www.wangeditor.com/index.html
wangeditor是一個萌新富文本編輯器,基於js和css,重點在於它輕量,如果你需要的功能不是很複雜,那麼選它沒錯了,剛好能滿足你!
第一步:先保證你的電腦中安裝有node,當然使用cdn也可以,下載到本地也行,我這裏用的vue-cli,順便下載到項目依賴中了
本地下載:
https://github.com/wangfupeng1988/wangEditor/releases
cdn使用:
https://unpkg.com/wangeditor/release/wangEditor.min.js
node下載:
npm i wangeditor -S
第二步:在項目中引入該插件並定義html結構,我這裏使用vue腳手架,沒有使用腳手架和其他構建工具的同學可以使用script標籤對插件進行引用
例如:
<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中使用:先建立模板,然後引入插件,創建即可,可以對菜單進行配置,也可以對編輯器中的內容進行實時監聽
<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是一個類似回調函數,來自父組件,當然也可以自己寫一個函數,主要是用來獲取富文本編輯器中的html內容用來傳遞給服務端
props: ['catchData'], // 接收父組件的方法
mounted () {
this.editor = new E(this.$refs.editorElem)
// 編輯器的事件,每次改變會獲取其html內容
this.editor.customConfig.onchange = html => {
this.editorContent = html
this.catchData(this.editorContent) // 把這個html通過catchData的方法傳入父組件
}
this.editor.customConfig.menus = [
// 菜單配置
'head', // 標題
'bold', // 粗體
'fontSize', // 字號
'fontName', // 字體
'italic', // 斜體
'underline', // 下劃線
'strikeThrough', // 刪除線
'foreColor', // 文字顏色
'backColor', // 背景顏色
'link', // 插入鏈接
'list', // 列表
'justify', // 對齊方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入圖片
'table', // 表格
'code', // 插入代碼
'undo', // 撤銷
'redo' // 重複
]
this.editor.create() // 創建富文本實例
}
}
</script>