0

问题描述

使用了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就没有这种问题。

agentwx 340
2019-04-10 提问
4 个回答
0

已采纳

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

 <quill-editor ref="editor" v-model="content"
                  :options="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @ready="onEditorReady($event)">
 content: '<h2>请为你的详细介绍吧</h2>',
1
回复 agentwx

在ext-quill里用orop拿form.pbody的值

fuqihan · 4月11日

展开评论
0

用v-bind:value赋值试一下

0

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

0

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

撰写答案

推广链接