DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

RTE: TinyMCE

Author:Kasper Skårhøj
Created:2002-11-01T00:32:00
Changed:2005-05-02T01:48:38
Author:René Fritz
Email:r.fritz@colorcube.de
Info 3:
Info 4:

RTE: TinyMCE

Extension Key: rte_tinymce

Copyright 2004-2005, René Fritz, <r.fritz@colorcube.de>

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

- a GNU/GPL CMS/Framework available from www.typo3.com

Table of Contents

RTE: TinyMCE 1

Introduction 1

Features 2

Features of the RTE integration 2

To-do 2

Features of the TinyMCE 2

Configuration 3

Toolbar 3

RTE's and Mozilla 3

Developers 3

Known problems 4

Introduction

RTE: TinyMCE is an alternative Rich Text Editor for the TYPO3 backend. It is based on TinyMCE (1.44RC2) and works with IE and Gecko based browser.

This is an alpha release which have many bugs (I bet) and is not very well integrated into TYPO3. This can be seen as a preview release.

img-1 (The grey border around the parenthesis are not a special feature of TinyMCE but a CCS style I find useful. A CSS with that style file is delivered with this editor and used by default.)

Features

Generally TinyMCE seems to be a nice editor. It loads and starts very fast and the developers don't want to have a feature overloaded editor but a clean one. The concept is to give the user as much functions as he needs but not more. Unwanted code will be removed from the content. CSS classes should be used not inline styles. I like it.

Features of the RTE integration

  • Configuration of the toolbar
  • Multilingual

To-do

  • TYPO3 Link chooser
  • TYPO3 File chooser
  • configuration of color chooser
  • configuration of the text classes and fonts
  • ... what else?

Features of the TinyMCE

Please look at http://tinymce.moxiecode.com/

“ TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other CMS systems. “

  • Easy to integrate, takes only two lines of code.
  • Theme and template support.
  • Plugin support.
  • Easy to extend with custom code.
  • Customizable HTML/XHTML 1.0 output. Block invalid elements and force attributes.
  • International language support (Language packs) currently English, Swedish, Italian, German, Czech, Hungarian, Dutch, Finnish, Danish and Arabic and much more.
  • Multiple browser support, currently Mozilla, MSIE and FireFox.

Configuration

Toolbar

The toolbar can be configured in TYPO3 by using the user-manager. The configuration for the toolbar is the same as for the standard RTE – so have a look into the RTE documentation. You can use the normal configuration values like:

cut,copy,paste, formatblock, fontstyle, fontsize, bold, italic, underline, left, center, right, orderedlist, unorderedlist, outdent, indent, line, link, table, image, textcolor

Additionally this RTE supports values from the HTMLArea RTE.

A detailed description needs to be done ...

RTE's and Mozilla

A general problem with the usage of RTE's and Mozilla is the restrictive copy and paste handling. Mozilla gives and error message if you try to paste content into the RTE. But you can configure Mozilla to allow pasting for one or more specific domains (or IP's).

The Htmlarea RTE extension provides a solution with an installable Mozilla Extension. Until this solution is integrated in this extension you might setup Mozilla manually.

I found it very hard to find the right user preferences file which you have to edit, especially if both Mozilla and Firefox are installed. I think the easiest way to change the preferences is with the chromEdit extension. You can get it here: http://cdn.mozdev.org/chromedit/

After installation you have a menu entry under the tools menu called “Edit User Files”. This opens an editor for the different preferences files. Choose user.js and the following code into the box.

img-2

user_pref("capability.policy.policynames", "allowclipboard");
user_pref("capability.policy.allowclipboard.sites", "http://www.example.org http://192.168.9.9");
user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");

As you see you can define some URL's separated by spaces you want to allow pasting for.

Developers

Here are some hints for developers and todo topics.

Feel free add features to the code. You're welcome. Just let me know what you want to do so the work don't will be done twice.

Generally I would like to see a lean implementation. For example spell checking or the Mozilla extension in Htmlarea should be in separate classes so it could be reused in several RTE implementations.

Here's a to-do list:

  • check the button config
  • link and image popup (please not like in Htmlarea with an non- resizeable iframe)
  • implement all configuration options from TYPO3 (colors, classes, ...)
  • Mozilla extension like in Htmlarea
  • spell checker? (see Htmlarea)
  • a very well done default RTE configuration in a separate extension

Known problems

Enough. Send code not bug reports!

img-3 RTE: TinyMCE - 4