Конвертировать Quill Delta в HTML

Question

Как преобразовать Deltas в чистый HTML? Я использую Quill в качестве текстового редактора, но я не уверен, как отображать существующие Deltas в контексте HTML. Создание нескольких экземпляров 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-render похоже, что это то, что вы хотите. Из документов:

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

Answer 3

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

Answer 4

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

Answer 5

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

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

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

Answer 6

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

quill.root.innerHTML 

Answer 7

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

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

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

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

Вот и все.