Quill Delta SSR 与 JSDOM

问题描述

我尝试在 Node.js 上将 quill Deltas 呈现为 HTML，我有以下代码段，但此 .env() 语法在最新的 JSDOM 中已弃用。

var jsdom = require("jsdom");

jsdom.env({
    html: '<div id="editor-container"></div>',scripts: [
        'https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/MutationObserver.js','https://cdn.quilljs.com/1.0.4/quill.js'],onload: function (window) {
        var document = window.document;
        // fake getSelection
        // https://github.com/tmpvar/jsdom/issues/317
        document.getSelection = function() { 
            return { 
                getRangeAt: function() {}
            };
        }; 

        var container = window.document.getElementById("editor-container");
        var quill = new window.quill(container,{});

        var delta = {
          ops: [
            { insert: 'Gandalf',attributes: { bold: true } },{ insert: ' the ' },{ insert: 'Grey',attributes: { color: '#ccc' } }
          ]
        };
        quill.setContents(delta);

        console.log(document.querySelector(".ql-editor").innerHTML);
    }
});

文档不是很清楚，我坚持使用 quill 链接渲染脚本标记。我怎么能用 JSOM v16+ 重写它？

解决方法

import {JSDOM} from "jsdom";

const QUILL_VERSION = '1.3.7'

export function renderDelta(delta) {
  const { window } = new JSDOM(`<div id="editor-container"></div>`,{
    runScripts: "dangerously",resources: "usable"
  })
  const container = window.document.getElementById("editor-container");
  const script = window.document.createElement("script");
  script.src = `https://cdn.quilljs.com/${QUILL_VERSION}/quill.js`;
  window.document.head.appendChild(script);

  return new Promise((resolve,reject) => {
    script.onload = async () => {
      const quill = new window.Quill(container,{});
      quill.setContents({ops: JSON.parse(delta)});
      resolve(window.document.querySelector(".ql-editor").innerHTML)
    }
  });
}