想请教一下,我第一次在vue3中使用富文本编辑器quill遇到了一个问题,从数据库读取的数据,在页面点击后,富文本编辑器的文本框只能显示第一次点击的数据,之后点击其他按钮来更换文本框的内容就显示不了对应的数据了,只显示第一次的数据,有朋友能指点指点吗?
这是vuecli的package.json添加的依赖
"@vueup/vue-quill": "alpha"
vue3中的相关代码
<el-table :data="objs" border="true" style="width: 100%">
<el-table-column fixed prop="id" label="ID" width="80" />
<el-table-column prop="name" label="公告标题" width="480" />
<el-table-column prop="time" label="创建时间" width="440" />
<el-table-column fixed="right" label="操作" width="120">
<template #default="scope">
<el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑el-button>
<el-button link type="primary" size="small" @click="handleDelete(scope.row)">删除el-button>
template>
el-table-column>
el-table>
<el-dialog v-model="dialogVisible" title="请填写信息" width="50%">
<el-form :model="form" label-width="120px">
<el-input type="hidden" id="modal-id" name="modal-id" v-model="entity.id" />
<el-form-item label="公告标题">
<el-input style="width: 650px" v-model="entity.name" />
el-form-item>
<QuillEditor id="editorId" ref="myQuillEditor" v-model:content="content" theme="snow" contentType="html"
:options="options" />
el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消el-button>
<el-button type="primary" @click="save">保存el-button>
span>
template>
el-dialog>
运行结果:
页面刷新后,点击测试五后弹出的界面及文本框内容是对的,因为每次刷新后的第一次点击都是能显示对应的内容的,再点其他的编辑就不行了,比如再点击测试的编辑,如下:
下面文本框里原本应该显示的结果是“测试”
用alert方法看过,后端返回的数据是没有问题的,就是前端的富文本编辑器只能显示第一次赋值的值,之后就无法改变了,从前端保存数据也是没问题的,然后就不懂怎么回事了,求解。
监听富文本内容赋值