vue 富文本編譯器 vue-quill-editor

vue的富文本的編譯器

第一步：安裝依賴

npm install vue-quill-editor --save

第二步：在vue中引入，也可以在全局引入

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
  },

// 頁面
<el-card style="height: 610px;">
      <quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;" :options="editorOption">
      </quill-editor>
</el-card>

//return 內參數
      // 富文本
      content: null,
      editorOption: {}

 

報錯的原因是下載版本與vue的版本對不上
vue2.0版本應該使用

npm install --save "@tinymce/tinymce-vue@^3"

vue3.0版本應該使用

npm install --save "@tinymce/tinymce-vue@^4"

 

使用tinymce富文本編輯器，頁面沒有顯示編輯器的圖標，而是顯示！not found！，查看控制台顯示Uncaught SyntaxError: Unexpected token '<'
解決辦法：找到Editor.vue文件，引入import 'tinymce/icons/default'，即可，

二、最簡單的富文本使用方法

Quill的富文本編輯器分為snow和bubble兩種。

npm i quill --save

使用方法

vue頁面

</template>
<div>
<tinymceeditor
                v-model="content"
                @blur="onEditorBlur()"
                @focus="onEditorFocus()"
                @change="onEditorChange()"
        />
  </div>
</template>

<script>
import tinymceeditor from '@/components/ue.vue'
export default {
  components:{
    tinymceeditor
  },
  data() {
    return {
      content: "富文本編輯器初始值"
    }
   }
methods: {
    onEditorBlur(res){
      console.log(res,"點擊")
    },
    onEditorFocus(res){
      console.log(res,"選中")
    },
    onEditorChange(res){
      console.log(res,"觸發")
    },
}
}

封裝組件

<template>
    <div ref="editor" :style="finalStyle"></div>
</template>
<script>
    import Quill from "quill";
    import "quill/dist/quill.snow.css";
    import hljs from 'highlight.js'
    import 'highlight.js/styles/monokai-sublime.css'

    export default {
        watch: {
            value(newVal) {
                if (newVal && newVal !== this.newValue) {
                    // 父組件傳入新值，且父組件傳入的新值不為子組件當前的值（子組件的內容發生改變時傳給父組件的值）時
                    this.newValue = newVal
                    this.quill.pasteHTML(newVal)
                } else if (!newVal) {
                    this.quill.setText('')
                }
            },
            disabled(newVal) {
                this.quill.enable(!newVal)
            }
        },
        props: {
            hideTool: {
                type: Boolean,
                default: false
            },
            value: String,
            disabled: {
                type: Boolean,
                default: false
            },
            editorStyle: {
                type: Object,
                default: () => {
                    return {
                        minHeight: '100px'
                    }
                }
            },
            disabledStyle: {
                type: Object,
                default: () => {
                    // 與elementui表單禁用風格一致
                    return {
                        background: "#f5f7fa",
                        color: "#c0c4cc",
                        cursor: "not-allowed",
                        borderRadius: "4px",
                        border: "1px solid #dcdfe6"
                    }
                }
            },
            options: {
                type: Object,
                required: false,
                default: () => ({})
            },
        },
        methods: {
            disEditor() {
                this.finalStyle = Object.assign({}, this.finalStyle, this.disabledStyle)
            },
            init() {
                if (JSON.stringify(this.editorStyle) !== "{}") {
                    this.finalStyle = this.editorStyle
                }
                // 自定義字體
                let fontList = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong']
                Quill.import('formats/font').whitelist = fontList; //將字體加入到白名單
                let defaultOptions = {
                    theme: "snow",
                    placeholder: "請在這里輸入",
                    modules: {
                        syntax: {
                            highlight: text => {
                                return hljs.highlightAuto(text).value; // 這里就是代碼高亮需要配置的地方
                            }
                        },
                        toolbar: {
                            container: [
                                // [{ 'header': 1 }, { 'header': 2 }], // 標題 —— 獨立平鋪
                                [{header: [1, 2, 3, 4, 5, 6, false]}], // 標題 —— 下拉選擇
                                [{size: ["small", false, "large", "huge"]}], // 字體大小
                                [{list: "ordered"}, {list: "bullet"}], // 有序、無序列表
                                ["blockquote", "code-block"], // 引用  代碼塊
                                // 鏈接按鈕需選中文字后點擊
                                ["link", "image", "video"], // 鏈接、圖片、視頻
                                [{align: []}], // 對齊方式// text direction
                                [{indent: "-1"}, {indent: "+1"}], // 縮進
                                ["bold", "italic", "underline", "strike"], // 加粗 斜體 下划線 刪除線
                                [{color: []}, {background: []}], // 字體顏色、字體背景顏色
                                [{'script': 'sub'}, {'script': 'super'}],      // 下標/上標
                                [{'font': fontList}],//字體
                                ["clean"], // 清除文本格式
                            ]
                        }
                    }
                }
                let finalOptions = Object.assign({}, defaultOptions, this.options)
                if (this.hideTool) {
                    finalOptions.modules.toolbar = null
                }
                this.quill = new Quill(this.$refs.editor, finalOptions);
                this.addQuillTitle();
                if (this.value) {
                    this.quill.pasteHTML(this.value)
                }
                // 調整光標到最后
                this.quill.setSelection(this.quill.getLength() + 1);
                this.quill.enable(!this.disabled)
                if (this.disabled) {
                    this.disEditor()
                }
                this.quill.on('selection-change', range => {
                    if (!range) {
                        this.$emit('blur', this.quill)
                    } else {
                        this.$emit('focus', this.quill)
                    }
                })
                this.quill.on('text-change', () => {
                    let html = this.$refs.editor.children[0].innerHTML
                    if (html === '<p><br></p>') html = ''
                    this.newValue = html
                    this.$emit('input', this.newValue)
                    this.$emit('change', {
                        html: this.newValue,
                        text: this.quill.getText()
                    })
                })
            },
            addQuillTitle() {
                const titleConfig = {
                    'ql-bold': '加粗',
                    'ql-color': '顏色',
                    'ql-font': '字體',
                    'ql-code': '插入代碼',
                    'ql-italic': '斜體',
                    'ql-link': '添加鏈接',
                    'ql-background': '背景顏色',
                    'ql-size': '字體大小',
                    'ql-strike': '刪除線',
                    'ql-script': '上標/下標',
                    'ql-underline': '下划線',
                    'ql-blockquote': '引用',
                    'ql-header': '標題',
                    'ql-indent': '縮進',
                    'ql-list': '列表',
                    'ql-align': '文本對齊',
                    'ql-direction': '文本方向',
                    'ql-code-block': '代碼塊',
                    'ql-formula': '公式',
                    'ql-image': '圖片',
                    'ql-video': '視頻',
                    'ql-clean': '清除字體樣式'
                }
                let oToolBar = document.querySelector('.ql-toolbar')
                if (!oToolBar) {
                    return
                }
                let aButton = oToolBar.querySelectorAll('button')
                let aSelect = oToolBar.querySelectorAll('select')
                aButton.forEach(function (item) {
                    if (item.className === 'ql-script') {
                        item.value === 'sub' ? item.title = '下標' : item.title = '上標'
                    } else if (item.className === 'ql-indent') {
                        item.value === '+1' ? item.title = '向右縮進' : item.title = '向左縮進'
                    } else {
                        item.title = titleConfig[item.classList[0]]
                    }
                })
                aSelect.forEach(function (item) {
                    item.parentNode.title = titleConfig[item.classList[0]]
                })
            }
        },
        mounted() {
            this.init()
        },
        beforeDestroy() {
            this.quill = null
            delete this.quill
        },
        data() {
            return {
                quill: null,
                newValue: null,
                finalStyle: {}
            }
        },
    }
</script>
<style>
    .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-tooltip[data-mode="video"]::before {
        content: "請輸入視頻地址:";
    }

    .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: "標題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: "標題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: "標題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: "標題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: "標題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: "標題6";
    }

    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
        content: "宋體";
    }

    .ql-font-SimSun {
        font-family: "SimSun";
    }

    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
        content: "黑體";
    }


    .ql-font-SimHei {
        font-family: "SimHei";
    }

    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
        content: "微軟雅黑";
    }

    .ql-font-Microsoft-YaHei {
        font-family: "Microsoft YaHei";
    }

    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
        content: "楷體";
    }

    .ql-font-KaiTi {
        font-family: "KaiTi";
    }

    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
        content: "仿宋";
    }

    .ql-font-FangSong {
        font-family: "FangSong";
    }
</style>

 圖片的拖拽引用，和拖拽更改圖片大小方法

需要引入新的依賴

npm install quill-image-drop-module --save
npm install quill-image-resize-module --save

需要引入吧依賴在項目中引入

//quill圖片可拖拽上傳
    import { ImageDrop } from 'quill-image-drop-module';
    
    Quill.register('modules/imageDrop', ImageDrop);
    //quill圖片可拖拽改變大小
    import ImageResize from 'quill-image-resize-module'
    
    Quill.register('modules/imageResize', ImageResize)

在參數中也需要引入參數

data() {
            return {
                quill: null,
                newValue: null,
                finalStyle: {},
                editorOption:{
                  modules:{
                    imageDrop:true, 
                    imageResize: {} 
                  },
                 
                 theme:'snow'
                }
            }
        },

在上面的案例項目中添加的位置