Update TinyMCE integration to 3.x

D'oh didn't read your post well. Yes I can concur that image assist is not working for TinyMCE 3.x

Patches are welcome.

I've been trying to convert the editor_plugin.js to use the 3.x core of TinyMCE but that didn't go quite well :/

A patch with the work done is attached. Mind you that this is fairly far from working.

TODO's:

• initInstance should be removed, I think
• cleanup needs to be moved to the init, I think
• handleNodeChange needs to be moved to the init
• {$pluginurl} for the plugin image doesn't work

Is there a tinymce porting guide that can be followed?

(The Drupal docs have spoilt me.)

EDIT - oops, the linked issue contains links to the api and a migration guide.

Your patch contained plenty of unnecessary changes to indentation. Please avoid such changes so that others are actually able to review your patch.

Attached patch contains only changes from last patch.

I have applied the patch and when reloading it, I have a extra button but no icon and I when I click on the button a popup appeers but only grey no extra things. I have now Tryed soemthing else first apply the first patch and then the second and it failed :(

It would be create if someone could inform me how to apply the different patches.

I also have applied the patch above (img_assist-DRUPAL-6--1.tinymce3.patch), experienced the same than lodder.

My modules installed:
- Image 6.x-1.0-alpha1
- Image assist 6.x-1.0-beta1
- Tiny tiny MCE 6.x-1.4 (with TinyMCE ver. 3.0.8)

I made some little changes on DrupalImage plugin's editor_plugin.js file to show drupalimage Icon. The en.js language file also had to be changed. The another two files I've changed was img_assist.module and img_assist_tinymce.js

My solution is far from perfect, but it works for me. (you could have problems with paths if you have installed Drupal in subdirectory)

If you use TinyMCE drupal plugin, use the img_assist.module-tinymce01.patch, if you use tiny tiny MCE (as I), use img_assist.module-tinytinymce01.patch.

After the image insertion the img_assist popup window doesn't disappear. As I've said, far from perfect, but maybe 1 step closer. :-)

please double check the img_assist version you are using; when I apply the editor_plugin.js-01.patch I get:

patch < editor_plugin.js-01.patch
(Stripping trailing CRs from patch.)
patching file editor_plugin.js
patch: **** malformed patch at line 16: @@ -18,7 +21,7 @@ var TinyMCE_DrupalImagePlugin = {

Does anybody need help to test anything here?

These patches did not work for me. I applied them manually with no improvement. I suppose I'll try again at some point.

Any progress on this?
I tried those patches, too, but it didn't help.

Also, I tried modifying the editor_plugin.js a bit, since in the patch there is:

+//var TinyMCE_DrupalImagePlugin = {
+(function() {tinymce.create('tinymce.plugins.DrupalImagePlugin', {
 
-var TinyMCE_DrupalImagePlugin = {

This only produces syntax error, I assume? Because now the TinyMCE_DrupalImagePlugin wouldn't be defined and the next line starts with (function()...
So I uncommented the variable declaration. Anywhere near a solution here?

Subscribing.

Oh well. This port took me almost two whole days. And it's even not complete yet, since support for TinyMCE 3 as well as other editors requires changes all over the module, as you can see in attached patch.

This is because Image Assist more or less uses inline JavaScripts to control the behavior of the popup dialog. So, although the new implementation for TinyMCE 3 supports inline popups, and also displays a preview of the image right in the editor (which rocks! 8), it seems like we need Wysiwyg's full-blown Plugin API sooner than I originally estimated.

Another fact is that img_assist.textarea.js is some kind of another editor plugin integration already -- think jWysiwyg or BUeditor: those editors provide nothing else than buttons to insert HTML markup (without rendering) into a textarea, and that is what Image Assist tries to provide on its own. Hence, another part of the major refactoring will most probably be to remove this built-in feature and replace it with an alike integration for Wysiwyg API and thus, for those so called "pseudo-editors". Since Wysiwyg API is able to support those editors now, I actually see no reason why we should keep this half-baked "solution" in Image Assist.

Aside from that, I was able to drastically reduce the complexity as well the size of the plugin code.

Now I'd like to get some thorough reviews on this patch, so we can discuss the technical implementation further. (especially from you, zoo33, if you're listening ;)

re patch #14. I applied but I do not see the drupalimage icon in the toolbar. It's probably because patch isn't finished but I'm not sure so I'm reporting.

Two possible reaons:

1) You are not using Wysiwyg API. This patch only works with Wysiwyg API, not with the obsolete TinyMCE module.
2) You did not update your editor profile configuration after applying the patch. Sorry for not mentioning this.

I am using tinymce, version 3, with drupal 5. I had to upgrade to tinymce version 3 because of bugs that tinymce version 2. Any advice? I'm pretty heavily invested in tinymce and would rather not move. If you can get img_assist 5 to work with tinymce 3 and get drupalimage to work that would be ideal.

getting the following error with tinymce 3, img_assist patched per above, and wysiwyg module:

warning: Missing argument 2 for img_assist_wysiwyg_plugin() in /blah/blah/blah/modules/img_assist/img_assist.module on line 1839.

That's just a notice, but anyway, please use the current development snapshot of Wysiwyg API.

Yes, found the problem and used dev version of wysiwyg. No errors now, but the editor's toolbar does not show in any field. I double and triple checked tinymce settings (v3) and the toolbar should be showing.

Oww. I just realized that you need to apply a companion patch for Wysiwyg API to actually have it load Image Assist's plugin. I'm currently working on a complete rewrite of the editor plugin API, which will probably take some time. Attached patch will apply to the development snapshot (ie. to the module you downloaded), but probably no longer when #253600: Attach client-side editors to input format enabled textareas only has landed.

EDIT: Of course, this patch will be committed to Wysiwyg API after the other Wysiwyg API patch has been committed. ;)

I applied the wysiwyg patch. But I am not having any success getting the toolbars to show up at all.

Hm. Sounds like a JavaScript error occurred in the background. If you are using Firefox, be sure to have a look in the JavaScript error console (NOT Firebug, because Firebug currently seems to fail on catching and displaying certain errors).

I looked for js errors in the console, nothing there. Just to clarify, I'm running:

image assist 5.2 dev, patched per above
wysiwyg dev, patched per above
tinymce 3.2.0.1
drupal 5 site

Ok. So here is a patch that should apply cleanly against the latest development snapshot of Image Assist.

It is compatible to Wysiwyg 0.4 (which has been released yesterday).

As the screenshot implies, this is only a temporary solution. We are currently rewriting and refactoring and rethinking the complete Wysiwyg Plugin API as well as Image Assist. This will still require *a lot of work* and time, so you might use this patch as an interim solution in the meanwhile. And, if you want to support this work, please consider to contribute (see Wysiwyg API project page as well as the steadily updated status page).

I have tried to apply the patch to Image_assist that you mentioned. I actually haven't any experience with your WYSIWYG API module, so this may be totally out of place. However, I am trying to get TinyMCE 3.2 working on Drupal 5 with WYSIWYG API and Image Assist 2.x-dev.

The problem I can see is that no TinyMCE editor appears after everything's configured. I'm not sure, but could it have something to do with the fact that my patch application (TortoiseSVN) didn't know how to use /dev/null that was referred to in your patch file.

I hope this is a funny, silly problem, not a serious one.

Thanks so much for the advice you can give.

Scott,

Well, it should be complete if the following files were added by this patch:

plugins/tinymce/editor_plugin.js
plugins/tinymce/css/img_assist.css
plugins/tinymce/img/img_assist.gif
plugins/tinymce/langs/en.js

Of course, the gif is not contained in the patch. My fault, just copy the existing drupalimage/images/drupalimage.gif and copy it into above mentioned folder (don't forget to rename).

If you still encounter errors then, consider joining #drupal-wysiwyg in IRC

I now have TinyMCE working. But the patch from #25 still doesn't work. I haven't been able to test it because when it's enabled, the editor doesn't load in place of the textarea.

I still am not totally clear on the file structure for the plugin, although I have it showing on the list of plugins for WYSIWYG API 0.4.

FWIW, attached is the patched module. However, please bear in mind that this is a temporary solution only. There will be a point in time when Wysiwyg's Plugin API has been rewritten and Image Assist will integrate with it. It is very likely that there will be no upgrade path (although updating your profiles and re-adding the plugin should be done quickly).

subscribing

Patch doesnt work, new img assist version: Image assist 6.x-1.0

Secondly... where do I put the drupalimage folder, in which directory?

@Riccardo83: this one might help you, if you want to work with unpatched modules at least: http://drupal.org/node/322331.

Thanks mate, i just updated my post.. not sure if u read it. Please do again...

I was curious if there was a temporary solution for d6, image assist 6 and tinymce 3...

Im confused because this thread starts with:

Now, with 6.x, we have only the TinyMCE 3.x support:

1. TinyMCE-Module for Drupal 6.x needs TinyMCE 3.x
2. ImageAssist for Drupal 6.x needs TinyMCE 2.x

Which version is the temporary solution for? d5 or d6?
TinyMCE 3 works perfectly with Wysiwyg.

But where would I place the drupalimage folder anyway, and which file would need to be edited to make Wysiwyg realize there is a new plugin for TinyMCE3 ?

I believe that this thread was taken over by sun's posted fix to get Image Assist and TinyMCE 3 working with Wysiwyg API on Drupal 5.x. The way I read these posts, in this thread, I wouldn't expect it to work in Drupal 6.x as well. If you want to pursue the fix for Drupal 6.x, focus your reading on the posts before that patch was put up. Read carefully.

Scott,

@sun, thanks for your work on this.

The patch works great with FF3, but with IE6/7, the toolbar fails to load. Unfortunately, IE7's crappy javascript debugging capabilities don't make it apparent how I can copy and paste the errors here. Anyway you can look into this or at least confirm that you are seeing what I'm seeing?

I'm getting the failure on IE7 too. Only when the img_assist button is enabled in the tinymce profile. Using latest dev version of wysiywg module, patched version of img_assist, latest version of tinymce, Drupal6.6.

Is the javascript debugger on IE8 any good? Tried a bit of hacking around with IE7 but couldn't find the problem so far.

By when (more or less, I mean is it a matter of days, weeks, months or years) will the combination D6.x, tinyMCE 3.x, tinyMCE 2.x be supported?

I'm asking for a reason... What I currently see from tinyMCE 2.x is that it it is lousy, such that a person who does not know HTML and who is not capabable of constantly reediting the badly generated HTML manually, does not get really far. And Drupal should allow non html trained persons to edit on the website van a tool such as tineyMCE.

In my tinyMCE 2.x based editor, I have added some class which the webmaster of my website can use via the 'Styles' dropdown box in the editor. In fact, I try to limit the number of buttons that I present to the user. Instead, I define all the styles in a .css file and ask the webmaster to use the 'styles' button. The classes in the .css file are like 'title', 'subtitle', etc, but the editor will generate html where and

tags get nested and mess up the classes I intend the webmaster to use.

Either tinyMCE3.x offers a solution for this, or in case not, then what I'm I misunderstanding in this mechanism, shouldn't I define my own css file to become used in the 'Styles' button of the editor?

@myDRU: Please do not hi-hack issues with completely unrelated issues. This issue is about implementing TinyMCE 3.x/Wysiwyg API support for Image Assist. That has nothing to do with any inline/CSS styles or whatever other configuration your editor may support.

@Sun: In fact, my real question is 'when will the combination D6.x, tinyMCE 3.x, tinyMCE 2.x be supported'?
To which place within the Drupal community should I post the remainder of the message?

Attached patch should work for 6.x-2.x. However, I didn't test it.
The resulting file layout is the same as mentioned in #27.

Don't forget to copy drupalimage/images/drupalimage.gif into plugins/tinymce/img/img_assist.gif

It doesn't seem to be working for me. It gives an error saying TinyMCE not defined in en.js . This is in IE8 beta 2 running under Windows Server 2003 though, so maybe it does work in IE7. I'll try to test it over the weekend.

Tested on IE6 and get the same behaviour. White screen, and if you view source there is a script tag linking to the en.js file.

I can use the 'Add image' link under the textarea if I hardcode $editor = 'tinymce'; after $editor = arg(2) ? arg(2) : 'textarea'; in img_assist_loader in img_assist.module. I think this works in both 5.x-2.x and 6.x-2.x versions of img_assist, so at least there is a way to get TinyMCE3 working with img_assist now if you need to. Which rocks.

Should also mention that I think the img_assist-DRUPAL-6--2.t3.patch breaks ajax uploads. Not sure how, I've gone back to using the Nov4th 6.x-2.x-dev of img_assist, with my little hack above, and that seems to be working for what I need.

I get this error when I am running TinyMCE 3 with Wysiwyg (Latest Dev), and img_assist (Latest Dev):

Error: tinyMCE.loadPlugin is not a function
Source File: http://www.test.com/sites/all/modules/wysiwyg/editors/js/tinymce-2.js?D
Line: 25

I assume that is why img_assist is showing up as an available plugin, but not showing up in the editor.

Useful links:
http://wiki.moxiecode.com/index.php/TinyMCE:Create_plugin/3.x
http://wiki.moxiecode.com/index.php/TinyMCE:Migration_guide

From the api, there are the only Plugin classes available:
http://wiki.moxiecode.com/index.php/TinyMCE:API/tinymce.Plugin
http://wiki.moxiecode.com/index.php/TinyMCE:API/tinymce.PluginManager

Hope this helps...

Almost forgot...

subscribe

This is still a feature request, not a report of an existing bug in IA.

@sun: I really admire the efforts you put into this and the Wysiwyg API and I wish I could have been around and helped out a lot more. You're taking on a big challenge, but it will be a huge win for all of us once it all lands. So anyone who wants to see these things materialize should do a review of #319363: Rewrite editor plugin API and help out with Wysiwyg API work in general. It seems a little bit like a waste of your time to work on new IA features until it can properly integrate with Wysiwyg API, doesn't it?

Yes, we are in a very unfortunate situation currently. Image Assist 2.x itself works fine with Wysiwyg API + TinyMCE 2.x. However, TinyMCE 2.x is pretty outdated, and I wouldn't want to keep Image Assist based on this old version. The goal for Image Assist 2.0 should be support for TinyMCE 3.x at least. But given the amount of users who work with FCKeditor and other editors, the ultimate goal for the next major stable version should really be a complete Wysiwyg API integration instead of an integration with a particular editor.

If we would commit a revised version of this patch, users of TinyMCE 2.x would start to cry. If we don't, users of TinyMCE 3.x cry. Only Wysiwyg API, i.e. #319363: Rewrite editor plugin API, will make it possible to use Image Assist with any editor. However, the new plugin API still needs a lot of work to make complex plugins like Image Assist possible.

And that's not even all - to make Image Assist compatible to Wysiwyg's new plugin API, the complete IFRAME approach of Image Assist for the popup window needs to be rewritten (ajaxified), so it can work inside of the new editor plugin framework. This will lead to major changes in Image Assist, which could even mean that Image Assist will no longer work without Wysiwyg API (because Image Assist's button, which appears when using no editor, is actually a pseudo-editor button).

To be honest, I am not sure whether it is a good idea to put all of this into 2.x. The more I think about it and the more time all of the work needs, the more I tend to release 2.x with TinyMCE 3 support and other nifty features, and shift further development directly into a new 3.x branch, in which we can rewrite the whole module. I'd like to discuss this with you, zoo33, if you can.

When you say "release 2.x with TinyMCE 3 support", do you mean supporting the TinyMCE module with v3, or is there a workable solution for v3 with Wysiwyg API? Sorry, this isn't all clear to me from reading through the issue.

I think you're right that we should probably release the 2.x branch soon, if there is a working solution for TinyMCE. Since the work with Wysiwyg API will take a while as you describe it, it would probably be better to create a new branch and work on that at a manageable pace. There's the pain of supporting multiple branches of course, but it might be worth it after all.

The Drupal TinyMCE module is abandoned (see project page) and users are pointed to Wysiwyg API instead. Wysiwyg supports TinyMCE 2.x and 3.x flawlessly (as well as other editors).

Managing multiple branches is not a pain, at least for me ;) I'd be fine with proceeding this way:

Image Assist 2.x: compatible with Wysiwyg API 0.5+ and TinyMCE 3.x; but NO support for TinyMCE 2.x.
Image Assist 3.x: compatible with Wysiwyg API + #319363: Rewrite editor plugin API and any editor (and version) that supports so called "Drupal plugins". Most probably we'll go ahead and integrate Inline API here, too.

The only drawback I can think of is that Image Assist 2.x will become incompatible to Wysiwyg when the new Wysiwyg plugin API is done. However, we could also proceed similarly with Wysiwyg API as well as Inline API? I.e.

Image Assist 2.x: compatible with Wysiwyg API 0.x and TinyMCE 3.x; no support for TinyMCE 2.x.
Image Assist 3.x: compatible with Wysiwyg API 1.x and Inline API 2.x.

How sounds that? This way, we could do some real agile development in all three modules, but also provide official releases for users who do not want to use devel snapshots.

I would definitely need help to make those relationships crystal-clear on the project page to prevent users from downloading incompatible module versions.

Another idea - we could even use 3.x for all three modules to make the relationship even more clear?

Image Assist 2.x: compatible with Wysiwyg API 0.x and TinyMCE editor 3.x; no support for TinyMCE editor 2.x.
Image Assist 3.x: compatible with Wysiwyg API 3.x and Inline API 3.x.

I say go. Branches branches branches!

About using 3.x for all modules: might be convenient, but we can probably not count on all three modules to stay in sync version-wise in the long run – they're different modules after all, especially IA. And people might wonder where they can find Inline API 2.x etc. Either way is fine with me.

@sun:
When you say you propose to have "Image Assist 2.x: compatible with Wysiwyg API 0.x and TinyMCE editor 3.x; no support for TinyMCE editor 2.x."

Does this mean that those who currently built sites with "Img Assist 2.x + Wysiwyg API 1.x dev + Tiny MCE 2.x" will be able to up and downgrade smoothly to "Image Assist 2.x + Wysiwyg API 0.x +TinyMCE editor 3.x"?

@myDRU: No, they can only upgrade. Actually, when this patch will be committed and users upgrade to a new version/snapshot of Image Assist 2.x, they effectively have to replace TinyMCE 2.x with TinyMCE 3.x in Wysiwyg API to use Image Assist. That is what I tried to explain in #50 ("either way, someone will cry").

Only those who would like to help in development and testing could directly upgrade to Image Assist 3.x + Wysiwyg API 1.x to use any client-side editor (and version).

My view is: let's go for the future image assist along with TinyMCE 3.x! Document well that people do need to upgrade and they will not cry.

Committed a slightly modified version of my patch in #42 to 6.x-2.x and HEAD.

Changing title accordingly.

This effectively means that Image Assist 2.x is no longer compatible to TinyMCE 2, but TinyMCE 3 instead. Of course, Wysiwyg API was and still is required for TinyMCE 3 integration.

The packaging scripts will run within the next 12 hours.

Developer note:
6.x-2.x will be made as stable as possible and released (hopefully) soon. Further development regarding rewriting Image Assist's interface, popup window, and Wysiwyg's new plugin API will happen in HEAD (i.e. 6.x-3.x, once the old HEAD release node has been fixed).

Users interested in helping out and testing the greatest and latest should consider to download and update to 6.x-3.x, once that will be available from the project page.

Let me ask a question.

Does this mean that with the latest dev version of Image Assist that support for FCKeditor is gone? Or do I need to get Wysiwyg plugin to make things work together?

Honestly: I have no idea. The maintainers of the Drupal FCKeditor module implemented a custom solution for Image Assist integration (which requires to copy a JavaScript file from the fckeditor module folder to img_assist's). Whether that still works or not needs to be tested.

Actually, they promised to work on the FCKeditor support in Wysiwyg API a long time ago and told me to do not work on it on my own, but nothing happened until now. If FCKeditor was fully supported via Wysiwyg API already, this would be no-brainer now. And, yes, I am a bit disappointed about this situation...

It was requested in IRC that this should be backported to 5.x-2.x as well.

First iteration - direct sync from 6.x-2.x without testing.

This patch works from my testing. I need just one confirmation to commit it.

Please bear in mind that you need to *completely* clear your browser's cache after applying this patch, since TinyMCE plugins are loaded deferred. To make this sure, clear your browser's cache, and *restart* it afterwards.

Applied the patch, after enabling the button on WYSIWYG's config-page it is now visible. However, there is still a number of problems:
- inserted images are deleted after pressing submit/preview
- I need to activate the button for "filtered HTML"-pages to be able to see it on "full html"

My config:
- Firefox 3.0.5 on OSX 10.4.11
- Drupal 5.14
- tinymce 3.2 on wysiwyg 5.x-0.5

@rolandu: This means that you did not enable Image Assist's input filter for the input format that has the wysiwyg profile with the Image Assist plugin associated.

Meh. Those bastards removed the "each" function that was available in TinyMCE 3.1.x.

The patch posted in comment #66 works good for me.

Tried adding / editing images using different users.

Other Modules Installed:
Drupal 5.14
Image 5.x-2.0-alpha3
Views 5.x-1.6
Wysiwyg 5.x-1.x-dev (with TinyMCE 3.2.1.1)

Thanks for testing!

Committed to 5.x-2.x. A new development snapshot will be available within the next 12 hours.

Also committed the fix for the "each undefined" error with latest TinyMCE 3.x by replacing each with jQuery.each() to 6.x-2.x. God bless jQuery!

How about the 6x branch?

See #61, it was already committed to 6.x-2.x.

I'm confused: should I be able to use Drupal 6.8, img_assist 6x.2.x-dev (2008-Dec-27), wysiwyg 6.x-0.5, and TinyMCE 3.2.1.1 without any modifications and get a fully-functional DrupalImage button on the TinyMCE editor?

I see the option to add the Image Assist button in TinyMCE configuration page, but it does not appear in the editor when editing nodes.

Just want to know if I should be seeing this or not. Thanks!

Yes, that should work. However, you should use the latest development snapshot of Wysiwyg API as well.

I see that the answer is "Yes, it works!"

I just had to re-check the Image Assist button on the TinyMCE config page after upgrading everything.

Thanks for your hard work.

Hi,

I wonder is there si any clear explanation on how to get a browse button to add a picture in TinyMce ?

I tried everything and can't make it work.

I can't find the Image Assist button on the TinyMCE config page.

Thanks for help.

Make sure you have the latest wysiwyg, tinymce, image, and img_assist modules enabled. Go into WYSIWYG TinyMCE profile(s) and under "Buttons and Plugins" you should see Image Assist checkbox at the very bottom left (not in alphabetical order with the rest).

Hope this helps,