vue-quill-editor在赋值的时候的问题

Question

问题描述

使用了vue-quill-editor组件，在新建内容时，提交都没有问题。
在修改内容时，将原本的内容通过v-model绑定到vue-quill-editor时，发现没有效果
vue-quill-editor里面显示的内容始终为空。

ext-quill.vue内容

<template>
  <div class="quill-wrap">
    <quill-editor ref="myQuillEditor" :options="editorOption" @change="onChange" v-model="content" style="height:550px"></quill-editor>
  </div>
</template>
<script>
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";
import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
import GLOBAL from '@/libs/global_variable'
Quill.register("modules/ImageExtend", ImageExtend);
export default {
  name: "ext-quill",
  components: { quillEditor },
  data() {
    return {
      content: "",
      // 富文本框参数设置
      editorOption: {
        modules: {
          ImageExtend: {
            loading: true, // 可选参数 是否显示上传进度和提示语
            name: "file", // 图片参数名
            size: 10, // 可选参数 图片大小，单位为M，1M = 1024kb
            //如果action为空，则采用base64插入图片
            action: GLOBAL.FILE_SERVICE, // 服务器地址, 如果action为空，则采用base64插入图片
            // response 为一个函数用来获取服务器返回的具体图片地址
            // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
            // 则 return res.data.url
            response: res => {
              return GLOBAL.FILE_SERVER+"/static/images/"+res.data.filename;
            },
            headers: xhr => {}, // 可选参数 设置请求头部
            start: () => {}, // 可选参数 自定义开始上传触发事件
            end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
            error: () => {}, // 可选参数 自定义网络错误触发的事件
            change: (xhr, formData) => {} // 可选参数 选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
          },
          toolbar: {
            container: container, // container为工具栏，此次引入了全部工具栏，也可自行配置
            handlers: {
              image: function() {
                // 劫持原来的图片点击按钮事件
                QuillWatch.emit(this.quill.id);
              }
            }
          }
        },
        placeholder: '书写你的内容',
        readOnly: false
      }
    };
  },
  methods:{
      onChange() {
        this.$emit('input', this.content)
      }
  }

};
</script>

引用的地方

        <template>
            <el-form-item prop="content">
                <ext-quill
                    style="width:100%;height:600px;min-height: 600px; margin-bottom: 20px;"
                    v-model="form.pbody"
                />
            </el-form-item>
        </template>

在这种情况下， v-model赋值无效嘛？但是其他的基础组件el-input就没有这种问题。

Answer 1

正常是没什么问题啊，你在补充点东西啊，这样看不出来的

 <quill-editor ref="editor" v-model="content"
                  :options="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @ready="onEditorReady($event)">

 content: '<h2>请为你的详细介绍吧</h2>',

Answer 2

用v-bind:value赋值试一下

Answer 3

是不是设置了@change="onEditorChange($event)"

Answer 4

你好， 我也遇到了这个问题，请问你后来是怎么解决的呢？

Answer 5

不知道你们是怎么赋值的，我就是直接赋值到v-model就行了

// 自己封装的quillEditor.vue  html部分
 <quill-editor
      class="editorWrap"
      ref="QuillEditor"
      v-model="editorContent"
      :options="editorOption"
      @ready="onEditorReady($event)"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
    </quill-editor>
    

    //script部分
 
 data () {
      return {
        editorContent: this.propEditorContent ,
    }
}，
 
 props: {
      'propEditorContent': {
        type: String,
        default: `<p></p><p><br></p><ol></ol>`  // 富文本编辑器默认内容
      }
    },
    watch: {
      'propEditorContent': function (newVal) {
        this.editorContent = newVal
      }
    }

Answer 6

你好， 我也遇到了这个问题，请问你后来是怎么解决的呢？

Answer 7

请问解决了吗？我的是：p标签可以显示，但是img标签不能正常显示。和宇建的代码一致。