javascript - 如何将 html 内容加载到 Quill 所见即所得编辑器中？

Question

我想使用 @vueup/vue-quill ^1.0.0-beta.7在我的控制面板管理员上基于 vue ^3.2.29 .

不幸的是，我注意到加载 HTML 内容对我不起作用。羽毛笔转换 <div>标记为 <p>标签对我来说，还删除了 classy 和 css 样式，这破坏了内容的外观。在后面，我使用 Laravel。

谁能帮我解决这个问题？我坐了一整天都无济于事。

<template>
// [...]
 <QuillEditor
       ref="mainContent"
       v-model:content="form.content"
       style="min-height: 300px"
       :options="editorOptions"
       theme="snow"
       content-type="html"
       output="html"
       @text-change="countMainContent"
/>
// [...]
</template>
<script>
import { QuillEditor, Quill } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import BlotFormatter from "quill-blot-formatter";
import QuillImageDropAndPaste, { ImageData } from "quill-image-drop-and-paste";
import ArticleCategoryField from "../forms/ArticleCategoryField.vue";
import htmlEditButton from "quill-html-edit-button";
import useVuelidate from "@vuelidate/core";
import { required } from "../../utils/i18n-validators";
Quill.register({
    "modules/blotFormatter": BlotFormatter,
    "modules/htmlEditButton": htmlEditButton,
    "modules/imageDropAndPaste": QuillImageDropAndPaste,
});

// [...]
 data() {
        return {
// [...]
editorOptions: {
                handlers: {
                    // handlers object will be merged with default handlers object
                    link: function (value) {
                        if (value) {
                            var href = prompt("Enter the URL");
                            this.quill.format("link", href);
                        } else {
                            this.quill.format("link", false);
                        }
                    },
                },
                modules: {
                    toolbar: [
                        ["bold", "italic", "underline", "strike"], // toggled buttons
                        ["blockquote", "code-block"],

                        [{ header: 1 }, { header: 2 }], // custom button values
                        [{ list: "ordered" }, { list: "bullet" }],
                        [{ script: "sub" }, { script: "super" }], // superscript/subscript
                        [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
                        [{ direction: "rtl" }], // text direction

                        [{ size: ["small", false, "large", "huge"] }], // custom dropdown
                        [{ header: [1, 2, 3, 4, 5, 6, false] }],

                        [{ color: [] }, { background: [] }], // dropdown with defaults from theme
                        [{ font: [] }],
                        [{ align: [] }],
                        ["image", "link", "video"],

                        ["clean"], // remove formatting button
                    ],
                    blotFormatter: {},
                    htmlEditButton: {
                        debug: false,
                        msg: "Edytuj zawartość przy pomocy HTML",
                        cancelText: "Anuluj",
                        buttonTitle: "Pokaż kod źródłowy HTML",
                    },
                    imageDropAndPaste: {
                        handler: this.imageHandler,
                    },
                },
            },
// [...]
}
}
// [...]
methods: {
getArticle() {
            if (this.articleId) {
                this.$axios
                    .get("article/" + this.articleId, {
                        headers: {
                            Accept: "application/json",
                            Authorization: `Bearer ${this.$store.state.auth.token}`,
                        },
                    })
                    .then((response) => {
                        this.form.title = response.data.article.title;
                        this.form.mainImage =
                            response.data.article.uploaded_file_id;
                        this.form.category =
                            response.data.article.categories[0].id ?? 0;
                  
                        this.$refs.mainContent.pasteHTML(
                            response.data.article.content
                        );
                        this.form.articleGallery = this.prepareGallery(
                            response.data.article.images
                        );
                    })
                    .catch((error) => {
                        if (process.env.MIX_APP_DEBUG)
                            this.$toast.error(error.message);
                        throw new Error(error);
                    });
            }
        },
// [...]

Answer 1

我知道有点晚了。但是发布这个是为了帮助那些访问这个问题的人。我有同样的问题。当我尝试在编辑页面上加载内容以使用 @vueup/vue-quill 编辑器时，出现了一些问题。我可以使用 setContents()、setHTML() 等加载 delta、html 和纯文本，但在那之后，问题是当我尝试在同一个编辑器 js 中键入时发生错误。我找到的唯一解决方案是自己实现羽毛笔。分享我的经验以帮助他人。

//do bootstrap if needed
// import './bootstrap';
import { createApp } from 'vue';
import { watch, ref, nextTick } from 'vue'
import axios from 'axios';
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.bubble.css";
import "quill/dist/quill.snow.css";


createApp({
  data() {
    return {
      mainContentEditor: null,
      mainContentEditorValue: '',
    }
  },
  mounted() {
    this.initMainContentEditor();
    //call this to get article on load
    this.getArticle();
  },
  methods: {
    //initiate the main content editor
    initMainContentEditor() {
      var _this = this;
      this.mainContentEditor = new Quill(this.$refs.mainContentEditor, {
        modules: {
          toolbar: [
            [
              {
                header: [1, 2, 3, 4, false],
              },
            ],
            ["bold", "italic", "underline", "link"],
          ],
        },
        //theme: 'bubble',
        theme: "snow",
        formats: ["bold", "underline", "header", "italic", "link"],
        placeholder: "Type something in here!",
      });
      //register the event handler
      this.mainContentEditor.on("text-change", function () {
        _this.mainContentEditorChanged();
      });
    },
    //this method is called when the editor changes its value
    mainContentEditorChanged() {
      console.log("main content changed!");
      //   do somethign with it like assign it to mainContentEditorValue
      this.mainContentEditorValue = this.mainContentEditor.root.innerHTML;
    },
    getArticle() {
      //do the api call to get the article response.
      //once you get the respose
      // assign the html content to quill editor
      // check getArticle() method on question to fill this part
      //replace 
          //       this.$refs.mainContent.pasteHTML(
          //     response.data.article.content
          // );
      // with this
      this.mainContentEditor.root.innerHTML = response.data.article.content;
    }
  }
}).mount('#app')

html/模板

<div id="app">
    <div ref="mainContentEditor"></div>
</div>

你可以把它做成一个组件并重用它。我分享它只是为了展示一个有效的实现。