How load html content into Quill wysiwyg editor?

Question

I want to use @vueup/vue-quill ^1.0.0-beta.7 on my control panel admin based on vue ^3.2.29.

Unfortunately, I noticed that loading HTML content is not working for me. Quill converts <div> tags to <p> tags for me, also removing classy and css styles, which destroys the appearance of the content. On backand i use Laravel.

Can anyone help me with this? I sit on it all day to no avail.

<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);
                    });
            }
        },
// [...]

any luck? Im having the same issue – OverMars Jul 13 '22 at 23:09 — OverMars, Jul 13 '22 at 23:09

aimme · Answer 1 · 2022-10-20T08:27:15.407

I know its bit late. But posting this to help those who visit this question. I had the same problem. When i tried to load contents into use @vueup/vue-quill editor on the edit page, there were complications. I could load delta, html and plain text using setContents(),setHTML() etc, but after that the problem was that when i tried to type inside the same editor js errors occur. The only solution i found was to implement the quill on own. Sharing my experience to help others.

//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/template

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

You can make it to a component and reuse it. I shared it to just show a working implementation.

How load html content into Quill wysiwyg editor?

1 Answers1