Custom attribute for delta image insert at position.
See original GitHub issueBased on
var Parchment = Quill.import('parchment');
var offsetAttributor = new Parchment.Attributor.Attribute('offset', 'data-offset', {
scope: Parchment.Scope.INLINE
});
Quill.register(offsetAttributor);
var quill = new Quill('#editor');
quill.setText('Gandalf the Grey');
quill.formatText(0, 7, 'offset', '0');
quill.getContents(); // should have a delta with offset attributed
I’m trying to add a custom attribute for the img something like this
var Parchment = Quill.import('parchment');
var offsetAttributor = new Parchment.Attributor.Attribute('nameClass', 'class', {
scope: Parchment.Scope.INLINE
});
Quill.register(offsetAttributor);
quill.updateContents(
new Delta()
.retain(index)
.insert(
{
image: 'http://loremflickr.com/320/240'
},
{
width: '350',
nameClass: 'else',
alt: 'no working',
offset: 3,
}
));
but it seems that based on that example i couldn’t figure it out how to add the class.
The rendered code is
<p><span class="else"><img src="http://loremflickr.com/320/240" width="350" alt="no working"></span></p>
And i wanted the class else to be on the img 😄 ( New to quill still trying to figure it out how it works)
Issue Analytics
- State:
- Created 6 years ago
- Comments:13 (1 by maintainers)
Top Results From Across the Web
Designing the Delta Format - Quill Rich Text Editor
Quill is a free, open source WYSIWYG editor built for the modern web. Completely customize it for any need with its modular architecture...
Read more >Quill js Question :- When I make changes to the delta will it ...
So I figured it out I stored delta to a variable, then I made changes to that variable and then I setContents(delta) to...
Read more >How to Insert or Type the Delta Symbol in Word (Δ or δ)
Use the Insert Symbol command in the Ribbon; Use an Alt keyboard shortcut by pressing Alt and then typing a number sequence; Assign...
Read more >CDS based data extraction – Part II Delta Handling - SAP Blogs
In case of an INSERT or UPDATE operation a scheduled job is ... is delta enabled and provides (overwrite) after images, which makes...
Read more >Colorbar showing color scale - MathWorks
colorbar( location ) displays the colorbar in a specific location such as 'northoutside' . ... use the Position property to specify a custom...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
What I do to fix it is rewriting the image format. In order to sanitize style preventing from attacks such as XSS Or unexpected style, I also add white list for style. Environment: React-quill
Like this:
For me the custom attributes are not passing to format function of blot. I extended the default image blot and it consists of two node image, label to provide caption. I have listed the delta getting stored in db
I extended the image blot and stored necessary attributes which is getting persisted but when the editor is redrawn the value or height and width is passed to format(name, value) but the other attributes alt, caption is not passed. Tried adding this code to see if it works but it doesn’t work
//added this to register the attribute and also tried different scopes too const Caption = new Parchment.Attributor.Attribute(“caption”, “caption”, { scope: Parchment.Scope.ANY }) Quill.register(Caption)
Any help will be appreciated