vue-quill-editor富文本編輯器基本的使用與步驟

一、背景

最近正在開(kāi)發(fā)一個(gè)后臺(tái)管理系統(tǒng)椎瘟，公司希望用戶可以隨時(shí)發(fā)布一些新聞、活動(dòng)之類的侄旬，所以肺蔚，需要一個(gè)富文本框編輯器。網(wǎng)上搜索對(duì)比了很多儡羔，連markdown類型的編輯器也對(duì)比過(guò)宣羊，思前想后還是決定試用vue-quill-editor璧诵。主要原因界面操作簡(jiǎn)單、簡(jiǎn)潔仇冯，文檔齊全之宿。

二、效果展示

富文本框效果圖.png

三苛坚、安裝

npm install vue-quill-editor -S

四比被、引入到項(xiàng)目中

1、全局引用

富文本框在整個(gè)系統(tǒng)中引用的部分很少泼舱，所以等缀，個(gè)人不建議全局引用，但是柠掂，還是把方法粘貼出來(lái)项滑，可供大家參考

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)

2依沮、界面引用

我是界面引用涯贞，直接封裝了一個(gè)組件

import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

components: {   //界面組件引用
    quillEditor
}

五、使用vue-quill-editor

<quill-editor
    class='editor'
    v-model="content"
    ref="myQuillEditor"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @change="onEditorChange($event)"
    @ready="onEditorReady($event)">
</quill-editor>

// 失去焦點(diǎn)事件
  onEditorBlur(quill) {
    console.log('editor blur!', quill)
  },
// 獲得焦點(diǎn)事件
  onEditorFocus(quill) {
    console.log('editor focus!', quill)
  },
// 準(zhǔn)備富文本編輯器
  onEditorReady(quill) {
    console.log('editor ready!', quill)
  },
// 內(nèi)容改變事件危喉，只需要這一個(gè)方法就夠了
  onEditorChange({ quill, html, text }) {
    console.log('editor change!', quill, html, text)
    this.content = html
  }

在VUE界面中使用以下代碼宋渔，就可以看到富文本框的一個(gè)大致的樣子，且可以簡(jiǎn)單使用辜限，但是皇拣，完全不滿足于我們的項(xiàng)目要求，所以薄嫡，我們還是需要進(jìn)行一部分的配置氧急。

配置editorOption

editorOption: {
    placeholder: '請(qǐng)輸入',
    theme: "snow",
    modules: {
        toolbar:{
             container: [
                    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜體 下劃線 刪除線
                    ['blockquote', 'code-block'], // 引用  代碼塊
                    [{ header: 1 }, { header: 2 }], // 1、2 級(jí)標(biāo)題
                    [{ list: 'ordered' }, { list: 'bullet' }], // 有序毫深、無(wú)序列表
                    [{ script: 'sub' }, { script: 'super' }], // 上標(biāo)/下標(biāo)
                    [{ indent: '-1' }, { indent: '+1' }], // 縮進(jìn)
                    // [{ direction: 'rtl' }], // 文本方向
                    [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字體大小
                    [{ header: [1, 2, 3, 4, 5, 6] }], // 標(biāo)題
                    [{ color: [] }, { background: [] }], // 字體顏色吩坝、字體背景顏色
                    // [{ font: ['songti'] }], // 字體種類
                    [{ align: [] }], // 對(duì)齊方式
                    ['clean'], // 清除文本格式
                    ['image'] // 鏈接、圖片哑蔫，需要視頻的可以加上video
             ],
             handlers: {   //此處是圖片上傳時(shí)候需要使用到的
                 'image': function (value) {
                           console.log(value)
                           if (value) {  // 點(diǎn)擊圖片
                              document.querySelector('#upload').click()
                           }
                      }
                 }
           },
           imageDrop: true,   // 圖片拖拽
            imageResize: {     // 圖片放大縮小
                  displayStyles: {
                        backgroundColor: "black",
                        border: "none",
                        color: "white"
                 },
                 modules: ["Resize", "DisplaySize", "Toolbar"]
            }
       }
}

這里的size和header經(jīng)過(guò)了處理钉寝，如圖：換成了自定義內(nèi)容，例如闸迷，修改字號(hào)嵌纲，方法如下:

1、找到node_modules里的quill/dist/quill.js

2腥沽、在文件中搜索small逮走，快速找到，然后修改成你想要的數(shù)據(jù)

優(yōu)化效果圖.png

var SizeClass = new _parchment2.default.Attributor.Class('size', 'ql-size', {
  scope: _parchment2.default.Scope.INLINE,
  whitelist: ['12', '14', '16', '18', '20', '22', '24', '28', '30', '36']
});
var SizeStyle = new _parchment2.default.Attributor.Style('size', 'font-size', {
  scope: _parchment2.default.Scope.INLINE,
  whitelist: ['12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '30px', '36px']
});

3今阳、修改完js之后师溅，需要添加一些css才可以生效邓嘹，這里我直接寫在了VUE界面中的樣式里面。因?yàn)橄找龋行┦怯⑽男谘海裕彝ㄟ^(guò)樣式將其修改為中文起便。注意：我們是在組件內(nèi)寫的樣式所以要?jiǎng)h除 style lang=‘less’ scoped 中的 scoped,使樣式全局生效棚贾。

<style lang="less">
  .editor {
        line-height: normal !important;
        height: 400px;
    }
    .ql-snow .ql-tooltip[data-mode="link"]::before {
        content: "請(qǐng)輸入鏈接地址:";
    }
    .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
        border-right: 0px;
        content: "保存";
        padding-right: 0px;
    }

    .ql-snow .ql-picker.ql-size .ql-picker-label::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item::before {
        content: "14px";
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
        content: "10px";
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
        content: "18px";
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
        content: "32px";
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item::before {
        content: "文本";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
        content: "標(biāo)題1";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
        content: "標(biāo)題2";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
        content: "標(biāo)題3";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
        content: "標(biāo)題4";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "標(biāo)題5";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "標(biāo)題6";
    }

    .ql-snow .ql-picker.ql-font .ql-picker-label::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: "標(biāo)準(zhǔn)字體";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
    content: "襯線字體";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
    content: "等寬字體";
    }

    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
        content: '12px';
        vertical-align: top;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
        content: '14px';
        vertical-align: top;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
    content: '16px';
    vertical-align: top;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
    content: '18px';
    vertical-align: top;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
    content: '20px';
    vertical-align: top;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
    content: '22px';
    vertical-align: top;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
    content: '24px';
    vertical-align: top;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
    content: '28px';
    vertical-align: top;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
    content: '32px';
    vertical-align: top;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
    content: '36px';
    vertical-align: top;
    }
    
    
    
    /* 這個(gè)是字號(hào)數(shù)字對(duì)應(yīng)的px值 */
    .ql-editor .ql-size-12 {
    font-size: 12px;
    }
    .ql-editor .ql-size-14 {
    font-size: 14px;
    }
    .ql-editor .ql-size-16 {
    font-size: 16px;
    }
    .ql-editor .ql-size-18 {
    font-size: 18px;
    }
    .ql-editor .ql-size-20 {
    font-size: 20px;
    }
    .ql-editor .ql-size-22 {
    font-size: 22px;
    }
    .ql-editor .ql-size-24 {
    font-size: 24px;
    }
    .ql-editor .ql-size-28 {
    font-size: 28px;
    }
    .ql-editor .ql-size-32 {
    font-size: 32px;
    }
    .ql-editor .ql-size-36 {
    font-size: 36px;
    }
    
    /* 選擇字號(hào)富文本字的大小 */
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
    font-size: 12px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
    font-size: 14px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
    font-size: 16px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
    font-size: 18px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
    font-size: 20px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
    font-size: 22px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
    font-size: 24px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
    font-size: 28px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
    font-size: 32px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
    font-size: 36px;
    }
</style>

六、給工具欄鼠標(biāo)懸停加上注意

1榆综、先定義一個(gè)數(shù)組妙痹，把所有的工具放在里面

const titleConfig = [
  { Choice: '.ql-insertMetric', title: '跳轉(zhuǎn)配置' },
  { Choice: '.ql-bold', title: '加粗' },
  { Choice: '.ql-italic', title: '斜體' },
  { Choice: '.ql-underline', title: '下劃線' },
  { Choice: '.ql-header', title: '段落格式' },
  { Choice: '.ql-strike', title: '刪除線' },
  { Choice: '.ql-blockquote', title: '塊引用' },
  { Choice: '.ql-code', title: '插入代碼' },
  { Choice: '.ql-code-block', title: '插入代碼段' },
  { Choice: '.ql-font', title: '字體' },
  { Choice: '.ql-size', title: '字體大小' },
  { Choice: '.ql-list[value="ordered"]', title: '編號(hào)列表' },
  { Choice: '.ql-list[value="bullet"]', title: '項(xiàng)目列表' },
  { Choice: '.ql-direction', title: '文本方向' },
  { Choice: '.ql-header[value="1"]', title: 'h1' },
  { Choice: '.ql-header[value="2"]', title: 'h2' },
  { Choice: '.ql-align', title: '對(duì)齊方式' },
  { Choice: '.ql-color', title: '字體顏色' },
  { Choice: '.ql-background', title: '背景顏色' },
  { Choice: '.ql-image', title: '圖像' },
  { Choice: '.ql-video', title: '視頻' },
  { Choice: '.ql-link', title: '添加鏈接' },
  { Choice: '.ql-formula', title: '插入公式' },
  { Choice: '.ql-clean', title: '清除字體格式' },
  { Choice: '.ql-script[value="sub"]', title: '下標(biāo)' },
  { Choice: '.ql-script[value="super"]', title: '上標(biāo)' },
  { Choice: '.ql-indent[value="-1"]', title: '向左縮進(jìn)' },
  { Choice: '.ql-indent[value="+1"]', title: '向右縮進(jìn)' },
  { Choice: '.ql-header .ql-picker-label', title: '標(biāo)題大小' },
  { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '標(biāo)題一' },
  { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '標(biāo)題二' },
  { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '標(biāo)題三' },
  { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '標(biāo)題四' },
  { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '標(biāo)題五' },
  { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '標(biāo)題六' },
  { Choice: '.ql-header .ql-picker-item:last-child', title: '標(biāo)準(zhǔn)' },
  { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小號(hào)' },
  { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大號(hào)' },
  { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大號(hào)' },
  { Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '標(biāo)準(zhǔn)' },
  { Choice: '.ql-align .ql-picker-item:first-child', title: '居左對(duì)齊' },
  { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中對(duì)齊' },
  { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右對(duì)齊' },
  { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '兩端對(duì)齊' }
]

2、在mounted中執(zhí)行循環(huán)方法

注意：頁(yè)面上已經(jīng)渲染好元素之后鼻疮，不然會(huì)獲取不到元素

mounted () {
     for (let item of titleConfig) {
            let tip = document.querySelector('.quill-editor ' + item.Choice)
            if (!tip) continue
            tip.setAttribute('title', item.title)
     }
}

七怯伊、上傳圖片或視頻

此處上傳圖片或視頻都將會(huì)轉(zhuǎn)化為base64格式，大家可以在控制臺(tái)中打印出來(lái)看下判沟。這里我們需要將圖片或視頻先上傳到服務(wù)器耿芹，然后，在富文本中使用圖片地址挪哄。這樣子可以節(jié)約很大的空間吧秕，且還非常的簡(jiǎn)潔。

圖片上傳效果圖.png

base64格式圖片.png

1迹炼、定義一個(gè)上傳組件

我這使用的是Ant Design of Vue中的上傳組件

<a-upload
     name="file"
    :multiple="false"
    action="#"
    :custom-request="customRequest"
    v-show="false"   //將其隱藏砸彬，只需要上傳，不需要顯示出來(lái)
>
    <a-button type="primary" id="upload"> <a-icon type="upload" />點(diǎn)擊上傳附件</a-button>
</a-upload>

2斯入、添加圖片點(diǎn)擊調(diào)用砂碉，查看本文的配置editorOption

因?yàn)椋覀冃枰邳c(diǎn)擊圖片事件之前調(diào)用我們自己定義的上傳方法

handlers: {   // 此處可以看上圖  配置editorOption
       'image': function (value) {
               console.log(value)
               if (value) {  // 點(diǎn)擊圖片
                       document.querySelector('#upload').click()   // 通過(guò)id來(lái)調(diào)用上傳方法
                }
      }
}

3刻两、上傳圖片并替換地址

每個(gè)人的圖片上傳方法不一致增蹭，我這里只是展示上傳成功之后的一些操作

// 獲取光標(biāo)所在位置
let quill = this.$refs.myQuillEditor.quill
let length = quill.getSelection().index
// 插入圖片  
quill.insertEmbed(length, 'image', imageUrl)  // imageUrl:圖片地址
// 調(diào)整光標(biāo)到最后
quill.setSelection(length + 1)

八、使用圖片的放大闹伪、搜小沪铭，位置的調(diào)整

1、安裝組件

npm install quill-image-resize-module -S  //縮放
npm install quill-image-drop-module -S //拖動(dòng)
//還需要安裝quill 因?yàn)檫@幾個(gè)插件都是依賴于quill
npm install quill -S

2偏瓤、引用組件

import Quill from "quill";
import ImageResize from "quill-image-resize-module"; // 引用
import { ImageDrop } from "quill-image-drop-module";
Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize); // 注冊(cè)

3杀怠、在界面中配置，查看本文的配置editorOption

imageDrop: true,
imageResize: {
     displayStyles: {
     backgroundColor: "black",
     border: "none",
     color: "white"
},
modules: ["Resize", "DisplaySize", "Toolbar"]

4厅克、在 vue.config.js中加入configureWebpack中配置

const webpack = require('webpack')

configureWebpack: config => {
        config.plugins.push(   // 富文本框圖片縮放赔退、調(diào)整位置
            new webpack.ProvidePlugin({
                'window.Quill': 'quill/dist/quill.js',//注意路徑，可能與你們路徑不一致
                'Quill': 'quill/dist/quill.js' //注意路徑，可能與你們路徑不一致
            })
        )
}

5硕旗、效果展示

縮放窗骑、調(diào)整位置效果展示.png

官網(wǎng)文檔：
https://www.kancloud.cn/liuwave/quill/1409366

本文章參考文獻(xiàn)如下：

https://blog.csdn.net/qq_44782585/article/details/123571236
https://blog.csdn.net/liuqiao0327/article/details/107126784

歡迎大家點(diǎn)贊支持下

最后編輯于：2023.10.19 16:39:18

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市漆枚，隨后出現(xiàn)的幾起案子创译，更是在濱河造成了極大的恐慌，老刑警劉巖墙基，帶你破解...
沈念sama閱讀 221,273評(píng)論 6贊 515
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件软族，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡残制，警方通過(guò)查閱死者的電腦和手機(jī)立砸，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,349評(píng)論 3贊 398
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)初茶，“玉大人颗祝，你說(shuō)我怎么就攤上這事∧詹迹” “怎么了螺戳？”我有些...
開(kāi)封第一講書人閱讀 167,709評(píng)論 0贊 360
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)桥氏。經(jīng)常有香客問(wèn)我温峭，道長(zhǎng)猛铅，這世上最難降的妖魔是什么字支？我笑而不...
開(kāi)封第一講書人閱讀 59,520評(píng)論 1贊 296
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮奸忽，結(jié)果婚禮上堕伪，老公的妹妹穿的比我還像新娘。我一直安慰自己栗菜，他們只是感情好欠雌，可當(dāng)我...
茶點(diǎn)故事閱讀 68,515評(píng)論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著疙筹，像睡著了一般富俄。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上而咆，一...
開(kāi)封第一講書人閱讀 52,158評(píng)論 1贊 308
城市分裂傳說(shuō)
那天霍比，我揣著相機(jī)與錄音，去河邊找鬼暴备。笑死悠瞬，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播浅妆，決...
沈念sama閱讀 40,755評(píng)論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼望迎，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了凌外？” 一聲冷哼從身側(cè)響起辩尊，我...
開(kāi)封第一講書人閱讀 39,660評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎康辑，沒(méi)想到半個(gè)月后对省，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 46,203評(píng)論 1贊 319
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡晾捏，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,287評(píng)論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年蒿涎，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片惦辛。...
茶點(diǎn)故事閱讀 40,427評(píng)論 1贊 352
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡劳秋，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出胖齐，到底是詐尸還是另有隱情玻淑，我是刑警寧澤，帶...
沈念sama閱讀 36,122評(píng)論 5贊 349
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布呀伙，位于F島的核電站补履，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏剿另。R本人自食惡果不足惜箫锤，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,801評(píng)論 3贊 333
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望雨女。院中可真熱鬧谚攒，春花似錦、人聲如沸氛堕。這莊子的主人今日做“春日...
開(kāi)封第一講書人閱讀 32,272評(píng)論 0贊 23
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)讼稚。三九已至括儒，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間锐想，已是汗流浹背帮寻。一陣腳步聲響...
開(kāi)封第一講書人閱讀 33,393評(píng)論 1贊 272
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留痛倚，地道東北人规婆。一個(gè)月前我還...
沈念sama閱讀 48,808評(píng)論 3贊 376
代替公主和親
正文我出身青樓，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親抒蚜。傳聞我的和親對(duì)象是個(gè)殘疾皇子掘鄙，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,440評(píng)論 2贊 359

vue-quill-editor富文本編輯器基本的使用與步驟

一、背景

二、效果展示

三苛坚、安裝

四比被、引入到項(xiàng)目中

1、全局引用

2依沮、界面引用

五、使用vue-quill-editor

配置editorOption

1、找到node_modules里的quill/dist/quill.js

2腥沽、在文件中搜索small逮走，快速找到，然后修改成你想要的數(shù)據(jù)

六、給工具欄鼠標(biāo)懸停加上注意

1榆综、 先定義一個(gè)數(shù)組妙痹，把所有的工具放在里面

2、在mounted中執(zhí)行循環(huán)方法

七怯伊、上傳圖片或視頻

1迹炼、定義一個(gè)上傳組件

2斯入、添加圖片點(diǎn)擊調(diào)用砂碉，查看本文的配置editorOption

3刻两、上傳圖片并替換地址

八、使用圖片的放大闹伪、搜小沪铭，位置的調(diào)整

1、安裝組件

2偏瓤、引用組件

3杀怠、在界面中配置，查看本文的配置editorOption

4厅克、在 vue.config.js中加入configureWebpack中配置

5硕旗、效果展示

推薦閱讀更多精彩內(nèi)容

1榆综、先定義一個(gè)數(shù)組妙痹，把所有的工具放在里面