How load html content into Quill wysiwyg editor? Vue 3

Viewed 718

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