Thread

I’ve got TinyMCE running with EE and like it for the most part but would like it even better if there were some sort of image upload functionality associated with it. I would like to be able to cut out the extra step of doing the normal file upload and then go to TinyMCE and do an image insert, type in the URL and all that jazz. Do any of the WYSIWYG’s have the kind of functionality like I’m referring to? Would love for my client to hit image insert, then it allows you to browse locally for the file and then plug it in the content. Also, I noticed that TinyMCE doesn’t allow you to change fonts although I know that is what the stylesheet is for. I know in all likelihood I will get that question from my client.

Thx

Hi there,

yes there are several plugins that do what you want to do. I posted quite detailed instructions on how to use the Ajax File Manager Plugin for TinyMCE in this thread.

Or just pop over directly to the google doc: here.

Hope that is what you are looking for.

Thanks for that info. I got it running on my server and was able to test it out some. Just what I was looking for. I am now at the EE install plugin step and having some difficulty understanding what to do next. I am following these steps as I see that what is listed in Appendix A is already in tinymce_test.php. I am now at Appendix B

Is the code that is showing there to replace what is showing in tinymce_test.php? If not, if someone could be specific as to what needs adding/replacing, etc. I appreciate it!

Thanks

Skydog,

glad the documentation was useful. I’m not quite sure what the problem is but here goes:

Install the EE plugin as is if you don’t need the toggle on/off functionality (i.e TinyMCE is on all the time).
If you prefer to be able to toggle TinyMCE on the publish and edit pages you need to use the plugin as shown in Appendix A (it is the entire official plugin minus the javascript pieces shown to be deleted belwow:

settings['script_url']).'">

DELET FROM HERE://<![CDATA[
tinyMCE.init(
    {             DELETE END HERE.
'.
$settings_parts.
'
DELETED FROM HERE: )};  TO HERE.

Now IF you use MY changed version of the plugin then you need to add those parts again in the EE CP settings. This was done in my setup. Hence I posted the entire settings in Appendix B.
If you read through the document carefully you see that you only really NEED to add:

elements : "ajaxfilemanager",
file_browser_callback : "ajaxfilemanager",

to the tinyMCE.init setup as found in the EE CP under:
CP Home ›  Admin ›  Utilities ›  Extensions Manager ›  Tiny MCE Extension for EE.

What is posted in Appendix B is a drastically reduced version of TinyMCE suited for my needs with the bits of javascript I deleted from the plugin added back in the settings. This was done so I could add more javascript below for the toggle functionality.

All other TinyMCE settings are solely up to you.

Thanks asozzi,

Appreciate your help walking me through this.

What I’m seeing now when I run tinymce_test.php is this text version it appears and doesn’t show the TinyMCE/File Mgr. interface. Can you elaborate on that if you will?

I don’t necessarily need the toggle functionality.

When I go to the extensions mgr and look under settings for TinyMCE I see the following:

mode : “textareas”

I did add the following two lines of info underneath the above line and got nothing

elements : "ajaxfilemanager",
file_browser_callback : "ajaxfilemanager",

Is this the area that you’re referring to as where the TinyMCE ini settings?

I am also noticing that after doing the upload of all these files that I do not see TinyMCE running anymore. I went back and deleted the entire ajaxfilemanager dir and noticed it was back and then did a fresh install and now it is gone again.

Right now everything everything is running under a directory below root as I am working on a test site until the new one is up, ie. http://www.domainname.com/ee/ajaxfilemanager

Sorry for the not understanding - this is a first EE go round for me and plus I’m programming challenged - just a designer trying to pull this project off 😖

Hmm, OK there are 2 different things at work here:
1) EEngine and TinyMCE(+ajaxFilemanager) as separate programs
2) Make them work together

1)
a)EEngine
Now your EEngine install works and lets say its located under:
.../htdocs/eengine   (where /htdocs/ is your www root)

b)Download TinyMCE(currently V2.2.1), unzip and upload (only the folder “tiny_mce” located inside the zip file at tinymce_2_1_2/tinymce/jscripts/tiny_mce) to say:
.../htdocs/tiny_mce

c)Download Ajaxfilemanager, unzip and upload to:
.../htdocs/tiny_mce/plugins

Now edit the config.base.php file for ajaxFilemanager located at:
.../htdocs/tiny_mce/plugins/ajaxfilemanager/inc/config.base.php

See Appendix C for reference. 2 things to make sure there:
—Set the path where stuff should get uploaded to. I used relative paths, the “../../../uploaded” translates to:
.../htdocs/uploaded       (make sure uploaded is set to 777)

//FILESYSTEM CONFIG
/*
* CONFIG_SYS_DEFAULT_PATH is the default folder where the files would be uploaded to
and it must be a folder under the CONFIG_SYS_ROOT_PATH or the same folder
*/
  define('CONFIG_SYS_DEFAULT_PATH', '../../../uploaded/'); 
  define('CONFIG_SYS_ROOT_PATH', '../../../uploaded/');    //the root folder where the files would be uploaded to

—Set AjaxFilemanger output to TinyMCE mode by setting:

define('CONFIG_THEME_MODE', 'tinymce');  //set tinymce you want use it for tinymce editor or stand-alone
    define('CONFIG_THEME_NAME', 'default');  //change the theme to your custom theme rather than default

located towards the end of the file.

You should now be able to edit the TinyMCE ini and use TinyMCE with the Ajax Filemanager Plugin in TinyMCE standalone mode:
Make a file copy the code you can find here: TinyMCE&AjaxFilmanager;Standalone adjust the filepaths in the lines I highlighted and save file as .html or .php
. Upload anywhere to your server. Point your browser there and…. hopfully you are getting a working TinMCE. you access the AjaxFilemanger function by clicking on the image icon (little tree), then clicking on the Browser icon (6 funny red dots in a window thingy) in the window that pops up.

Hopefully all worked well up to now. If so you have done almost all the hard work and I’ll put the second part in a separate post

So now, assuming you got all the way to have TinyMCE with AjaxFilemanager Working in standalone mode, you need to integrate it with EEngine.

2) Integration with EEngine

Download the TinyMCE EE plugin and unzip. If you install this plugin it will link it to the publish and edit parts of the CPanel but it will also give you a field to administer the TinyMCE settings under CP Home› Admin ›Utilities › Extensions Manager › Tiny MCE Extension for EE.
Problem:
The field provided under EE will only allow for the TinyMCE settings but not the additional javascript needed to initalize AjaxFilemanager. Hence we need to make a few changes.

Have a look at the ext.tiny_mce.php file and remove the lines I highlighted here. Or just copy and paste the entire Appendix A into a file and name it ext.tiny_mce.php

now install the plugin (copy it to the plugin and lang folder. Go to the EE extensions menu and enable it. Now click the links for the settings for this plugin.

You will have to fill out the URL to the script, for our demo it would be:
http://www.yourdomain.com/tiny_mce/tiny_mce.js
And now we can copy paste the TinyMCE settings (same we used in the standalone)into the lower text field. You can use the settings I posted here.

Now if you want to add buttons etc. you will have to read through the TinyMCE documentation.

Enjoy your weekend!