Modify tinymce image/link dialog content in grails

28 / Aug / 2012 by Shaurav 0 comments

Recently in a project i used tinymce where i needed to modify the image/link dialog of tinymce.
To modify tinymce firstly make it inline/custom plugin means download and paste in javascript folder.
To modify image dialog , create a gsp that you want to show in dialog box and paste in

[java]
/web-app/js/plugins/tinymce/jscripts/tiny_mce/plugins/advimage
[/java]
I used iframe for fetching additional content along with tinymce image dialog content.
[java]
<iframe id="imgUploadEmbedIFrame"
src="${createLink(controller:’controllerName’ ,action:’actionName’,params: [id:’id’])}"
style="border: 0px; width:425px; height:205px;
</iframe>
[/java]

and also modify editor_plugin.js so that it will load new html.

[java]
/web-app/js/plugins/tinymce/jscripts/tiny_mce/plugins/advimage/langs/editor_plugin.js
[/java]
search file:b+”/image.htm” in editor_plugin.js and change the name of image file . for ex: if name of new file is image.gsp then in editor_plugin.js it should be like this..
[java]
file:b+"/image.gsp"
[/java]
Similarly link dialog can be modified.

for more clarity click here to view the file structure of tinymce that i have used.

Shaurav
shaurav@intelligrape.com
@shaurav26

FOUND THIS USEFUL? SHARE IT

Tag -

Grails tinymce

Leave a Reply

Your email address will not be published. Required fields are marked *