TinyMCE & HTML Code View

[dmusser]

Thanks to help  from Alfresco (Ariel),  I though it would be usefule to share the resulting solution with the ALfresco WCM community.  With the configuration we were able to finalize our WCM forms.  The forms were using TinyMCE but the default configuration was missing a few items that we needed in order to launch our web site with Alfresco.

The missing element was the ability to edit the HTML Code directly.

This was accomplished by modifying the xforms.js file that is located in the:

\SVNROOT\root\projects\web-client\source\web\scripts\ajax directory.

If you modify the line:

theme_advanced_buttons1: "bold,italic,underline,strikethrough,separator,fontselect,fontsizeselect…
to include "code"

theme_advanced_buttons1: "bold,italic,underline,strikethrough,separator,fontselect,fontsizeselect,code

You will then see the HTML icon.

When you fill out a form if you click this it opens a new window for working on html directly.

Hopefully this will help someone else as well.

David Musser
dmusser@eyestreet.com

[dmusser]

If you are not building this yourself, and using the Alfresco Beta 2.0 release modify the file:

alfrescohome\tomcat\webapps\alfresco\scripts\ajax\xforms.js

-D

[dnewport]

thanks for the great tip…we are having an odd issue where all the html is combined into 1 big block, losing all the formatting and making managing it impossible…any ideas on what is causing it?

[eyestreet]

I believe I saw this once a while back, and what I believe it turned out to be was how I had not let the page fully load.  If you would like to send me your xform I can take a look to see if I see anything.  Please email me dmusser@eyestreet.com

[eyestreet]

I believe you need to modify your xforms.js.  In
the init section you will need to add 2 lines. 

Please see below.  On my server I had to re-start alfresco, and clear out my browser cache the first time, but a change to something else in the xforms.js showed
up when I re-edited the page.

So you may need to restart alfresco if it does not show up for you.

The 2 lines to add are:

apply_source_formatting: true,
remove_linebreaks: false,

– Sample –

tinyMCE.init({
theme: "advanced",
mode: "exact",
width: -1,
auto_resize: false,

… Add These 2 lines.
apply_source_formatting: true,
remove_linebreaks: false,

The rest of that section for me is fairly basic:

force_p_newlines: false,
encoding: "UTF-8",
add_unload_trigger: false,
add_form_submit_trigger: false,
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_buttons1: "bold,italic,code",
theme_advanced_buttons2:
"link,unlink,image,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,separator,undo,redo,separator,forecolor,backcolor",
theme_advanced_buttons3: ""