cancel
Showing results for 
Search instead for 
Did you mean: 

Alfresco Share TinyMCE Customization?

muramasa
Champ in-the-making
Champ in-the-making
So I'm running Alfresco share 5.0.d on CentOS 6.6. I'm just getting started with Alfresco share to organize my personal documents. I typically store most of my documents in a HTML file with images inline (Base64 URI is what this is called I believe) Unfortunately though after uploading these into Share and trying to edit them I find that the images disappear. Upon further research this seems to be an issue (feature?) with TinyMCE. Upon further research I found an option in TinyMCE called "paste_data_images" (http://www.tinymce.com/wiki.php/ConfigurationSmiley Tongueaste_data_images) The thing I've been struggling with is finding where to put this option so it can be turned on in Share. It seems like this should go in /opt/alfresco-5.0.d/tomcat/webapps/share/modules/editors/tiny_mce.js . After looking through the file I tried adding "config.paste_data_images = true;" and restarting alfresco it didn't seem to change anything.

So I guess my questions are..

1) Am I editing the right file? it seems like (/opt/alfresco-5.0.d/tomcat/webapps/share/modules/editors/tiny_mce.js) should be the file that controls how Share calls TinyMCE. I'm definitely not a coder so if I missed something obvious any help is appreciated.

2)How do I modify this file so I can add images inline in my html documents? It seems like I'm headed the right direction but am definitely missing something.

3)If It isn't possible to add images inline in the TinyMCE and not have it strip existing images out. Is it possible for me to disable the Inline Editor system wide? That way I can avoid someone inadvertently removing all the images from a document.

I appreciate any assistance and will update this post if I find anything on my own. Thanks
3 REPLIES 3

muramasa
Champ in-the-making
Champ in-the-making
So I decided to take a fresh look at this and found a possible option.

In my searching I stumbled on this post by wabson.
http://forums.alfresco.com/comment/71828#comment-71828

"Peter Löfgren has contributed a extension for Alfresco Share that integrates CKEditor into standard create/edit forms in Share. You can find more information on it, including how to tailor it to your own requirements, on the project page, as well as on Peter's blog.

http://code.google.com/p/share-extras/wiki/CKEditorFormControl
http://loftux.com/2011/05/11/ckeditor-plugin-for-alfresco-share-forms/

Thanks,
Will."

Sounds perfect replace the alfresco modified tinymce with ckeditor. I looked up if it has bas64 support and found a plugin.
http://ckeditor.com/addon/base64image

Unfortunately the module seems to not be up to date and hasn't been updated in 4 years. looks like the last version it worked with was 4.2.x. My understanding is a lot has changed since then. The github page has a current report of the plug in not working in 5.0.

Rather than keep banging my head against this without any clues as to how alfresco is actually doing this it might make more sense for me to explore other options. Alfresco is still my first choice but I've kind of hit a dead end. Will keep an eye on this thread in case some one replies.

rjohnson
Star Contributor
Star Contributor
The inline edit form uses some javascript which renders the appropriate editor for the content mimetype. As yours is HTML it will render tinyMCE using the standard set of parameters.

Which are in fact

   editorParameters:
   {
      height: 100,
      width: 400,
      inline_styles: false,
      convert_fonts_to_spans: false,
      theme: 'advanced',
      theme_advanced_toolbar_location: "top",
      theme_advanced_toolbar_align: "left",
      theme_advanced_statusbar_location: "bottom",
      theme_advanced_path: false,
      language: "en",
      forced_root_block : false,
      force_p_newlines : false,
      plugins: "table",
      theme_advanced_resizing: true,
      theme_advanced_buttons1_add: "fontselect,fontsizeselect",
      theme_advanced_buttons2_add: "separator,forecolor",
      theme_advanced_buttons3_add_before: "tablecontrols,separator",
      theme_advanced_disable: "styleselect",
      valid_children : "+body[style]",
      extended_valid_elements: "a[href|target|name|style],font[face|size|color|style],span[id|class|align|style],meta
  • ,style[type]"
  •    }

    There is a form definition for inline edit in share-form-config and you need to ovefride this and force your own editorparameters in share-custom-config.xml

    You will use the same default controls but add a <control-param name="editorParameters"> tag and enclose your custom edit options in that

    nunocardoso
    Champ in-the-making
    Champ in-the-making
    That block of TinyMCE code doesn't work for TinyMCE 4 in Alfresco 5.