title: How load html content into Quill wysiwyg editor? Vue 3
body: <p>I want to use <code>@vueup/vue-quill ^1.0.0-beta.7</code> on my control panel admin based on <code>vue ^3.2.29</code>.</p>
  <p>Unfortunately, I noticed that loading HTML content is not working for me. Quill converts <code>&lt;div&gt;</code> tags to <code>&lt;p&gt;</code> tags for me, also removing classy and css styles, which destroys the appearance of the content. On backand i use Laravel.</p>
  <p>Can anyone help me with this? I sit on it all day to no avail.</p>
  <pre><code>&lt;template&gt;
  // [...]
   &lt;QuillEditor
         ref=&quot;mainContent&quot;
         v-model:content=&quot;form.content&quot;
         style=&quot;min-height: 300px&quot;
         :options=&quot;editorOptions&quot;
         theme=&quot;snow&quot;
         content-type=&quot;html&quot;
         output=&quot;html&quot;
         @text-change=&quot;countMainContent&quot;
  /&gt;
  // [...]
  &lt;/template&gt;
  &lt;script&gt;
  import { QuillEditor, Quill } from &quot;@vueup/vue-quill&quot;;
  import &quot;@vueup/vue-quill/dist/vue-quill.snow.css&quot;;
  import BlotFormatter from &quot;quill-blot-formatter&quot;;
  import QuillImageDropAndPaste, { ImageData } from &quot;quill-image-drop-and-paste&quot;;
  import ArticleCategoryField from &quot;../forms/ArticleCategoryField.vue&quot;;
  import htmlEditButton from &quot;quill-html-edit-button&quot;;
  import useVuelidate from &quot;@vuelidate/core&quot;;
  import { required } from &quot;../../utils/i18n-validators&quot;;
  Quill.register({
      &quot;modules/blotFormatter&quot;: BlotFormatter,
      &quot;modules/htmlEditButton&quot;: htmlEditButton,
      &quot;modules/imageDropAndPaste&quot;: QuillImageDropAndPaste,
  });
  
  // [...]
   data() {
          return {
  // [...]
  editorOptions: {
                  handlers: {
                      // handlers object will be merged with default handlers object
                      link: function (value) {
                          if (value) {
                              var href = prompt(&quot;Enter the URL&quot;);
                              this.quill.format(&quot;link&quot;, href);
                          } else {
                              this.quill.format(&quot;link&quot;, false);
                          }
                      },
                  },
                  modules: {
                      toolbar: [
                          [&quot;bold&quot;, &quot;italic&quot;, &quot;underline&quot;, &quot;strike&quot;], // toggled buttons
                          [&quot;blockquote&quot;, &quot;code-block&quot;],
  
                          [{ header: 1 }, { header: 2 }], // custom button values
                          [{ list: &quot;ordered&quot; }, { list: &quot;bullet&quot; }],
                          [{ script: &quot;sub&quot; }, { script: &quot;super&quot; }], // superscript/subscript
                          [{ indent: &quot;-1&quot; }, { indent: &quot;+1&quot; }], // outdent/indent
                          [{ direction: &quot;rtl&quot; }], // text direction
  
                          [{ size: [&quot;small&quot;, false, &quot;large&quot;, &quot;huge&quot;] }], // custom dropdown
                          [{ header: [1, 2, 3, 4, 5, 6, false] }],
  
                          [{ color: [] }, { background: [] }], // dropdown with defaults from theme
                          [{ font: [] }],
                          [{ align: [] }],
                          [&quot;image&quot;, &quot;link&quot;, &quot;video&quot;],
  
                          [&quot;clean&quot;], // remove formatting button
                      ],
                      blotFormatter: {},
                      htmlEditButton: {
                          debug: false,
                          msg: &quot;Edytuj zawartość przy pomocy HTML&quot;,
                          cancelText: &quot;Anuluj&quot;,
                          buttonTitle: &quot;Pokaż kod źródłowy HTML&quot;,
                      },
                      imageDropAndPaste: {
                          handler: this.imageHandler,
                      },
                  },
              },
  // [...]
  }
  }
  // [...]
  methods: {
  getArticle() {
              if (this.articleId) {
                  this.$axios
                      .get(&quot;article/&quot; + this.articleId, {
                          headers: {
                              Accept: &quot;application/json&quot;,
                              Authorization: `Bearer ${this.$store.state.auth.token}`,
                          },
                      })
                      .then((response) =&gt; {
                          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) =&gt; {
                          if (process.env.MIX_APP_DEBUG)
                              this.$toast.error(error.message);
                          throw new Error(error);
                      });
              }
          },
  // [...]
  </code></pre>