SxsnPC/src/components/editor/index.vue

<template>
<div class="quill-editor">
    <el-upload class="avatar-uploaderEdi" :action="url" :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload">
    </el-upload>
    <quill-editor v-model="editorContent" class="ql-container sicepot" @change="onEditorChange($event)" :content="editorContent" :options="editorOption" ref="QuillEditor">
    </quill-editor>
</div>
</template>

<script>
import Cookies from "js-cookie";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {
    quillEditor,
    Quill
} from 'vue-quill-editor'
const undoIcon = Quill.import('ui/icons')['undo']
const redoIcon = Quill.import('ui/icons')['redo']
const toolbarOptions = [
    [{
        'undo': undoIcon
    }, {
        'redo': redoIcon
    }], // 撤销，重做
    ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
    ['blockquote', 'code-block'], //引用，代码块
    [{
        'header': 1
    }, {
        'header': 2
    }], // 几级标题
    [{
        'list': 'ordered'
    }, {
        'list': 'bullet'
    }], // 有序列表，无序列表
    [{
        'script': 'sub'
    }, {
        'script': 'super'
    }], // 下角标，上角标
    [{
        'indent': '-1'
    }, {
        'indent': '+1'
    }], // 缩进
    [{
        'direction': 'rtl'
    }], // 文字输入方向
    [{
        'size': ['small', false, 'large', 'huge']
    }], // 字体大小
    [{
        'header': [1, 2, 3, 4, 5, 6, false]
    }], // 标题
    [{
        'color': []
    }, {
        'background': []
    }], // 颜色选择
    [{
        'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial']
    }], // 字体
    [{
        'align': []
    }], // 居中
    ['clean'], // 清除样式,
    ['link', 'image'], // 上传图片、上传视频
]
export default {
    data() {
        return {
            editorContent: this.content || '',
            editorOption: {
                placeholder: '请在这里输入',
                theme: 'snow', //主题 snow/bubble
                modules: {
                    history: {
                        delay: 1000,
                        maxStack: 50,
                        userOnly: false
                    },
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            undo: function () {
                                this.quill.history.undo()
                            },
                            redo: function () {
                                this.quill.history.redo()
                            },
                            image: function (value) {
                                if (value) {
                                    // 调用element的图片上传组件
                                    document.querySelector('.avatar-uploaderEdi input').click()
                                } else {
                                    this.quill.format('image', false)
                                }
                            }
                        }
                    }
                }
            },
            url: `${
        window.SITE_CONFIG["apiURL"]
      }/sys/oss/upload?token=${Cookies.get("token")}`,
        }
    },
    props: ['content'],
    components: {
        quillEditor
    },
    watch: {
        content(newValue) {
            // 检查新值是否与当前编辑器内容不同，避免不必要的更新和光标跳动
            if (newValue !== this.editorContent) {
                this.editorContent = newValue;
            }
        }
    },
    methods: {
        // init() {
        //     this.editorContent = this.content || '';
        // },
        beforeUpload(file) {},
        // 值发生变化
        onEditorChange(editor) {
            this.$emit('EditorChange', this.editorContent);
        },
        uploadSuccess(res) {
            // 获取富文本组件实例
            let quill = this.$refs.QuillEditor.quill
            // 如果上传成功
            if (res) {
                // 获取光标所在位置
                let length = quill.getSelection().index;
                // 插入图片，res为服务器返回的图片链接地址
                quill.insertEmbed(length, 'image', res.data)
                // 调整光标到最后
                quill.setSelection(length + 1)
            } else {
                // 提示信息，需引入Message
                this.$message.error('图片插入失败！')
            }
        },

    }
}
</script>

<style>
.sicepot {
    height: auto !important;
}

.sicepot .ql-container.ql-snow {
    height: 600px !important;
}
</style>