How to extend the image asset type to add custom attributes?
Put it in a plugin if you need to update also the already defined assets
Read full answer below ↓Question
Hello, I'm trying to make a simple modification to the default image asset and am running into a wall, and am sure I'm missing something simple. I need the image element to have an additional attribute that I pass into it, called mySpecialId. I can't figure out how to get the asset to render this into the DOM. I think I'm supposed to extend the image type like this, and I think I should be using the updateTarget method like this: But it's not working. When I click on the image, nothing happens. I think that's because I'm replacing the base updateTarget logic in the image, whereas I want to ex...
Answers (1)
editor.AssetManager.addType('image', {
view: {
attributes: { 'custom-attr': 'custom-value' }
}
});
Put it in a plugin if you need to update also the already defined assets
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1044
change src for image element in model
hello when a image block drop to editor i hide the default asset manager and display my custom asset manager: fot this i have no problem.bu...
Issue #2741
How to wrap component with text nodes based on trait?
Hello @artf , I'm not sure if this goes here but I can't figure out from the documentation how to update the component model based on a tra...
Issue #2697
[QUESTION] Problem with custom component type and table cell
Hello! I'm trying to add custom component type: And also I'm adding new block: But when I drop this block on the canvas the <td> tag doesn'...
Issue #634
How can I pass content with script?
I made custom component like this way and used script as well then script is working fine but I am not able to select component. Is there a...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Tutorial
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins — TinyMCE Inline Text Editor and Placeholder.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.