quilljs get content as html
Convertir Quill Delta a HTML (13)
Aquí hay una función completa que utiliza quill.root.innerHTML, ya que las otras no cubrieron el uso completo de la misma:
function quillGetHTML(inputDelta) {
var tempQuill=new Quill(document.createElement("div"));
tempQuill.setContents(inputDelta);
return tempQuill.root.innerHTML;
}
Esta es solo una pequeña variación de la respuesta de km6.
¿Cómo convierto Deltas a HTML puro? Estoy usando Quill como editor de texto enriquecido, pero no estoy seguro de cómo mostraría los Deltas existentes en un contexto HTML. Crear múltiples instancias de Quill no sería razonable, pero aún no se me ocurrió nada mejor.
Hice mi investigación y no encontré ninguna manera de hacer esto.
Así es como lo hice, para ustedes, amigos expresos. Parece haber funcionado muy bien en combinación con el desinfectante 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 )
Mi vista solo tiene un formulario, por lo que usé document.forms[0] , pero si tiene varios o puede ampliar su vista en el futuro para tener varios formularios, consulte la referencia de MDN.
Lo que estamos haciendo aquí es crear una entrada de formulario oculta a la que asignamos el contenido de la Div de Quill, y luego arrastramos el formulario de envío y lo pasamos a través de nuestra función para finalizarlo.
Ahora, para probarlo, haga una publicación con <script>alert()</script> en ella, y no tendrá que preocuparse por los exploits de inyección.
Eso es todo al respecto.
Lo he logrado en el backend usando php. Mi entrada es json codificada delta y mi salida es la cadena html. Aquí está el código, si es de alguna ayuda para usted. Esta función aún es para manejar listas y algunos otros formatos, pero siempre puede extenderlos en la función de operación.
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;
}
No muy elegante, pero así es como tuve que hacerlo.
function quillGetHTML(inputDelta) {
var tempCont = document.createElement("div");
(new Quill(tempCont)).setContents(inputDelta);
return tempCont.getElementsByClassName("ql-editor")[0].innerHTML;
}
Obviamente esto necesita quill.js.
Para una solución de estilo jQuery que permite obtener y establecer el valor Quill, estoy haciendo lo siguiente:
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();
Reuní un paquete de nodos para convertir html o texto sin formato desde y hacia Quill Delta.
Mi equipo lo usó para actualizar nuestro modelo de datos para incluir tanto Delta de Quill como HTML. Esto nos permite renderizar en el cliente sin una instancia de Quill.
Ver el node-quill-converter .
Cuenta con las siguientes funciones: - convertTextToDelta - convertHtmlToDelta - convertDeltaToHtml
Detrás de escena utiliza una instancia de JSDOM. Esto puede hacer que sea más adecuado para los scripts de migración, ya que el rendimiento no se ha probado en un ciclo de vida típico de solicitud.
Si desea procesar quill usando nodejs, hay un paquete bastante simple basado en jsdom, útil para representar backside (solo un archivo y última actualización 18 días a partir de ahora) render delta de quill a cadena html en el servidor
Si te he entendido correctamente, hay un hilo de discusión here con la información clave que buscas.
He citado lo que debería ser de mayor valor para usted a continuación:
Quill siempre ha utilizado Deltas como una estructura de datos más consistente y fácil de usar (sin análisis). No hay ninguna razón para que Quill vuelva a implementar las API de DOM además de esto.
quill.root.innerHTMLodocument.querySelector(".ql-editor").innerHTMLfunciona bien (quill.container.firstChild.innerHTMLes un poco más frágil ya que depende del orden de los niños) y la implementación anterior de getHTML hizo poco más que esto.
Simple, la solución está aquí: https://www.scalablepath.com/blog/using-quill-js-build-wysiwyg-editor-website/
El código principal es:
console.log(quill.root.innerHTML);
Supongo que quieres el HTML en su interior. Es bastante simple.
quill.root.innerHTML
Tratar
console.log ( $(''.ql-editor'').html() );
quill.root.innerHTML en el objeto quill funciona perfectamente.
$scope.setTerm = function (form) {
var contents = JSON.stringify(quill.root.innerHTML)
$("#note").val(contents)
$scope.main.submitFrm(form)
}
quill-render parece que es lo que quieres. De la documentación:
var render = require(''quill-render'');
render([
{
"attributes": {
"bold": true
},
"insert": "Hi mom"
}
]);
// => ''<b>Hi mom</b>''