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

 /web-app/js/plugins/tinymce/jscripts/tiny_mce/plugins/advimage

I used iframe for fetching additional content along with tinymce image dialog content.

     <iframe id="imgUploadEmbedIFrame"
     src="${createLink(controller:'controllerName' ,action:'actionName',params: [id:'id'])}"
     style="border: 0px;  width:425px; height:205px; 
     </iframe>

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

 
 /web-app/js/plugins/tinymce/jscripts/tiny_mce/plugins/advimage/langs/editor_plugin.js 

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..

 file:b+"/image.gsp"

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

Tag -

Grails tinymce
FOUND THIS USEFUL? SHARE IT

Leave a comment -