?

vue-quill-editor 官方文檔傳送門

通過?vue-ui?界面，可以安裝我們所需要的依賴，或者使用下文?npm?或?yarn安裝。

NPM

Js

npm install vue-quill-editor --save# or yarn add vue-quill-editor

Mount with global

Js

import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css' // import styles import 'quill/dist/quill.snow.css' // for snow theme import 'quill/dist/quill.bubble.css' // for bubble themeVue.use(VueQuillEditor, /* { default global options } */)

打開?main.js?入口文件，進行全局導入和注冊：

Js

// 導入富文本編輯器 import VueQuillEditor from 'vue-quill-editor' // 導入富文本編輯器對應的樣式 import 'quill/dist/quill.core.css' // import styles import 'quill/dist/quill.snow.css' // for snow theme import 'quill/dist/quill.bubble.css' // for bubble theme// 將富文本編輯器進行全局注冊 Vue.use(VueQuillEditor/* { default global options } */)

使用

通過?quill-editor?標簽，然后通過?v-model?雙向綁定到?form表單的商品詳情描述變量?goods_introduce?上。

最終實現效果如下：

總結

以上是生活随笔為你收集整理的前端学习（2732）：重读vue电商网站42之添加富文本编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。