Как преобразовать Deltas в чистый HTML? Я использую Quill в качестве текстового редактора, но я не уверен, как отображать существующие Deltas в контексте HTML. Создание нескольких экземпляров Quill не было бы разумным, но я пока не мог придумать ничего лучшего.
Я сделал свое исследование, и я не нашел способа сделать это.
Не очень элегантный, но я так и должен был сделать это.
function quillGetHTML(inputDelta) {
var tempCont = document.createElement("div");
(new Quill(tempCont)).setContents(inputDelta);
return tempCont.getElementsByClassName("ql-editor")[0].innerHTML;
}
Очевидно, для этого требуется quill.js.
Если я вас правильно понял, там гусиная нить обсуждения здесь, с ключевой информацией вы после этого.
Я процитировал то, что должно быть наиболее ценным для вас ниже:
Quill всегда использовал Deltas в качестве более согласованной и простой в использовании (без разбора) структуры данных. У Quill нет оснований переопределять API DOM в дополнение к этому.
quill.root.innerHTMLилиdocument.querySelector(".ql-editor").innerHTMLработает просто отлично (quill.container.firstChild.innerHTMLнемного более хрупок, поскольку зависит от упорядочения дочерних элементов), а предыдущая реализация getHTML сделала немного больше чем это.
Я думаю, вы хотите, чтобы внутри него был HTML. Это довольно просто.
quill.root.innerHTML
Я сделал это в бэкэнд, используя 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;
}
quill.root.innerHTML на объекте Quill отлично работает.
$scope.setTerm = function (form) {
var contents = JSON.stringify(quill.root.innerHTML)
$("#note").val(contents)
$scope.main.submitFrm(form)
}
Try
console.log ( $('.ql-editor').html() );
Вот как я это сделал, для вас 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> в нем, и вам не придется беспокоиться о эксплойтах инъекций.
Это все, что нужно.
Я собрал пакет узлов для преобразования html или простого текста в дельту Quill и из нее.
Моя команда использовала его для обновления нашей модели данных, чтобы включить и Quill Delta, и HTML. Это позволяет нам визуализировать на клиенте без экземпляра Quill.
Смотрите узел-перо-конвертер.
Он имеет следующие функции: - convertTextToDelta - convertHtmlToDelta - convertDeltaToHtml
За кулисами он использует экземпляр JSDOM. Это может сделать его наиболее подходящим для сценариев миграции, так как производительность не тестировалась в обычном жизненном цикле запросов приложений.
Здесь полная функция, использующая quill.root.innerHTML, так как остальные не совсем охватывают ее полное использование:
function quillGetHTML(inputDelta) {
var tempQuill=new Quill(document.createElement("div"));
tempQuill.setContents(inputDelta);
return tempQuill.root.innerHTML;
}
Это всего лишь небольшой вариант ответа на км6.
quill-render выглядит так, как вы хотите. Из документов:
var render = require('quill-render');
render([
{
"attributes": {
"bold": true
},
"insert": "Hi mom"
}
]);
// => '<b>Hi mom</b>'
Если вы хотите визуализировать перо с помощью nodejs, пакет довольно прост на основе jsdom, полезный для рендеринга обратной стороны (только один файл и последнее обновление через 18 дней) визуализировать quill delta для строки 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();
Простое решение здесь: https://www.scalablepath.com/blog/using-quill-js-build-wysiwyg-editor-website/
Основной код:
console.log(quill.root.innerHTML);
Вот правильный способ сделать это.
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();