如何解决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)
}
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。