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

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