【vue】vue组件之图文编辑

悠悠 2022-10-09 06:29 224阅读 0赞

### 图文编辑组件 ###

*  1.代码
 *  2. 引用
 *  3. 页面样式

ps：使用该组件需另外安装vue-quill-editor插件

# 1.代码 #

<template>
      <div class="public-vue-quill-editor">
        <quill-editor v-model="value2" ref="myQuillEditor" :options="editorOption"></quill-editor>
        
        <public-upload-image :btnId="btnId" :show="false" @success="customerImgSuccessHandler" :limit="1000" />
      </div>
    </template>
    <script> /** * @editorOption quill-editor组件配置信息 * @value 默认值 */ import 'quill/dist/quill.snow.css' import { quillEditor } from 'vue-quill-editor' // import Delta from 'quill-delta' export default { name: 'public-vue-quill-editor', data() { return { value2: '' } }, props: { btnId: { type: String, default: 'customerUploadImageComponent' }, editorOption: { type: Object, default: () => ({ modules: { toolbar: [ [], ['image'] ] }, theme: 'snow', placeholder: '请输入内容' }) }, value: { type: String, default: '' } }, components: { quillEditor }, computed: { }, created() { }, onload() { }, onShow() { }, watch: { value2: { handler: function (newVal, oldVal) { this.$emit('liveUpdate', newVal) }, immediate: true, deep: true }, value: { handler: function (newVal, oldVal) { this.value2 = JSON.parse(JSON.stringify(newVal)) }, immediate: true, deep: true } }, mounted() { let that = this this.$refs.myQuillEditor.quill .getModule('toolbar') .addHandler('image', this.customerImgInsertHandler) this.$refs.myQuillEditor.quill.clipboard.addMatcher(Node.ELEMENT_NODE, function (node, delta) { let ops = [] delta.ops.forEach(op => { if (op.insert && typeof op.insert === 'string') { // 如果粘贴了图片，这里会是一个对象，所以可以这样处理 ops.push({ insert: op.insert }) } else { that.$message({ message: '不允许粘贴图片,请手动上传', type: 'warning' }) } }) delta.ops = ops return delta }) }, methods: { customerImgSuccessHandler(val) { if (val) { let imgarr = val.split(',') let quill = this.$refs.myQuillEditor.quill let length = quill.getSelection().index quill.insertEmbed(length, 'image', imgarr[imgarr.length - 1]) quill.setSelection(length + 1) } }, customerImgInsertHandler(state) { this.insertImg = true this.addRange = this.$refs.myQuillEditor.quill.getSelection() if (state) { document.getElementById(this.btnId).click() } } } } </script>
    <style lang="less" scoped> .public-vue-quill-editor { .quill-editor { height: 450px; } } </style>

# 2. 引用 #

<public-vue-quill-editor :value="form.details" @liveUpdate="(val)=>{form.details=val}" />

# 3. 页面样式 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3MxNDQxMTAxMjY1_size_16_color_FFFFFF_t_70]: /images/20221005/1bf48ff6dbc84834a152d055d0c7e8e3.png