带有 JSDOM 的 Quill Delta SSR答案

【问题标题】：Quill Delta SSR with JSDOM带有 JSDOM 的 Quill Delta SSR
【发布时间】：2021-06-06 16:36:34
【问题描述】：

我尝试在 Node.js 上将 Quill Deltas 呈现为 HTML，我有以下 sn-p，但这种 .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+ 重写它？

【问题讨论】：

标签： javascript node.js server-side-rendering quill jsdom

【解决方案1】：

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)
    }
  });
}

【讨论】：