quill - 将 Quill Delta 转换为 HTML

Question

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

我做了我的研究，我没有找到任何方法来做到这一点。

score 37 · Accepted Answer

不是很优雅，但这就是我必须这样做的方式。

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

显然这需要 quill.js。

score 26 · Accepted Answer

26

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

quill.root.innerHTML

于 2017-05-19T16:35:19.627 回答

score 18 · Accepted Answer

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

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

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

score 11 · Accepted Answer

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

主要代码是：

console.log(quill.root.innerHTML);

score 7 · Accepted Answer

我已经在后端使用 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;
}

score 6 · Accepted Answer

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

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

这只是 km6 答案的略微不同的变化。

score 6 · Accepted Answer

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

$conf.readOnly = true;

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

score 4 · Accepted Answer

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

quill.root.innerHTML;

在线尝试：https ://jsfiddle.net/Imabot/86dtuhap/
在我的博客上详细解释
如果您必须在表单中发布 Quill HTML 内容，请使用此链接

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

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

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

请参阅节点-quill-converter。

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

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

score 2 · Accepted Answer

2

尝试

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

于 2017-07-30T04:44:26.730 回答

score 2 · Accepted Answer

这就是我是如何做到的，为你们快递人员。它似乎与 express-sanitizer 结合使用效果很好。

应用程序.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
 })

新的.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>请在其中发表一篇文章，您不必担心注入漏洞。

这里的所有都是它的。

score 2 · Accepted Answer

这是一个正确的方法。

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

如果你想使用 nodejs 渲染 quill，有一个基于 jsdom 的非常简单的包，用于渲染后端（只有一个文件和最后一次更新 18 天后）将 quill delta 渲染到服务器上的 html 字符串

score 0 · Accepted Answer

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

节点套筒转换器

例子：

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

let html = convertDeltaToHtml(delta);

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

quill - 将 Quill Delta 转换为 HTML

17 回答 17

Related

Reference