品牌新增页面
商品描述
商品描述信息比較復(fù)雜，而且圖文并茂，甚至包括視頻。
這樣的內(nèi)容，一般都會(huì)使用富文本編輯器。
什么是富文本編輯器
百度百科：
通俗來(lái)說(shuō)：富文本，就是比較豐富的文本編輯器。普通的框只能輸入文字，而富文本還能給文字加顏色樣式等。
富文本編輯器有很多，例如：KindEditor、Ueditor。但并不原生支持vue
但是我們今天要說(shuō)的，是一款支持Vue的富文本編輯器：vue-quill-editor
?
Vue-Quill-Editor
GitHub的主頁(yè)：https://github.com/surmon-china/vue-quill-editor
Vue-Quill-Editor是一個(gè)基于Quill的富文本編輯器：Quill的官網(wǎng)
使用指南
使用非常簡(jiǎn)單：已經(jīng)在項(xiàng)目中集成。以下步驟不需操作，僅供參考
第一步：安裝，使用npm命令：
npm install vue-quill-editor --save第二步：加載，在js中引入：
全局引入：
import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor'const options = {}; /* { default global options } */Vue.use(VueQuillEditor, options); // options可選局部引入：
import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css'import {quillEditor} from 'vue-quill-editor'var vm = new Vue({components:{quillEditor} })我們這里采用局部引用：
第三步：頁(yè)面使用：
<quill-editor v-model="goods.spuDetail.description" :options="editorOption"/>自定義的富文本編輯器
不過(guò)這個(gè)組件有個(gè)小問(wèn)題，就是圖片上傳的無(wú)法直接上傳到后臺(tái)，因此我們對(duì)其進(jìn)行了封裝，支持了圖片的上傳。
使用也非常簡(jiǎn)單：
<v-stepper-content step="2"><v-editor v-model="goods.spuDetail.description" upload-url="/upload/image"/> </v-stepper-content>-
upload-url：是圖片上傳的路徑
-
v-model：雙向綁定，將富文本編輯器的內(nèi)容綁定到goods.spuDetail.description
效果
?
總結(jié)
