另类精品在线,国产精品久九九

一、背景

最近正在開發(fā)一個(gè)后臺管理系統(tǒng)，公司希望用戶可以隨時(shí)發(fā)布一些新聞、活動之類的，所以，需要一個(gè)富文本框編輯器。網(wǎng)上搜索對比了很多，連markdown類型的編輯器也對比過，思前想后還是決定試用vue-quill-editor。主要原因界面操作簡單、簡潔，文檔齊全。

二、效果展示

富文本框效果圖.png

三、安裝

npm install vue-quill-editor -S

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

1、全局引用

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

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è)大致的樣子，且可以簡單使用，但是，完全不滿足于我們的項(xiàng)目要求，所以，我們還是需要進(jìn)行一部分的配置。

配置editorOption

editorOption: {
    placeholder: '請輸入',
    theme: "snow",
    modules: {
        toolbar:{
             container: [
                    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜體 下劃線 刪除線
                    ['blockquote', 'code-block'], // 引用  代碼塊
                    [{ header: 1 }, { header: 2 }], // 1、2 級標(biāo)題
                    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、無序列表
                    [{ 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: [] }], // 對齊方式
                    ['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)過了處理，如圖：換成了自定義內(nèi)容，例如，修改字號，方法如下:

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)?，有些是英文，所以，我通過樣式將其修改為中文。注意：我們是在組件內(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: "請輸入鏈接地址:";
    }
    .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è)是字號數(shù)字對應(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;
    }
    
    /* 選擇字號富文本字的大小 */
    .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: '編號列表' },
  { 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: '對齊方式' },
  { 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: '小號' },
  { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大號' },
  { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大號' },
  { Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '標(biāo)準(zhǔn)' },
  { Choice: '.ql-align .ql-picker-item:first-child', title: '居左對齊' },
  { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中對齊' },
  { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右對齊' },
  { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '兩端對齊' }
]

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

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

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

七、上傳圖片或視頻

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

圖片上傳效果圖.png

base64格式圖片.png

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

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

<a-upload
     name="file"
    :multiple="false"
    action="#"
    :custom-request="customRequest"
    v-show="false"   //將其隱藏，只需要上傳，不需要顯示出來
>
    <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()   // 通過id來調(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 //拖動
//還需要安裝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); // 注冊

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)贊支持下

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

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

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、效果展示

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

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、效果展示

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、背景

二、效果展示

三、安裝

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

1、全局引用

五、使用vue-quill-editor

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

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

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

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

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

七、上傳圖片或視頻

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

3、上傳圖片并替換地址

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

1、安裝組件

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

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

5、效果展示