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

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

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

20
quill

12 ответов

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

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

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

18

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

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

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

8

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

quill.root.innerHTML
5

Я выполнил это в бэкэнде, используя php. Мой вход-Дельта в кодировке json, а мой выход-строка html. вот код, если он вам поможет.Эта функция по-прежнему обрабатывает списки и некоторые другие форматы, но вы всегда можете расширить их в функции operate.

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;
}
2

Квил.корень.innerHTML на объекте quill работает отлично.

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

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

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
 })

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

вот и все.

1

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

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

посмотреть узел-перо-конвертер.

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

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

1

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

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

Это всего лишь небольшая вариация ответа km6.

1

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

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

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

0

попробовать

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

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