如何修复 Nuxt quilljs-renderer 返回 op.insert.indexOf 不是一个函数？

Question

我正在使用 QuillJS-renderer npm 包并从数据库中将 Quill Delta 传递给它。

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

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

我在这里从 firestore 获取数据：

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

然后我使用 renderPost 方法更新 DOM：

  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)

对可能发生的事情有什么想法吗？

Answer 1

我必须更改 quills-renderer to quill-delta-to-html，它能够渲染具有内联图像的 quill delta。

如何修复 Nuxt quilljs-renderer 返回 op.insert.indexOf 不是一个函数？

How to fix Nuxt quilljs-renderer returning op.insert.indexOf is not a function?

quill

nuxt.js