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

Как преобразовать Deltas в чистый HTML? Я использую Quill в качестве текстового редактора, но я не уверен, как отображать существующие Deltas в контексте HTML. Создание нескольких экземпляров Quill не было бы разумным, но я пока не мог придумать ничего лучшего.

Я сделал свое исследование, и я не нашел способа сделать это.

Ответ 1

Не очень элегантный, но я так и должен был сделать это.

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

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

Ответ 2

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

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

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

Ответ 3

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

quill.root.innerHTML

Ответ 4

Я сделал это в бэкэнд, используя php. Мой вход - json encoded 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;
}

Ответ 5

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

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

Ответ 6

Try

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

Ответ 7

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

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, а затем мы загружаем форму submit и передаем ее через нашу функцию, чтобы завершить ее.

Теперь, чтобы протестировать его, сделайте сообщение с <script>alert()</script> в нем, и вам не придется беспокоиться о эксплойтах инъекций.

Это все, что нужно.

Ответ 8

Я собрал пакет узлов для преобразования html или простого текста в дельту Quill и из нее.

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

Смотрите узел-перо-конвертер.

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

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

Ответ 9

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

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

Это всего лишь небольшой вариант ответа на км6.

Ответ 10

quill-render выглядит так, как вы хотите. Из документов:

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

Ответ 11

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

Ответ 12

Для решения в стиле 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();

Ответ 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.