The Quill editor on my page saves both the delta and the HTML content to the DB. Since I don't want to load a Quill instance to display the HTML in view-only pages, i use the saved HTML(from my understanding having the HTML is better from an SEO perspective). This HTML page will then have an Edit button that would then open the editor in a modal where i use the saved delta from the DB to populate the editor. This works fine (with a fixed caveat, please see comments and code snippet for the fix at the end).
I also have a requirement to translate the content in the editor to a different language by tapping on an appropriate button. I use the Google translate API(on the server) and send it the HTML (innerHTML) from the editor and i get back proper translated HTML. Still on the server, just after the translation, i call convertHtmlToDelta with this translated HTML and send back the returned delta to the client. I then update the value of the editor with this new delta information and my editor shows the translated content. Works great and the whole operation seems almost seamless. But there seems to be just one issue: the styles attribute doesn't seem to be present in the delta returned from convertHtmlToDelta. Everything else remains intact thus far.
So assuming this is the original delta for an image that has a float style:
ops: [
....
{
attributes:{
link: "https://quilljs.com",
style: "display: inline; margin: 0px 1em 1em 0px; float: left;",
width: "181",
},
insert{
image: ""https://source.unsplash.com/featured?art"
}
...
]
This gets rendered to:
<img src="https://source.unsplash.com/featured?art" style="display: inline; margin: 0px 1em 1em 0px; float: left;" width="181" />
After convertHtmlToDelta the delta becomes
ops: [
....
{
attributes:{
link: "https://quilljs.com",
width: "181",
},
insert{
image: ""https://source.unsplash.com/featured?art"
}
...
]
I originally had the problem with the Quill editor itself when i was preloading it with delta from the DB and from some net research i found that i had to add width,alt, height and style to the formats object. Additionally i had to add the following snippet as well:
const ImageFormatAttributesList = [
'alt',
'height',
'width',
'style'
];
class ImageFormat extends BaseImageFormat {
static formats(domNode) {
return ImageFormatAttributesList.reduce(function(formats, attribute) {
if (domNode.hasAttribute(attribute)) {
formats[attribute] = domNode.getAttribute(attribute);
}
return formats;
}, {});
}
format(name, value) {
if (ImageFormatAttributesList.indexOf(name) > -1) {
if (value) {
this.domNode.setAttribute(name, value);
} else {
this.domNode.removeAttribute(name);
}
} else {
super.format(name, value);
}
}
}
Quill.register(ImageFormat, true);
Is there some way i could get the styles attribute as well in the returned delta? What are the possibilities of any other attribute getting stripped similarly?
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent