Image Upload for TinyMCE

Instead of only being able to give the url of an image in TinyMCE you can add the option of image uploads as well with a plugin called PHPimage

It is very easy to implement and will take around 5 - 10 mins.

You can download PHPimage at SourceForge.net

http://sourceforge.net/tracker/?func=detail&aid=2844769&group_id=103281&atid=738747

Download and Unzip then Upload to your TinyMCE Plugins folder:

plugins/tiny_mce/plugins/

Then create a folder under your main Dolphin directory called /uploads/images/ and chmod 777 or 755

Then you will need to edit: /templates/base/scripts/BxBaseConfig.php

Under each tinyMCE_GZ.init tinyMCE.init replace every instance of image and advimage with phpimage in the plugins and theme_advanced_buttons

eg:

tinyMCE_GZ.init({

plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,media,searchreplace,print,contextmenu,directionality,fullscreen",

themes : "advanced",

languages : "en",

disk_cache : true,

debug : false

});

would become:

tinyMCE_GZ.init({

plugins : "table,save,advhr,phpimage,advlink,emotions,iespell,insertdatetime,preview,zoom,media,searchreplace,print,contextmenu,directionality,fullscreen",

themes : "advanced",

languages : "en",

disk_cache : true,

debug : false

});

And:

tinyMCE.init({

convert_urls : false,

mode : "specific_textareas",

theme : "advanced",

plugins : "style,layer,table,save,advhr,phpimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",

delta_height: -9, // just for correct sizing

editor_selector : /(' . $sSelectors . ')/,

theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect",

theme_advanced_buttons2 : "forecolor,backcolor,|,bullist,numlist,|,outdent,indent,|,link,unlink,image,hr,|,sub,sup,|,insertdate,inserttime,|,styleprops",

theme_advanced_buttons3 : "charmap,emotions,|,cite,abbr,acronym,attribs,|,preview,removeformat",

theme_advanced_toolbar_location : "top",

theme_advanced_toolbar_align : "center",

extended_valid_elements : "a[name|href|title],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",

paste_use_dialog : false,

paste_auto_cleanup_on_paste : true,

paste_convert_headers_to_strong : false,

paste_strip_class_attributes : "all",

paste_remove_spans : false,

paste_remove_styles : false

});

Would become:

tinyMCE.init({
convert_urls : false,
mode : "specific_textareas",
theme : "advanced",
plugins : "style,layer,table,save,advhr,phpimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",

delta_height: -9, // just for correct sizing

editor_selector : /(' . $sSelectors . ')/,

theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect",
theme_advanced_buttons2 : "forecolor,backcolor,|,bullist,numlist,|,outdent,indent,|,link,unlink,phpimage,hr,|,sub,sup,|,insertdate,inserttime,|,styleprops",
theme_advanced_buttons3 : "charmap,emotions,|,cite,abbr,acronym,attribs,|,preview,removeformat",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "center",
extended_valid_elements : "a[name|href|title],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
paste_use_dialog : false,
paste_auto_cleanup_on_paste : true,
paste_convert_headers_to_strong : false,
paste_strip_class_attributes : "all",
paste_remove_spans : false,
paste_remove_styles : false
});

There is around 3 sections like this on this file, each will relate to different editors, Blogs, Groups etc....

To make this work in forums edit /modules/boonex/forum/layout/base/xsl/canvas_init.xsl

Again change instances of advimage with phpimage

Then find around line 62:

theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom",

and replace with

theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,phpimage,cleanup,help,code,separator,insertdate,inserttime,preview,zoom",

Then Recompile Languages in Forum, you may also need to clear caches.

That's it, if you did it right you should now have this functionality.

Dave....

thank you dave :)

hi did not work for me i changed everything

but still it is going to the same plugin advimage

please help me

yes i am using the default template only and i removed the cache from admin panel also from the /cache directory i replace advimage with phpimage

it is working for blogs but not for forum

I have edited this post to include instructions for the Forum.

Look UP

Dave..

it worked like charm thanks dave

You are Welcome Foot in mouth

I followed these instructions exactly and it has unfortunately not worked, it is a completely clean install of Dolphin as well.


I cleared the cache as well.


The TinyMCE editor appears not to have changed at all since making these changes.

Do we change "image" to "phpimage" in:

theme_advanced_disable : "insertanchor,image,help,anchor,code,styleselect",

I am lost at: Then create a folder under your main Dolphin directory called /uploads/images/ and chmod 777 or 755

 

When you say main dolphin directory would that be that the same as the main site directory if I installed dolphin into the main directory? And what permissions should be set? 777 or 755 or is either ok?

Instead of only being able to give the url of an image in TinyMCE you can add the option of image uploads as well with a plugin called PHPimage

It is very easy to implement and will take around 5 - 10 mins.

You can download PHPimage at SourceForge.net

http://sourceforge.net/tracker/?func=detail&aid=2844769&group_id=103281&atid=738747

Download and Unzip then Upload to your TinyMCE Plugins folder:

plugins/tiny_mce/plugins/

Then create a folder under your main Dolphin directory called /uploads/images/ and chmod 777 or 755

Then you will need to edit: /templates/base/scripts/BxBaseConfig.php

Under each tinyMCE_GZ.init tinyMCE.init replace every instance of image and advimage with phpimage in the plugins and theme_advanced_buttons

eg:

 

tinyMCE_GZ.init({

plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,media,searchreplace,print,contextmenu,directionality,fullscreen",

themes : "advanced",

languages : "en",

disk_cache : true,

debug : false

});

would become:

 

tinyMCE_GZ.init({

plugins : "table,save,advhr,phpimage,advlink,emotions,iespell,insertdatetime,preview,zoom,media,searchreplace,print,contextmenu,directionality,fullscreen",

themes : "advanced",

languages : "en",

disk_cache : true,

debug : false

});

And:

 

tinyMCE.init({

convert_urls : false,

mode : "specific_textareas",

theme : "advanced",

plugins : "style,layer,table,save,advhr,phpimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",

 

delta_height: -9, // just for correct sizing

 

editor_selector : /(' . $sSelectors . ')/,

 

theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect",

theme_advanced_buttons2 : "forecolor,backcolor,|,bullist,numlist,|,outdent,indent,|,link,unlink,image,hr,|,sub,sup,|,insertdate,inserttime,|,styleprops",

theme_advanced_buttons3 : "charmap,emotions,|,cite,abbr,acronym,attribs,|,preview,removeformat",

theme_advanced_toolbar_location : "top",

theme_advanced_toolbar_align : "center",

extended_valid_elements : "a[name|href|title],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",

paste_use_dialog : false,

paste_auto_cleanup_on_paste : true,

paste_convert_headers_to_strong : false,

paste_strip_class_attributes : "all",

paste_remove_spans : false,

paste_remove_styles : false

});

 

Would become:
tinyMCE.init({
convert_urls : false,
mode : "specific_textareas",
theme : "advanced",
plugins : "style,layer,table,save,advhr,phpimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
delta_height: -9, // just for correct sizing
editor_selector : /(' . $sSelectors . ')/,
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect",
theme_advanced_buttons2 : "forecolor,backcolor,|,bullist,numlist,|,outdent,indent,|,link,unlink,phpimage,hr,|,sub,sup,|,insertdate,inserttime,|,styleprops",
theme_advanced_buttons3 : "charmap,emotions,|,cite,abbr,acronym,attribs,|,preview,removeformat",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "center",
extended_valid_elements : "a[name|href|title],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
paste_use_dialog : false,
paste_auto_cleanup_on_paste : true,
paste_convert_headers_to_strong : false,
paste_strip_class_attributes : "all",
paste_remove_spans : false,
paste_remove_styles : false
});
There is around 3 sections like this on this file, each will relate to different editors, Blogs, Groups etc....
To make this work in forums edit /modules/boonex/forum/layout/base/xsl/canvas_init.xsl
Again change instances of advimage with phpimage
Then find around line 62:
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom",
and replace with
theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,phpimage,cleanup,help,code,separator,insertdate,inserttime,preview,zoom",
Then Recompile Languages in Forum, you may also need to clear caches.
That's it, if you did it right you should now have this functionality.
Dave....

 

 

 

 

I believe he means the root directory of your installation is where you'd place the directory and its subdirectories. As for the directory permissions, 755 should work just fine.

Community Moderator - BoonEx Certified Hosting for Dolphin: Zarconia.net - http://bit.ly/1p6xNBZ

Thank you. I added the directory and the upload ability now exists. However, a byproduct of the change is i am receiving broken links on prior existing images in blogs, sites, groups, etc. Was this expected?

This is a great solution that works perfectly in my 7.0.3 installation!  Thanks so much for posting Cool

Cheers - Jethro

OMG!!!!!!!!!!!! THANKS SO MUCHWink

7.0.5 works great

Not working in dolphin 7.0.9

I have done everything described in this forum but its not working in 7.0.9 i have also create uploads/images as well as edited the /templates/base/scripts/BxBaseConfig.php but still facing the problem.

 RE

Not working in dolphin 7.0.9

I have done everything described in this forum but its not working in 7.0.9 i have also create uploads/images as well as edited the /templates/base/scripts/BxBaseConfig.php but still facing the problem.

 Be glad it's not working.  This is a really, really bad modification.  There is no integration with Dolphin. 

If you want image uploading from within TinyMCE, you should first purchase this:

http://tinymce.moxiecode.com/plugins_imagemanager.php

Then This:  http://www.boonex.com/m/ImageManager_plugin_integration

Yes, it's $62 total, but well worth it.

Build a system that even idiots can use, and only idiots will use it.

Is posible to macke to work in 7.1.x appear File not uploaded. Can`t carry on a process.

Screenshot_2.png · 37.7K · 46 views