QuillDeltaToHtmlConverter returns blank
Opened this issue · 6 comments
I am currently fetching delta data from my database and using convert() to convert the delta value to HTML. For some reason, the value returns a blank string but before convert() the object was assigned delta. What could be the issue?
EXAMPLE:
const QuillDeltaToHtmlConverter = require('quill-delta-to-html').QuillDeltaToHtmlConverter;
jobs.forEach(job => {
const cfg = {};
const cfg2 = {};
const converterDesc = new QuillDeltaToHtmlConverter(job.info.description.toString());
const converterReq = new QuillDeltaToHtmlConverter(job.info.requirements.toString());
job.info.description = converterDesc.convert();
job.info.requirements = converterReq.convert();
});
converterDesc contains this before I call the convert() function:
rawDeltaOps:'{"ops":[{"attributes":{"bold":true},"insert":"Looking for Independent and Growth Mindset Designer"},{"insert":"\nLooking for UI/UX designs to assist our team to support black businesses in becoming digital resilient. Our team consult with startups and small business and offer services to design & develop their digital solution.\n\n"}]}'
I tried without toString()
I'm having the same issue. Converter rawDeltaOps shows result similar to yours but the convert() function returns blank.
import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html'
const cfg = {}
const converter = new QuillDeltaToHtmlConverter(
JSON.parse(message.content),
cfg
)
const html = converter.convert()
I have the same issue, any news about this bug ?
Are you using React? If so, I found a workaround:
const deltaOps = JSON.parse(message.content)
const quillHtml = () => {
const temp = new Quill(document.createElement('div'))
temp.setContents(deltaOps)
return { __html: temp.root.innerHTML }
}
return <div dangerouslySetInnerHTML={quillHtml()}></div>
I often stumbled over this… don't supply the delta
to the converter, supply delta.ops
. So the example of @Doetheman would be:
const QuillDeltaToHtmlConverter = require('quill-delta-to-html').QuillDeltaToHtmlConverter;
jobs.forEach(job => {
const cfg = {};
const cfg2 = {};
const converterDesc = new QuillDeltaToHtmlConverter(job.info.description.ops);
const converterReq = new QuillDeltaToHtmlConverter(job.info.requirements.ops);
job.info.description = converterDesc.convert();
job.info.requirements = converterReq.convert();
});
I don't know why you are using toString()
here, you have to pass the JavaScript Object to the converter.
typescript + react . Works fine!
import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html';
const cfg = {};
function deltaToHtml(delta: string) {
const _delta = JSON.parse(delta);
const converter = new QuillDeltaToHtmlConverter(_delta.ops, cfg);
const html = converter.convert();
return html;
...
<div dangerouslySetInnerHTML={{ __html: quillToHtml(data) }} />
I often stumbled over this… don't supply the
delta
to the converter, supplydelta.ops
. So the example of @Doetheman would be:const QuillDeltaToHtmlConverter = require('quill-delta-to-html').QuillDeltaToHtmlConverter; jobs.forEach(job => { const cfg = {}; const cfg2 = {}; const converterDesc = new QuillDeltaToHtmlConverter(job.info.description.ops); const converterReq = new QuillDeltaToHtmlConverter(job.info.requirements.ops); job.info.description = converterDesc.convert(); job.info.requirements = converterReq.convert(); });I don't know why you are using
toString()
here, you have to pass the JavaScript Object to the converter.
What I did forget was to first make a JSON object of the String I got from the database with JSON.parse(delta)
. After that I put the Delta with ops in it and it works fine :-) Thanks for the community to make this possible :-)