Преобразование Quill Delta в HTML

Не очень элегантно, но вот как мне пришлось это сделать.

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

Очевидно, для этого нужен quill.js.

Я думаю, вы хотите, чтобы внутри него был HTML. Это довольно просто.

quill.root.innerHTML

Если я вас правильно понял, здесь есть ветка обсуждения с ключом информация, которая вам нужна.

Я процитировал то, что должно быть для вас наиболее ценным ниже:

Quill всегда использовал дельты как более согласованную и простую в использовании (без синтаксического анализа) структуру данных. У Quill нет причин заново реализовывать DOM API в дополнение к этому. quill.root.innerHTML или document.querySelector(".ql-editor").innerHTML работают нормально (quill.container.firstChild.innerHTML немного более хрупкий, поскольку зависит от порядка дочерних элементов), а предыдущая реализация getHTML сделала немного больше, чем это.

Простое решение здесь: https://www.scalablepath.com/blog/using-quill-js-build-wysiwyg-editor-website/

Основной код:

console.log(quill.root.innerHTML);

Я сделал это на бэкэнде, используя 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;
}

Вот полная функция, использующая quill.root.innerHTML, поскольку другие не совсем охватывали ее полное использование:

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

Это просто немного другая вариация ответа km6.

Для Quill версии 1.3.6 просто используйте:

quill.root.innerHTML;

• Попробуйте онлайн: https://jsfiddle.net/Imabot/86dtuhap/
• Подробное объяснение моего блог
• Эта ссылка, если у вас есть для публикации HTML-содержимого Quill в форме

Это очень распространенная путаница, когда дело касается Quilljs. Дело в том, что вам НЕ следует извлекать свой html только для его отображения. Вы должны визуализировать и отображать свой контейнер Quill точно так же, как если бы он был редактором. Это одно из основных преимуществ Quilljs, и ЕДИНСТВЕННОЕ, что вам нужно сделать, это:

$conf.readOnly = true;

Панель инструментов будет удалена, и содержимое станет недоступным для редактирования.

quill.root.innerHTML на объекте quill работает отлично.

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

Я собрал пакет узлов для преобразования HTML или обычного текста в Quill Delta и обратно.

Моя команда использовала его для обновления нашей модели данных, чтобы включить в нее как Quill's Delta, так и HTML. Это позволяет нам выполнять рендеринг на клиенте без экземпляра Quill.

См. node-quill-converter.

Он имеет следующие функции: - convertTextToDelta - convertHtmlToDelta - convertDeltaToHtml

За кулисами он использует экземпляр JSDOM. Это может сделать его наиболее подходящим для сценариев миграции, поскольку производительность не тестировалась в типичном жизненном цикле запроса приложения.

Пытаться

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

Вот как я это сделал, для вас, ребята из Express. Похоже, он очень хорошо работал в сочетании с экспресс-дезинфицирующим средством.

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>, и вам не придется беспокоиться об использовании инъекций.

Вот и все, что нужно сделать.

Вот как это сделать.

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

Для решения в стиле jQuery, которое позволяет получать и устанавливать значение Quill, я делаю следующее:

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();

Похоже, что quill-render это именно то, что вам нужно. Из документов:

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

Если вы хотите визуализировать quill с помощью nodejs, есть довольно простой пакет на основе jsdom, полезный для визуализации обратной стороны (только один файл и последнее обновление через 18 дней) преобразовать дельту quill в строку html на сервере