将 Quill Delta 转换为 HTML

Question

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

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

Answer 1

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

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

Answer 2

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

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

显然这需要 quill.js。

Answer 3

我在后端使用 php 完成了它。我的输入是 json 编码的增量，我的输出是 html 字符串。这是代码，如果它对 you.This 函数有任何帮助，它仍然可以处理列表和一些其他格式，但您始终可以在操作函数中扩展它们。

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

Answer 4

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

Answer 5

如果我对你的理解是正确的，这里有一个重要的讨论话题 here，其中包含你想要的关键信息。

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

Quill has always used Deltas as a more consistent and easier to use (no parsing) data structure. There's no reason for Quill to reimplement DOM APIs in addition to this. quill.root.innerHTML or document.querySelector(".ql-editor").innerHTML works just fine (quill.container.firstChild.innerHTML is a bit more brittle as it depends on child ordering) and the previous getHTML implementation did little more than this.

Answer 6

我猜你想要里面的 HTML。相当简单。

quill.root.innerHTML

Answer 7

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

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

Answer 8

尝试

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

Answer 9

这是我为你们 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，然后我们窃取表单提交并通过我们的函数传递它以完成它。

现在，为了测试它，制作一个 post 和 <script>alert()</script> 在里面，你就不用担心注入漏洞了。

仅此而已。

Answer 10

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

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

见node-quill-converter。

具有以下功能： - convertTextToDelta - convertHtmlToDelta - convertDeltaToHtml

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

Answer 11

对于允许获取和设置 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();

Answer 12

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

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

这与 km6 的答案略有不同。

Answer 13

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

主要代码为：

console.log(quill.root.innerHTML);

Answer 14

这是一个正确的方法。

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

Answer 15

对于Quill version 1.3.6，只需使用：

quill.root.innerHTML;

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

Answer 16

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

$conf.readOnly = true;

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

Answer 17

只需使用这个干净的库从增量转换 from/to text/html

node-quill-converter

示例：

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

let html = convertDeltaToHtml(delta);

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

将 Quill Delta 转换为 HTML

Convert Quill Delta to HTML

quill