TinyMCE 4 in 1.2.1. Cant add wrapper div or a class to an image

[nick0]

Hello,

I just noticed that in Evo 1.2.1...

I can't add a wrapper div to an image using the format select button - pictured below

I also cannot seem to add a class (neither inline or block) to an image.

EDIT: I also cannot add a link to an image on the 2 x 1.2.1 sites tested.

I can do both of the above for text - just not for images.

I am wondering if it might be due to the image toolbar that stays present - see below. Is it possible to turn that off so I can test if that is the problem? If so, how?

Thanks for any help,

[Deesen]

I guess you cannot disable just that small toolbar but maybe this parameter will help to add custom classes to <img> ? https://www.tinymce.com/docs/plugins/image/#image_class_list

[nick0]

Thanks @Deesen. Sorry if this is a sill question but where do I actually put that image class?
I'd prefer not to hack the core code if possible.
This doesn't solve the link issue.
Is this a bug? Does anyone else have these issues?

[Deesen]

I recommend to create your own TinyMCE4-theme, so at any update your theme won´t be touched. You just need to

1. duplicate one of the themes (probably the theme you are using now) inside assets/plugins/tinymce4/theme/, but not the base-theme, and name it theme.tinymce4.YOUR_THEME.inc.php.

2. Acc. to https://www.tinymce.com/docs/plugins/image/#image_class_list add this code to your new theme-file

   $this->set('image_class_list', "[
     {title: 'None', value: ''},
     {title: 'Title for CSS-Class', value: 'your_classname'},
     {title: 'Cat', value: 'cat'}
   ]", 'json');  
   

3. In MODX-configuration set TinyMCE4-theme to "YOUR_THEME"

[Deesen]

You can customize your theme exactly as you please, and copy/use it at other Evo-installations.

[nick0]

Thanks @Deesen, much appreciated for the instructions. That works - now I can add a class to the image through that image options box.

The code you supplied didn't quite work - some of the inverted commas needed to be single, others double etc - I looked through the existing themes and saw the image_class_list in the base theme. This one worked for me...

$this->set('image_class_list', '[
	{title: "None", value: ""},
	{title: "Centre Image",value: "centre"}
]', 'json' );

Thank you.

I still can't add a wrapper div or add a link to an image. Any ideas on how to do that? The link issue is of most importance.

I have a feeling if I could disable that image toolbar (it looks like it maintains focus) these problems would go away. Do you know how to do that in the theme I created?

Thanks again for your help.

Do any others have these same issues? Is it a bug?

[nick0]

TinyMCE 4.6.3 seems to solve all three things in this thread #1324. Now I can:

• add a wrapper div to images
• add a link to an image
• add a class to an image

Thank you!