This is going to be a process to explain. ;)

Modules/stuff at play:
- WYSIWYG 6.x-2.0
- ImageField 6.x-3.1 (which requires FileField 6.x-3.1)
- FileField Insert 6.x-1.x-dev from ~1 hour ago
- TinyMCE 3.2.5

The TinyMCE image button will let me add external images via URL, and resize them, align them, etc. If I want to edit the image, I click on it, the image button highlights as a "relationship" is formed, and I can click the image button and go to town.

However, I need to upload my own images, and am using FileField Insert to do that. All it does is stick a "Send to textarea" button on file/imagefields, which then inserts it to the textarea as an img tag for you. This automatically appears as a nice image in TinyMCE.

However, in the process, this img tag is getting a class="mceItem" added to it, and this causes the "relationship" not to appear, and clicking the image button does nothing.

Nate found that going into Firebug and removing the class="mceItem" will cause the "relationship" to appear again, and make the image editable. I grepped and this seems to be coming from tinymce-3.js in WYSIWYG API.

Is this... on purpose? Any ideas what's going on?

Comments

quicksketch’s picture

quicksketch
he/him
commented

I found the reason for this problem, but not really a solution...

The insert method for tinymce-3.js (around line 199) is the following:

  insert: function(content) {
    content = this.prepareContent(content);
    tinyMCE.execInstanceCommand(this.field, 'mceInsertContent', false, content);
  }

The this.prepareContent function then adds "mceItem" as a class to all images. The reason being this is necessary for the "break" plugin to work correctly (since you don't want a user changing the image on the break placeholder). I think it'd probably be best if the "prepareContent" method could be separated from the "insert" method, since in this case we definitely want images to be editable.

twod’s picture

twod
Primary language Swedish
Location Sweden
commented
Status: Active » Closed (duplicate)

This has already been fixed in the 2.x-dev version, see #400482: editor.instance.prepareContent() breaks editor's native markup handling.
The new approach to this problem delegates the responsibility of "tagging" placeholder elements to the Drupal plugins themselves, much like native editor plugins for say TinyMCE knows when to apply the mceItem class when they insert content. In this case we're using a custom tag which is translated by the editor implementation, if at all required.

Thank you for reporting and debugging this, and the large amount of info provided!

boztek’s picture

boztek commented

I still have problems but have moved my comment to the duplicate issue.

minneapolisdan’s picture

minneapolisdan commented

Thanks for identifying this, I wasn't sure how to explain it myself. I didn't have that problem when using TinyMCE in another CMS, so I couldn't figure out what was going on, why users couldn't select images after they inserted them in the text editor. Now I know, and can fix it until the next version comes out.