将Quill Delta转换为HTML

Question

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

我做了我的研究,但我没有找到任何办法.

Answer 1

不是很优雅,但这是我必须这样做的.

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

显然这需要quill.js.

Answer 2

如果我理解正确的话,您有一个讨论的鹅毛笔线程在这里,与你后的关键信息.

我在下面引用了对你最有价值的东西:

Quill一直使用Deltas作为更一致和更易于使用(无解析)的数据结构.除此之外,Quill没有理由重新实现DOM API.quill.root.innerHTML或者document.querySelector(".ql-editor").innerHTML工作得很好(quill.container.firstChild.innerHTML因为它取决于孩子的订购,因此更加脆弱)以及之前的getHTML实现只做了一点.

Answer 3

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

$conf.readOnly = true;

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

Answer 4

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

quill.root.innerHTML

Answer 5

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

主要代码是：

console.log(quill.root.innerHTML);

Answer 6

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

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

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

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

Answer 8

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

quill.root.innerHTML;

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