前端学习(2732):重读vue电商网站42之添加富文本编辑器
生活随笔
收集整理的這篇文章主要介紹了
前端学习(2732):重读vue电商网站42之添加富文本编辑器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
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之添加富文本编辑器的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Windows蓝屏代码查询(Bug Ch
- 下一篇: 前端学习(2529):搭建中央管理