首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何在Vue3中在Quill文本编辑器中显示默认值

如何在Vue3中在Quill文本编辑器中显示默认值
EN

Stack Overflow用户
提问于 2022-06-06 19:45:23
回答 1查看 1K关注 0票数 2

正如您在图片中所看到的,我有一个带有Quill的文本编辑器。这是我的项目中的管理面板,当我在我的文本编辑器中写一些东西并想要显示它时,它工作得很好。例如,如果我想用粗体写一个描述,它会像下面这样写到前端:

描述

我可以用下面的代码来显示:

代码语言:javascript
代码运行次数:0
运行
复制
<div v-html="product.attributes.description"></div>

但我的问题是,我想在y文本编辑器中显示这个值。因此,我想在我的文本编辑器中显示大胆的书面“描述”,而不是未定义的,但我想不出如何用Quill文本编辑器来实现它。以下是我的文本编辑器组件:

代码语言:javascript
代码运行次数:0
运行
复制
<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>
EN

回答 1

Stack Overflow用户

发布于 2022-06-17 02:48:10

如果我正确理解了你的问题,你想设置编辑的价值吗?

如果是这样的话,我也遇到了同样的问题,并且能够使用以下答案来解决:How to use v-model in quill editor

代码语言:javascript
代码运行次数:0
运行
复制
<quill-editor v-model:content="modelname" contentType="html" />

然后,您可以使用'modelname‘属性设置和检索编辑器内容。希望能帮上忙!

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/72522763

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档