Question

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

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

Answer 1

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

>>> arr = np.array([1,2,3])
>>> [(arr[p==1], arr[p==0]) for p in map(np.array, product([1,0], repeat=len(arr)))]
[(array([1, 2, 3]), array([])),
 (array([1, 2]), array([3])),
 (array([1, 3]), array([2])),
 (array([1]), array([2, 3])),
 (array([2, 3]), array([1])),
 (array([2]), array([1, 3])),
 (array([3]), array([1, 2])),
 (array([]), array([1, 2, 3]))]

显然这需要quill.js。

Answer 2

如果我理解正确的话，会有一个主题讨论here，其中包含您所关注的关键信息。

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

Quill一直使用Deltas作为更一致和更容易使用（无解析）数据结构。 Quill没有理由重新实现DOM API 除此之外。 quill.root.innerHTML或document.querySelector(".ql-editor").innerHTML工作得很好（quill.container.firstChild.innerHTML因为依赖于子命令而稍微脆弱一些），之前的getHTML实现只做了一点。

Answer 3

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

quill.root.innerHTML

Answer 4

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

quill.root.innerHTML;

在线尝试：https://jsfiddle.net/Imabot/86dtuhap/
我的blog
此链接（如果您有to post the Quill HTML content in a form

Answer 5

我在后端使用php完成了它。我的输入是json编码的delta，我的输出是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;
}

Answer 6

quill对象上的quill.root.innerHTML工作正常。

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

Answer 7

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

主要代码是：

console.log(quill.root.innerHTML);

Answer 8

尝试

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

Answer 9

以下是我为你们表达的方式。它似乎与快速消毒剂配合使用效果非常好。

<强> 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>，并且您不必担心注入攻击。

这就是它的全部内容。

Answer 10

我将一个节点包放在一起，将html或纯文本转换为Quill Delta。

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

请参阅node-quill-converter。

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

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

Answer 11

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

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

这与km6的答案稍有不同。

Answer 12

当涉及Quilljs时，这是一个非常常见的困惑。问题是您不应该仅仅为了显示它就获取HTML。您应该像编辑器一样以相同的方式呈现和显示Quill容器。这是Quilljs的主要优点之一，您唯一需要做的就是：

$conf.readOnly = true;

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

Answer 13

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

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

Answer 14

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

Answer 15

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

这是正确的方法。

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

将Quill Delta转换为HTML

16 个答案: