TinyMCE & 2.1 Community

[eyestreet]

The tinymce configurations that worked pre 2.1 do not work with 2.1 community.  Can someone please let us know what has changed?

I have tried to even do a simple modification to include the code or html view, but the changes to the theme_advanced_buttons1: do not seem to function.

I heard that at some point in 2.1 or beyond there would be the ability to specify which configuration to use?  Is this the case, and if so how do I specify this in my form?

-D

[kvc]

2.1.0 Community RC1 introduced supported customization of the TinyMCE toolbar.  You can create define different types of TinyMCE and the formatting controls they display, and within your form have different TinyMCE instances used on different element (for example, maybe limiting an abstract to only enable BOLD and in-line LINKS, but a main body page a plethora of options.

The new configs are specified in web-client-config-wcm.xml.

Here's a sample:

         <xforms>
           <widget xforms-type="xf:group" 
                   appearance="minimal" 
                   javascript-class-name="alfresco.xforms.HGroup"/>
           <widget xforms-type="xf:group" 
                   javascript-class-name="alfresco.xforms.VGroup"/>
           <widget xforms-type="xf:repeat" 
                   javascript-class-name="alfresco.xforms.Repeat"/>
           <widget xforms-type="xf:textarea"
                   appearance="minimal"
                   javascript-class-name="alfresco.xforms.PlainTextEditor"/>
           <widget xforms-type="xf:textarea"
                   javascript-class-name="alfresco.xforms.RichTextEditor">
             <param name="theme_advanced_buttons1">bold,italic,underline,separator,forecolor,backcolor,separator,link,unlink,image</param>
           </widget>
           <widget xforms-type="xf:textarea"
                   appearance="full"
                   javascript-class-name="alfresco.xforms.RichTextEditor">
             <param name="theme_advanced_buttons1">bold,italic,underline,strikethrough,separator,fontselect,fontsizeselect</param>
             <param name="theme_advanced_buttons2">link,unlink,image,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,separator,undo,redo,separator,forecolor,backcolor</param>
             <param name="height">400</param>
           </widget>
           <widget xforms-type="xf:upload" javascript-class-name="alfresco.xforms.FilePicker"/>
           <widget xforms-type="xf:range" javascript-class-name="alfresco.xforms.NumericalRange"/>
           <widget xforms-type="xf:input" 
                   xml-schema-type="date"
                   javascript-class-name="alfresco.xforms.DatePicker"/>
           <widget xforms-type="xf:input"
                   xml-schema-type="time"
                   javascript-class-name="alfresco.xforms.TimePicker"/>
           <widget xforms-type="xf:input"
                   xml-schema-type="gDay"
                   javascript-class-name="alfresco.xforms.DayPicker"/>
           <widget xforms-type="xf:input"
                   xml-schema-type="gMonth"
                   javascript-class-name="alfresco.xforms.MonthPicker"/>
           <widget xforms-type="xf:input"
                   xml-schema-type="gYear"
                   javascript-class-name="alfresco.xforms.YearPicker"/>
           <widget xforms-type="xf:input"
                   xml-schema-type="gMonthDay"
                   javascript-class-name="alfresco.xforms.MonthDayPicker"/>
           <widget xforms-type="xf:input"
                   xml-schema-type="gYearMonth"
                   javascript-class-name="alfresco.xforms.YearMonthPicker"/>
           <widget xforms-type="xf:input"
                   xml-schema-type="dateTime"
                   javascript-class-name="alfresco.xforms.DateTimePicker"/>
           <widget xforms-type="xf:input"
                   javascript-class-name="alfresco.xforms.TextField"/>
           <widget xforms-type="xf:select1"
                   xml-schema-type="boolean"
                   javascript-class-name="alfresco.xforms.Checkbox"/>
           <widget xforms-type="xf:select1"
                   appearance="full"
                   javascript-class-name="alfresco.xforms.RadioSelect1"/>
           <widget xforms-type="xf:select1"
                   javascript-class-name="alfresco.xforms.ComboboxSelect1"/>
           <widget xforms-type="xf:select"
                   appearance="full"
                   javascript-class-name="alfresco.xforms.CheckboxSelect"/>
           <widget xforms-type="xf:select"
                   javascript-class-name="alfresco.xforms.ListSelect"/>
           <widget xforms-type="xf:submit"
                   javascript-class-name="alfresco.xforms.Submit"/>
           <widget xforms-type="xf:trigger"
                   javascript-class-name="alfresco.xforms.Trigger"/>
           <widget xforms-type="xf:switch"
                   javascript-class-name="alfresco.xforms.SwitchGroup"/>
           <widget xforms-type="xf:case"
                   javascript-class-name="alfresco.xforms.CaseGroup"/>
           <widget xforms-type="chiba:data"/>
           <widget xforms-type="xf:label"/>
           <widget xforms-type="xf:alert"/>
         </xforms>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[eyestreet]

Thanks for the tip on where the config was.  Couple more questions…

1.  I tried the below to add the table controls but that does not appear to work?  Basically I needed to enable the plugins for table, and then add the table to the advanced buttons1.  Is it still possible to enable plugins?

2.  Is it possible to use a web-client-config-wcm-custom.xml and put it in the shared directory? So that it does not get blown away if you add another war file.  If so how do we enable this?
  <xforms>
           <widget xforms-type="xf:group"
                   appearance="minimal"
                   javascript-class-name="alfresco.xforms.HGroup"/>
           <widget xforms-type="xf:group"
                   javascript-class-name="alfresco.xforms.VGroup"/>
           <widget xforms-type="xf:repeat"
                   javascript-class-name="alfresco.xforms.Repeat"/>
           <widget xforms-type="xf:textarea"
                   appearance="minimal"
                   javascript-class-name="alfresco.xforms.PlainTextEditor"/>
           <widget xforms-type="xf:textarea"
                   javascript-class-name="alfresco.xforms.RichTextEditor">
  <param name="theme">advanced</param>
             <param name="mode">exact</param>
             <param name="force_p_newlines">false</param>
             <param name="encoding">UTF-8</param>
             <param name="entity_encoding">numeric</param>
             <param name="plugins">table</param>
             <param name="apply_source_formatting">true</param>
             <param name="theme_advanced_buttons1">tablecontrols,seperator,code,bold,italic,underline,separator,forecolor,backcolor,separator,link,unlink,image</param>
             <param name="theme_advanced_buttons2">link,unlink,image,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,separator,undo,redo,separator,forecolor,backcolor</param>
           </widget>

[arielb]

i don't have support for enabling plugins to tinymce at the moment - if you file an issue it should be quite easy to address for 2.1 (please include all other configuration options you'd like to have access to and i'll see what can be done).

the configuration file should behave pretty much like all other web-client configs - so in that case, i'd assume the answer is yes - but i've not tried it myself.

[eyestreet]

Thanks I will open something on this…

For the forums in case anyone else can think of other thngs that I have not…. I believe that we need the following:

1. Ability to set any of the tinymce configurations such as force <p> for new lines… I have had different clients need different things in that.  So any of those should be included via the param tag.

2.  Ability to have and use the plugins. There is a jira issue on utilizing more plugins than just the table.  Tinymce has a lot of plugins, but the ones that I see a real need for at most clients are tables, cleanup, flash, iespell, searchreplace, style and paste.  I would think you would want to give the ability to enable any plugin as well.  Since the tool is very configurable.

It would also be nice if Alfresco would ship with a few more of the plugins by default.

Take care
David
P.S. I posted some screen shots of 2.1 if anyone has not had a chance to check it out yet: http://www.unrestricted-cms.blogspot.com/

[edgar]

Hi,

Tinymce has a lot of plugins, but the ones that I see a real need for at most clients are tables, cleanup, flash, iespell, searchreplace, style and paste.

Is something like 'cleanup' a plugin? I thought the 'cleanup' button was standard in TinyMCE. I do not see a cleanup plugin in this example for example.

It is possible to use the "invalid_elements" parameter for TinyMCE? I have the following configuration:

<widget xforms-type="xf:textarea" javascript-class-name="alfresco.xforms.RichTextEditor">
  <param name="theme_advanced_buttons1">bold,italic,underline,strikethrough,
separator,link,unlink,image,separator,undo,redo</param>
  <param name="theme_advanced_buttons2">cut,copy,paste,pastetext,pasteword,separator,
bullist,numlist,formatselect,charmap,separator,cleanup,help,code</param>
  <param name="invalid_elements">font,table,bold,hr</param>
</widget>
‍‍‍‍‍‍‍‍‍

I want to exclude a number of HTML elements that we do not want to see in the rich text fields using the 'invalid_elements' parameter but it does not seem to have any effect. Any ideas?

cheers,

Edgar

[edgar]

I tried adding the 'paste' plugin myself by adding the plugin to the directory:

c:\Alfresco\tomcat\webapps\alfresco\scripts\tiny_mce\plugins\
‍‍‍

and by enabling the plugin in the 'xforms.js' file as follows:

tinyMCE.init({
  theme: "advanced",
  mode: "exact",
  plugins : "paste",
..
‍‍‍‍‍‍‍

and by adding the required buttons in the TinyMCE toolbar using the settings in web-client-config-wcm.xml as I posted earlier.

I would have thought this would get the plugin working but apparently it is not that simple since the buttons do not show up. 😉

-
Edgar

[kvc]

Edgar -


This issue is filed in our issues tracking DB:

http://issues.alfresco.com/browse/WCM-598

We plan a fix for 2.1 Enterprise.  If you've any comments to add to this open issues (i.e., things you want to ensure we take into account), please file.

The goal was to open up greater configurability of TinyMCE.  Looks like we lost in the process some of the default plug-ins.  This will be resolved shortly.


Kevin

[naveenkumar]

Check this link..
http://drupal.org/node/78033
how to update tinyMCE editor in alfresco??


Thanks
Naveen

[kvc]

Naveen:


When creating a link within a TinyMCE field, we provide a Browse Repository link to link to an existing Alfresco asset.  We do this by calling up our file browser widget which, if the asset doesn't already exist in Alfresco, allows you to upload an asset from your desktop to any directory within your current web project.

For 2.1.0 Enterprise, we are looking at enhancing this file browser widget to be restricted (among other things) to specific mimetypes, so that a user for example can only link to an image or a pdf.  

Would this accomplish what you are looking for?


Kevin