Issue #1715Opened January 7, 2019by JulioDavidMartinez0 reactions

Hello, I am new to your project, but I love it. I have a small issue with image attributes.

Question

I added two new traits to the trait manager for images. Width and height. I added it as a plugin following your example. It totally works and lets me edit the image attributes for width and height. The problem is that now the asset manager doesn't work any more. If I disable my changes then the asset manager works again. Is there any way that I can have both working? My new traits and the asset manager for images?

Here is my code for adding the new traits. To activate it I just call the function name as a plugin. Did I do something wrong maybe? Please help!!!!

function AddImageTraits(editor) {
	var domComps = editor.DomComponents;
	var dType = domComps.getType('default');
	var dModel = dType.model;
	var dView = dType.view;
	domComps.addType('image', {
		model: dModel.extend({
			defaults: Object.assign({}, dModel.prototype.defaults, {
				traits: [
					// strings are automatically converted to text types
					'name',
					'id',
					'alt',
					'width',
					'height'
				]
			}),
		}, {
			isComponent: function (el) {
				if (el.tagName == 'IMG') {
					return {
						type: 'image'
					};
				}
			},
		}),
		view: dView,
	});

Answers (3)

arthuralmeidapJanuary 9, 20190 reactions

Try to override from the image type itself instead of default type

artfJanuary 14, 20190 reactions

As already mentioned by @arthuralmeidap you have to extend the image component. So in your case (by using the latest grapesjs version) it could just be:

editor.DomComponents.addType('image', {
	model: {
		defaults: {
			traits: [ 'name', 'id', 'alt', 'width', 'height']
		}
	}
});
lock[bot]January 14, 20200 reactions

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.