Vue輕量級富文本編輯器-Vue-Quill-Editor

先看效果圖：女神鎮樓
      

  1.下載Vue-Quill-Editor

　 

 2.下載quill（Vue-Quill-Editor需要依賴）

 3.代碼　　

<template>
<div class="edit_container">
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
</div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //調用編輯器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
components: {
quillEditor
},
data() {
return {
content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
editorOption: {}
}
},
methods: {
onEditorReady(editor) { // 准備編輯器

},
onEditorBlur(){}, // 失去焦點事件
onEditorFocus(){}, // 獲得焦點事件
onEditorChange(){}, // 內容改變事件
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
},
}
}
</script>

 OK,搞定，簡潔的富文本編輯器就展現在你眼前了，另外附上API。Vue-Quill-Editor

4.自定義 toolbar 菜單

editorOption: {
placeholder: "請在這里輸入",
modules:{
toolbar:[
['bold', 'italic', 'underline', 'strike'], //加粗，斜體，下划線，刪除線
['blockquote', 'code-block'], //引用，代碼塊
[{ 'header': 1 }, { 'header': 2 }], // 標題，鍵值對的形式；1、2表示字體大小
[{ 'list': 'ordered'}, { 'list': 'bullet' }], //列表
[{ 'script': 'sub'}, { 'script': 'super' }], // 上下標
[{ 'indent': '-1'}, { 'indent': '+1' }], // 縮進
[{ 'direction': 'rtl' }], // 文本方向
[{ 'size': ['small', false, 'large', 'huge'] }], // 字體大小
[{ 'header': [1, 2, 3, 4, 5, 6, false] }], //幾級標題
[{ 'color': [] }, { 'background': [] }], // 字體顏色，字體背景顏色
[{ 'font': [] }], //字體
[{ 'align': [] }], //對齊方式
['clean'], //清除字體樣式
['image','video'] //上傳圖片、上傳視頻
]
}
},

5.存儲及將數據庫中的數據反顯為HTML字符串

后台接收到數據后會將字符中的標簽進行轉碼，所以我們要先進行一個解碼的操作讓他變成標簽形式的字符串：
例如后台接收的數據如下："&lt;h1&gt;title&lt;"  ，對應解碼后就是`<h1>title</h1>`。

 

 然后將返回值賦值給對應的參數：

 

 上面的str就是轉碼函數返回的值，我們要先在data中定義，所以我現在將新增跟展示放在一起，代碼如下：

<template>
<div class="edit_container">
<!-- 新增時輸入 -->
<quill-editor
v-model="content"
ref="myQuillEditor"
:options="editorOption"
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
<!-- 從數據庫讀取展示 -->
<div v-html="str" class="ql-editor">
{{str}}
</div>
</div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //調用編輯器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
components: {
quillEditor
},
data() {
return {
content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
str: '',
editorOption: {}
}
},
methods: {
onEditorReady(editor) { // 准備編輯器

},
onEditorBlur(){}, // 失去焦點事件
onEditorFocus(){}, // 獲得焦點事件
onEditorChange(){}, // 內容改變事件
// 轉碼
escapeStringHTML(str) {
str = str.replace(/&lt;/g,'<');
str = str.replace(/&gt;/g,'>');
return str;
}
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill;
},
},
mounted() {
let content = ''; // 請求后台返回的內容字符串
this.str = this.escapeStringHTML(content);
}
}
</script>

最后提醒大家一句，插件只兼容IE10以上，不能向下兼容，如果要向下兼容，只能放棄使用這個插件。

npm包的源碼介紹：https://gitee.com/jeffka/vue-quill-editor?utm_source=alading&utm_campaign=repo#example