如图所示,我有一个带有 Quill 的文本编辑器。这是我项目中的管理面板,当我在我的文本编辑器中写一些东西并想显示它时,它工作正常。例如,如果我想用粗体写一个描述,它会像这样进入前端:
Description
我可以用这个代码显示它:<div v-html="product.attributes.description"></div>
但我的问题是我想在 y 文本编辑器中显示这个值。所以我想在我的文本编辑器中显示粗体的“描述”而不是未定义的,但我不知道如何使用 Quill 文本编辑器来实现。这是我的文本编辑器组件:
<template>
<div class="form-control" v-bind:class="inputClasses" ref="editor"></div>
</template>
<script>
import Quill from 'quill';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.bubble.css';
import 'quill/dist/quill.snow.css';
export default {
props: {
modelValue: { type: String, default: '' },
defaultValue: "",
},
data() {
return {
editor: null,
};
},
mounted() {
var _this = this;
this.editor = new Quill(this.$refs.editor, {
modules: {
toolbar: [
[{ header: [1, 2, 3, 4, false]} ],
["bold", "italic", "underline", "link", "image"],
],
},
theme: "snow",
formats: ["bold", "underline", "header", "italic", "link"],
placeholder: this.placeholder
});
this.editor.root.innerHTML = this.defaultValue;
this.editor.on("text-change", function () {
return _this.update();
});
},
methods: {
update: function update() {
this.$emit(
"update:modelValue",
this.editor.getText() ? this.editor.root.innerHTML : ""
);
},
},
}
</script>
如果我正确理解你的问题,你想设置编辑器的值?
如果是这样,我遇到了同样的问题并且能够使用这个答案解决:How to use v-model in quill editor
<quill-editor v-model:content="modelname" contentType="html" />
然后您可以使用“modelname”属性设置和检索编辑器内容。希望对您有所帮助!
当
undefined
.时,我是如何摆脱contentType='html'
值的
<QuillEditor theme="snow" ref="quill" v-model:content="modelName" contentType="html" placeholder="Type job description here..." style="height: 300px"/>
mounted() {
this.$refs.quill.setContents('')
}
为 quill-vue 设置默认值,像这样使用 根据这个link
<QuillEditor class="pb-8 pr-6 w-full" contentType="html" v-model:content="form.content" theme="snow" />