一、什么是富文本編輯器?
富文本編輯器.png
簡單介紹一下，看過上面的圖，您大致對富文本編輯器有個了解了，傳統(tǒng)的textArea輸入框輸入的內(nèi)容沒法做格式上的更改，它的功能跟我們的word一樣，可以對其中內(nèi)容的格式做一些調(diào)整，還可以添加圖片等等，它在開發(fā)中有個專有名詞，叫富文本編輯器。
1、ueditor
國內(nèi)人用ueditor的比較多，真的很中國化，經(jīng)常在貼吧或論壇里看到這種風格的富文本編輯器。
2、bootstrap-wysiwyg
這個插件是bootstrap官網(wǎng)推薦的。
3、vue-quill-editor
這個據(jù)說大企業(yè)用的比較多，百度一下技術(shù)背景，對它的評價是不限制框架，但是需要定制，理念很先進。
主要研究學習第三種vue-quill-editor富文本編輯
1、安裝依賴
npm install vue-quill-editor –save 或者
yarn add vue-quill-editor
2、使用
2.1 在src/plugins/VueQuillEditor.js(目錄沒有可以重建)
VueQuillEditor.js放入以下代碼
//一定要引入這三個css，不然文本編輯器會出現(xiàn)不規(guī)則黑白幾何圖形
//這三個css可以在main.js中引入，也可以在具體使用的.vue文件中引入
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
2.2 在main.js中引入
import './plugins/VueQuillEditor.js'
3、實現(xiàn)
3.1在具體vue文件中引用
<quill-editor ref="myTextEditor" v-model="content" :options="editorOption"
style="height: 600px; margin-bottom: 10px"></quill-editor>
3.2在data中綁定值
export default {
data() {
return {
//富文本內(nèi)容
content: "",
editorOption: {}
};
},
};
