Ticket #1160 (closed enhancement: fixed)

Opened 14 years ago

Last modified 11 years ago

Add support for TinyMCE, a Javascript HTML WYSIWYG editor

Reported by: madarche Owned by: madarche
Priority: P1 Milestone: CPS 3.5.0
Component: CPSSchemas Version: TRUNK
Severity: critical Keywords: accessibility

Description (last modified by madarche) (diff)

Add support for  TinyMCE, a Javascript HTML WYSIWYG editor.

Stefano Schintu pointed out that TinyMCE is even better than FCKeditor which was recently added in CPS, read #502.

TinyMCE has:

  • Safari and Opera support along as Gecko and MSIE support
  • conformance to Authoring Tool Accessibility Guidelines 2.0 (ATAG) - will very soon


  • a plugin to check and correct the accessibility of the produced content

Supporting TinyMCE in the long run seems wiser than supporting FCKeditor

Change History

comment:1 Changed 14 years ago by madarche

Here are some more detailed information.

From the developers of TinyMCE:

"We are currently working with some canadian folks on making TinyMCE more accessible. We think that this work will be finished for the 2.0.1 version of TinyMCE so it's one final version away. But the current 2.0RC3 is somewhat accessible, the whole UI is keyboard accessible and there is short keys for moving back and forth between the editor and the toolbar, these isn't that well documented I will try to finish that up for the next version."

The canadian folks in question are the authors of ATutor ( http://www.atutor.ca), a great LCMS written in PHP with accessibility as its first goal. The following are two excerpts from one of their presentation papers:

"development of an authoring tool used to generate accessible Web content is nearing its completion. This Web-based HTML editor will be the first of its kind, conforming with the W3C Authoring Tool Accessibility Guidelines (ATAG) -- a sister specification of WCAG that addresses the authoring of accessible content (a third document is the User Agent Accessibility Guidelines, UAAG). The TinyMCE editor as it is called, is easily integrated into other Web-based applications that generate authored HTML. As such, TinyMCE will become a part of ATutor, ensuring not only that the learning environment itself is accessible, but also ensuring that the content the system generates is fully accessible, as well." "The TinyMCE editor also has a plug-in that allows authors to evaluate their content using the ATRC AChecker Accessibility Verifier. AChecker is the leader in the next generation of accessibility evaluation and repair tools. The primary difference between it and earlier evaluation tools is that AChecker allows authors to make decision about features of their content that a software application would not otherwise be able to make. For example, a machine would not be able to determine whether Alt text included with an image is sufficiently descriptive ensuring that a blind user receives the same information as a sighted user. A human needs to make the decision. Only after all the known issues detected by the checker are corrected, and decisions on potential issues have been addressed, does AChecker confirm that the content is accessible. AChecker is based on the soon to be introduced WAI HTML Test Suite, which will include all accessibility checks from accessibility guidelines worldwide. AChecker can be configured to use any subset of the tests in the suite to produce adapted accessibility reports for use with any of the international guidelines. As a Web service, AChecker uses the XML-based Evaluation and Report Language (EARL) to transmit reports back to the user. These reports can be interpreted by any technology that supports EARL."

comment:2 Changed 14 years ago by madarche

  • Description modified (diff)

comment:3 Changed 14 years ago by madarche

  • Owner changed from fguillaume to madarche

comment:4 Changed 13 years ago by tracguest

ZTinyMCE is a Zope2 product for being able to use the TinyMCE WYSIWYG editor inside Zope.

It works by unpacking the TinyMCE zip file of javascript, HTML and images into Zope in one place and then interface with this by creating multiple configurations (aka. ZTinyMCE Configuration).

Read more at  http://www.fry-it.com/oss/ZTinyMCE

ZTinyMCE is an adaptation of TinyMCE into Zope2. You can read more about TinyMCE here:  http://tinymce.moxiecode.com/

Once installed it consists of two parts:

  • A TinyMCE instance

  • Several TinyMCE Configuration instances

The TinyMCE Configuration instances must be able to find at least one TinyMCE instance. The configuration is basically just a piece of javascript code that starts the editor.

comment:5 Changed 11 years ago by madarche

  • Priority changed from P3 to P1
  • Severity changed from normal to critical
  • Milestone changed from unspecified to CPS 3.5.0

This ticket is now critical because the FCKeditor version used in CPS does not work well with Firefox 3 anymore: links cannot be created anymore.

comment:6 Changed 11 years ago by madarche

  • Status changed from new to closed
  • Resolution set to fixed

Fixed by changeset [53246].

The provided buttons in the HTML editor should be improved and the text area should use more space. But the good news is that the text area is now resizable.

And we should care for previous instances of CPS that still want to use FCKeditor, for example those instances that have custom FCKeditor image upload feature.

At this time the choice of with HTML editor to use is hardcoded in source:CPS3/products/CPSDocument/trunk/skins/cps_document/cpsdocument_edit_form.pt like this:

//var popup_editor_form = 'popup_fckeditor_form';
var popup_editor_form = 'popup_tinymce_form';

I would prefer to have a site wide setting. Where should we set this? As a portal property or rather as a portal_layouts tool property? Any other better idea?

comment:7 Changed 11 years ago by madarche

I'll create a new property on the widget. That's why widget properties are for.

This will also be more flexible and make it possible for example to have some document types with the old HTML editor and some other document types with the new HTML editor. This should ease the upgrade curve for some CPS sites.

comment:8 follow-up: ↓ 17 Changed 11 years ago by madarche

The setting of which HTML editor to use on the Widget through a property has been coded with changeset [53262].

comment:9 Changed 11 years ago by madarche

The case of embedded HTML editor has not been dealt with yet.

comment:10 Changed 11 years ago by madarche

A more complete set of toolbar buttons has been added with changeset [53265].

comment:11 Changed 11 years ago by madarche

It would also be nice to have the TinyMCE window resizing itself to 100% height of the HTML window in which it seats.

Using Prototype JavaScript code like what was done in #1881 seems to be the solution.

Information on how to do this for TinyMCE is described in  http://wiki.moxiecode.com/index.php/TinyMCE:Auto_resize_editor_box but unfortunately it doesn't work (at least with Firefox 3).

There is a forum post that talks about problems to achieve this goal:  http://tinymce.moxiecode.com/punbb/viewtopic.php?id=5169

comment:12 Changed 11 years ago by madarche

Embedded HTML editor support has been added with changeset [53271].

comment:13 Changed 11 years ago by madarche

Added support for easily augment the height of the HTML editor frame with changeset [53272].

comment:14 Changed 11 years ago by madarche

Changeset [53278] added working support for multiple TinyMCE editor windows/frames in a same HTML page.

comment:15 Changed 11 years ago by madarche

With changeset [53281] made tiny_mce.js be loaded only once otherwise multiple TinyMCE frames won't load in a same HTML page with IE. This doesn't happen with Firefox.

This is a ugly fix until we have a better solution.

comment:16 Changed 11 years ago by madarche

Finally added support for i18n of the TinyMCE labels and dialogs with changeset [53284].

comment:17 in reply to: ↑ 8 Changed 11 years ago by gracinet

Replying to madarche:

The setting of which HTML editor to use on the Widget through a property has been coded with changeset [53262].

In which one can see that the two possible values are "tinymce" (default) and "fckeditor" Btw It'd better to use a dropdown menu.

Note: See TracTickets for help on using tickets.