By xjm on

I'm trying to figure out a way to help TinyMCE understand the internal: syntax used with pathfilter when it renders images within the editor itself. I need my WSIWYG to WSIWYG fully. :)

I added the function in the pathfilter readme to my theme (to set $init['convert_urls'] = 'false';), so TinyMCE is not goofing up my pathfilter-dependent URLs. I can furthermore insert images by entering the internal:.../image.jpg path just fine; the resulting HTML output from TinyMCE is fine, and the rendered node is fine.

The only problem is that TinyMCE doesn't know how to interpret the internal: bit in order to render the images when I'm actually using it to edit a node. The result is a broken image link in the editor when an image is first inserted (which I could live with) but nothing at all after the node has been saved and re-opened in TinyMCE. (The image tag is still there in the node as it should be; it's just invisible within the editor.)

A solution would be to spit out the appropriate value in some on-the-fly js when the page is loaded (something like var pathfilter_internal_path_prefix = "http://mysite.net/path/";). I could do that just fine, but I don't know how to tell TinyMCE to reinterpret internal: in the image src attribute as that value.

It's a TinyMCE question and not a Drupal one, really, but perhaps someone else has tried to do the same thing already. I've scoured the TinyMCE documentation but not found anything that looks like it would do the trick. I even tried looking in the TinyMCE source JS, but that was a nightmare.

For reference (and perhaps for posterity if I get an answer), here's my post on the TinyMCE forums:
http://tinymce.moxiecode.com/punbb/viewtopic.php?pid=17918#p17918

⋅ Categories: Drupal 4.7.x

Comments

xjm’s picture

xjm
she/her
Primary language English
commented

Er, um, uh... WYSIWYG. :)

=======================
Just another newbie.
XHTML Strict: it's the way to be.
=======================
Feature request: HTML Source Formatting in TinyMCE

xjm’s picture

xjm
she/her
Primary language English
commented

A simpler solution would be for TinyMCE to merely display a filler image or a single block containing text like "IMAGE with path..." If this represented the broken image link, the user could see it and delete it. That's enough of a workaround for me.

=======================
Just another newbie.
XHTML Strict: it's the way to be.
=======================
Feature request: HTML Source Formatting in TinyMCE

harking’s picture

harking commented

I have been working on this issue for a day or two. Here are my ideas for tackling it:

  1. Use a plugin to add event listeners to FCKEditor/TinyMCE to replace any instance of 'internal:' in the source with the base_path() of the site. On save, replace all instances of literal value of base_path() with 'internal:'. The editor will display the images correctly and then on save everything will be the way it needs to be.
    I'm not sure if we need to keep track for instances where a string had base_path originally, and does not need to be translated to 'internal:'
    • Code for FCKEditor Plugin: 
      internal_to_base_path = function( editorInstance ) 
{
    var source = editorInstance.GetHTML();
    var new_source = source.replace( /internal:/, FCKConfig.SiteBasePath );
    editorInstance.SetHTML( new_source );
}
base_path_to_internal = function( ) 
{
    var source = editorInstance.LinkedField.innerHTML
    var new_source = source.replace( FCKConfig.SiteBasePath, 'internal:' );
    editorInstance.LinkedField.innerHTML = new_source; //Updates the field too late. the browser has already captured the value. :(
}
FCK.Events.AttachEvent( 'OnStatusChange', internal_to_base_path );
FCK.Events.AttachEvent( 'OnAfterLinkedFieldUpdate', base_path_to_internal );
    • Code for fckeditor.module, add in fckeditor_process_textarea function:
      $element['#suffix'] .= $js_id.".Config['SiteBasePath'] = '".base_path()."';\n";
  2. Modify pathfilter to add hooks for saving of a node and editing of a node: automatically insert or remove 'internal:'. Working on this now.
    • On save, replace all instances of 'base_path' in links or images with 'internal:'
    • On edit, replace all instances of 'internal:' with 'base_path' of the site.

EDIT: I've submitted a patch to the pathauto module to perform the second operation automatically.