将 Quill Delta 转换为 HTML答案

【问题标题】：Convert Quill Delta to HTML将 Quill Delta 转换为 HTML
【发布时间】：2021-11-15 01:01:11
【问题描述】：

如何将 Delta 转换为纯 HTML？我使用 Quill 作为富文本编辑器，但我不确定如何在 HTML 上下文中显示现有的 Delta。创建多个 Quill 实例是不合理的，但我想不出更好的办法。

我进行了研究，但没有找到任何方法。

【问题讨论】：

这似乎工作得很好：github.com/nozer/quill-delta-to-html

标签： quill

【解决方案1】：

不是很优雅，但我必须这样做。

function quillGetHTML(inputDelta) {
    var tempCont = document.createElement("div");
    (new Quill(tempCont)).setContents(inputDelta);
    return tempCont.getElementsByClassName("ql-editor")[0].innerHTML;
}

显然这需要 quill.js。

【讨论】：

如果之前未对 delta 进行清理，它很容易受到 XSS 攻击。
非常感谢！
天才！！谢谢

【解决方案2】：

我猜你想要其中的 HTML。它相当简单。

quill.root.innerHTML

【讨论】：

【解决方案3】：

如果我对您的理解正确，这里有一个讨论帖here，其中包含您所追求的关键信息。

我在下面引用了对您最有价值的内容：

Quill 一直将 Delta 用作更一致且更易于使用（无需解析）数据结构。 Quill 没有理由重新实现 DOM API 除此之外。 quill.root.innerHTML 或 document.querySelector(".ql-editor").innerHTML 工作得很好（quill.container.firstChild.innerHTML 有点脆弱，因为它取决于子排序），而之前的 getHTML 实现仅此而已。

【讨论】：

【解决方案4】：

很简单，解决方法在这里： https://www.scalablepath.com/blog/using-quill-js-build-wysiwyg-editor-website/

主要代码是：

console.log(quill.root.innerHTML);

【讨论】：

【解决方案5】：

我已经在后端使用 php 完成了它。我的输入是 json 编码的增量，我的输出是 html 字符串。代码如下

function formatAnswer($answer){
    $formattedAnswer = '';
    $answer = json_decode($answer,true);
    foreach($answer['ops'] as $key=>$element){
        if(empty($element['insert']['image'])){
            $result = $element['insert'];
            if(!empty($element['attributes'])){
                foreach($element['attributes'] as $key=>$attribute){
                    $result = operate($result,$key,$attribute);
                }
            }
        }else{ 
            $image = $element['insert']['image'];
            // if you are getting the image as url
            if(strpos($image,'http://') !== false || strpos($image,'https://') !== false){
                $result = "<img src='".$image."' />";
            }else{
                //if the image is uploaded 
                //saving the image somewhere and replacing it with its url
                $imageUrl = getImageUrl($image);
                $result = "<img src='".$imageUrl."' />";
            }
        }
        $formattedAnswer = $formattedAnswer.$result;
    }
    return nl2br($formattedAnswer);
}

function operate($text,$ops,$attribute){
    $operatedText = null;
    switch($ops){
        case 'bold': 
        $operatedText = '<strong>'.$text.'</strong>';
        break;
        case 'italic':
        $operatedText = '<i>'.$text.'</i>';
        break;
        case 'strike':
        $operatedText = '<s>'.$text.'</s>';
        break;
        case 'underline':
        $operatedText = '<u>'.$text.'</u>';
        break;
        case 'link':
        $operatedText = '<a href="'.$attribute.'" target="blank">'.$text.'</a>';
        break;
        default:
        $operatedText = $text;
    }
    return $operatedText;
}

【讨论】：

【解决方案6】：

这是一个使用 quill.root.innerHTML 的完整函数，因为其他函数并没有完全涵盖它的完整用法：

function quillGetHTML(inputDelta) {
        var tempQuill=new Quill(document.createElement("div"));
        tempQuill.setContents(inputDelta);
        return tempQuill.root.innerHTML;
    }

这只是 km6 的答案略有不同。

【讨论】：

【解决方案7】：

当涉及到 Quilljs 时，这是一个非常常见的混淆。问题是你不应该仅仅为了显示它而检索你的 html。您应该像在编辑器中一样渲染和显示您的 Quill 容器。这是 Quilljs 的主要优势之一，您唯一需要做的就是：

$conf.readOnly = true;

这将删除工具栏并使内容不可编辑。

【讨论】：

【解决方案8】：

对于 Quill 版本 1.3.6，只需使用：

quill.root.innerHTML;

在线试用：https://jsfiddle.net/Imabot/86dtuhap/
详细解释我的blog
这个链接如果你有to post the Quill HTML content in a form

【讨论】：

我知道这是获取 html 的最简单方法。问题是，quill 使用自己的样式（即 ql-align-center 使文本居中）。如果我们想在任何环境中使用保存的 html，我们必须在这个 html 中添加包含。像这样：<link href="//cdn.quilljs.com/1.3.6/quill.core.css" rel="stylesheet"><div class="ql-editor">[the html result]</div> 这样无论任何人在哪里打开 html，它都会得到正确的样式。

【解决方案9】：

quill 对象上的 quill.root.innerHTML 完美运行。

 $scope.setTerm = function (form) {
                var contents = JSON.stringify(quill.root.innerHTML)
                $("#note").val(contents)
                $scope.main.submitFrm(form)
            }

【讨论】：

【解决方案10】：

我整理了一个节点包来将 html 或纯文本与 Quill Delta 相互转换。

我的团队使用它来更新我们的数据模型，以包括 Quill 的 Delta 和 HTML。这允许我们在没有 Quill 实例的情况下在客户端上进行渲染。

见node-quill-converter。

它具有以下功能： - 转换TextToDelta - 转换HtmlToDelta - 转换DeltaToHtml

在幕后它使用了一个 JSDOM 实例。这可能使其最适合迁移脚本，因为尚未在典型的应用请求生命周期中测试性能。

【讨论】：

【解决方案11】：

试试

console.log ( $('.ql-editor').html() );

【讨论】：

【解决方案12】：

这就是我的做法，为你们 Express 的人们。它似乎与 express-sanitizer 结合使用效果很好。

app.js

 import expressSanitizer from 'express-sanitizer'

 app.use(expressSanitizer())

 app.post('/route', async (req, res) => {
     const title = req.body.article.title
     const content = req.sanitize(req.body.article.content)
     // Do stuff with content
 })

new.ejs

 <head>
     <link href="https://cdn.quilljs.com/1.3.2/quill.snow.css" rel="stylesheet">
 </head>

 ...

 <form action="/route" method="POST">
     <input type="text" name="article[title]" placeholder="Enter Title">
     <div id="editor"></div>
     <input type="submit" onclick="return quillContents()" />
 </form>

 ...

 <script src="https://cdn.quilljs.com/1.3.2/quill.js"></script>
 <script>
     const quill = new Quill('#editor', {
         theme: 'snow'
     })

     const quillContents = () => {
         const form = document.forms[0]
         const editor = document.createElement('input')

         editor.type = 'hidden'
         editor.name = 'article[content]'
         editor.value = document.querySelector('.ql-editor').innerHTML
         form.appendChild(editor)

         return form.submit()
     }
</script>

express-sanitizer (https://www.npmjs.com/package/express-sanitizer)

document.forms (https://developer.mozilla.org/en-US/docs/Web/API/Document/forms)

我的视图只有一个表单，所以我使用了document.forms[0]，但如果您有多个或将来可能扩展您的视图以拥有多个表单，请查看 MDN 参考。

我们在这里所做的是创建一个隐藏的表单输入，我们将其分配给 Quill Div 的内容，然后我们盗版表单提交并将其传递给我们的函数以完成它。

现在，要对其进行测试，请在其中发布带有<script>alert()</script> 的帖子，您不必担心注入漏洞。

仅此而已。

【讨论】：

【解决方案13】：

这是一个正确的方法。

var QuillDeltaToHtmlConverter = require('quill-delta-to-html').QuillDeltaToHtmlConverter;

// TypeScript / ES6:
// import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html'; 

var deltaOps =  [
    {insert: "Hello\n"},
    {insert: "This is colorful", attributes: {color: '#f00'}}
];

var cfg = {};

var converter = new QuillDeltaToHtmlConverter(deltaOps, cfg);

var html = converter.convert();

参考https://github.com/nozer/quill-delta-to-html

【讨论】：

【解决方案14】：

对于允许获取和设置 Quill 值的 jQuery 样式解决方案，我正在执行以下操作：

Quill.prototype.val = function(newVal) {
  if (newVal) {
    this.container.querySelector('.ql-editor').innerHTML = newVal;
  } else {
    return this.container.querySelector('.ql-editor').innerHTML;
  }
};


let editor = new Quill( ... );

//set the value    
editor.val('<h3>My new editor value</h3>');

//get the value
let theValue = editor.val();

【讨论】：

【解决方案15】：

quill-render 看起来就是你想要的。来自文档：

var render = require('quill-render');
render([
    {
        "attributes": {
            "bold": true
        },
        "insert": "Hi mom"
    }
]);
// => '<b>Hi mom</b>'

【讨论】：

这是另一个：quilljs-renderer。我真的希望 Quill 内置此功能。例如，如果 Delta 的规格发生变化，第三方库可能很脆弱。
我需要一些不需要 Node 或任何东西的东西，只需要 vanillaJS。 AFAIK Quill 曾经拥有它，但在 v1.0 中被删除。
你说的 Node 是指 NPM？

【解决方案16】：

如果你想使用 nodejs 渲染 quill，有一个基于 jsdom 的非常简单的包，用于渲染背面（只有一个文件，18 天后最后一次更新）render quill delta to html string on server

【讨论】：

鼓励链接到外部资源，但请在链接周围添加上下文，以便您的其他用户了解它是什么以及为什么存在。始终引用重要链接中最相关的部分，以防目标站点无法访问或永久离线。

【解决方案17】：

只需使用这个干净的库将 delta 从/转换为 text/html

node-quill-converter

示例：

const { convertDeltaToHtml } = require('node-quill-converter');

let html = convertDeltaToHtml(delta);

console.log(html) ; // '<p>hello, <strong>world</strong></p>'

【讨论】：