Блог

Я использую пакет npm QuillJS-renderer и передаю ему дельту Quill из базы данных.

 const postRender = require('quilljs-renderer');

const { Document } = postRender;
postRender.loadFormat('html');
 

Я извлекаю данные из firestore здесь:

   async fetch() {
    await this.$store.dispatch('getPost', this.$route.params.id);
  },
 

Затем я обновляю DOM с помощью метода renderPost:

   updated() {
    this.renderPost(this.post);
  },
 

 renderPost(post) {
      const delta = JSON.parse(post.quillDELTA);
      const doc = new Document(delta);
      try {
        console.log(doc.convertTo('html'));
        this.article = doc.convertTo('html');
      } catch (e) {
        console.info(e.message);
      }
    },
 

Метод renderPost выдает ошибку doc.convertTo('html'); с ошибкой:

 TypeError: op.insert.indexOf is not a function
    at lineTypeConvert (document.js?c22f:114)
    at exports.Document.Document.convertTo (document.js?c22f:66)
    at VueComponent.renderPost (index.vue?dab4:323)
    at VueComponent.updated (index.vue?dab4:308)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
    at callUpdatedHooks (vue.runtime.esm.js?2b0e:4351)
    at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4336)
    at Array.eval (vue.runtime.esm.js?2b0e:1980)
    at flushCallbacks (vue.runtime.esm.js?2b0e:1906)
 

Есть идеи о том, что может происходить?

Мне пришлось изменить quills-renderer на quill-delta-to-html, который мог отображать дельту quill, в которой были встроенные изображения.