Last updated December 31, 2008. Created by LeeHunter on February 21, 2007.
Edited by sepeck, sillygwailo, Senpai, abramo. Log in to edit this page.

"Crawl before you may walk, walk before you may run"

How to enable CCK text fields to use the TinyMCE text editor, in 10 easy steps (in an environment with "Categories" module installed, but also valid for any other environment).

This is a basic, off-the-shelf, step-by-step roadmap of how to set up a text editor that will function in your CCK text fields. It refers to a Drupal 5 installation with CCK and TinyMCE (tinymce-5.x-1.x-dev) installed. It provides a basic configuration to start you off with using CCK with TinyMCE. From that point on you may play around and determine what configuration suits you best. But at least you will have a starting point. This is not a sophisticated recipe, just something that will set you off. What is most important, it works.

  1. Check that CCK fields within your content type function properly, even if this means that you get a continuous long line of text without any formatting (i.e. without breaks, paragraphs or anything else you would normally expect, even of Notepad). Pick a content type for experimentation, say YourContentType, at: Administer » Content management » Content types » YourContentType.
  2. Go to: YourContentType » Manage Fields and pick YourTextField » Configure. Check that field Rows has a value greater than 1, so that you may really have a meaningful text area, say 20. Your new text editor will only apply to text fields with over 1 row, so that all your single-row text fields remain unaffected: no text editor there. Data Settings: Required: leave this unchecked for the moment, for testing purposes. Text Processing: check Filtered text (user selects input format), so that your text editor may take over. Now Save Field settings, and go to YourContentType » Display Fields » YourTextFileld and set Teaser and Full at Default - submit to save configuration.
  3. Install TinyMCE module carefully so that you may do it correctly. Actually, after you unzip the TinyMCE module in the modules folder go immediately and read the very detailed Install.txt file that is provided in the tinymce folder - and follow all instructions carefully. Make sure you also download and unzip the original TinyMCE code in a folder named tinymce within the folder of module tinymce. Detailed instructions on all necessary steps are included in the Install.txt file. In this file, find the section titled Caveats. Read it carefully. Now, read it one more time. Hope you get the point - but, not to worry, we shall do that step by step.
  4. Go to: Administer » Site configuration » Input Formats » Add Input Formats.
    Name: YourInputFormat, Roles: check both anonymous user and authenticated user, Filters: check only Line break converter. Submit (save) your settings. See, YourInputFormat is there in the input formats table, last in line. Now, before we forget, check YourInputFormat *and* submit (Set Default format). Now, click Configure and make certain that what you see is what you entered before - if not, edit. So far, so good.
  5. Small break for a cup of coffee, check if the plants in the garden are doing fine, relax, etc.
  6. Back to the task again, in fine spirits.
    Go to: Administer » Site configuration » TinyMCE Settings. Read the instructions carefully. In the last line there is a link on the word "permissions" - click on it by opening a new window and you will land in Access Control. Go down the list to section "tinymce module" and check "access tinymce" both for "anonymous user" and "authenticated user" - check also "administer tinymce" for "authenticated user". Save Permissions. Close window.
  7. Back now to Administer » Site configuration » TinyMCE settings » Create new profile:
  • Pick Basic setup: Profile name: YourProfileName, Roles allowed to use this profile: check both, Default state: True, Allow users to choose default: False, Show disable/enable rich text editor toggle: False, Language: en, Safari browser warning: False.
  • Pick Visibility. Show tinymce on specific pages: Show on only the listed pages, Pages: leave as is.
  • Pick Buttons & Plugins. Check only for an absolutely basic configuration, for the moment - later you may do more: bold, italics, underline, justify left, bullets, cut, copy, paste.
  • Pick Editor Appearance. Check: Toolbar location: top, Toolbar alignment: left, Path location: none, Enable resizing button: false, Block formats: leave as is.
  • Pick Cleanup and Output. Verify HTML: true, Preformatted: true, Convert tags to styles: true.
  • Pick CSS. Editor CSS: use theme css. Leave the rest blank.
  • Click: Update Profile
  • Go to Administer » Content management » Categories » Containers » YourContainer » Edit » Input Format. Hello, there, last in line is YourInputFormat smiling at you. Success. Check it. Submit.
  • Go to your category tree (menubar) and pick YourCategory » Edit » Input Format : check YourInputFormat. Submit. Do the same down the category tree.
  • And finally: Go to: Create Content » YourContentType » Hello, all your (large) text fields are now TinyMCE editor enabled! Congratulations, you have followed instructions to the letter! And here is now your reward: copy / paste some formatted text from some browser window, select a category that has been enabled for YourInputFormat (as described above) - Submit. Wow! see, a nicely formatted text. You have arrived.
  • Now, wasn't that easy!

    "With patience and calm,
    the donkey may climb the palm"

    Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

    Comments

    Hi,
    At the 8th step, you talk about an "Administer » Content management » Categories » Containers » YourContainer » Edit » Input Format" path. But I don't find any "containers" indication in Categories pages.

    Thank you for your help.

    R

    You need, as told at the beginning of the article the Category module enabled http://drupal.org/project/category
    Happy 2008!

    When asigning visibility settings to certain pages, watch out if you have i18n installed, you will have to prepend the paths listed here with your lang codes.
    e.g. instead of node/* put en/node* es/node/* etc.
    By the way, Containers are not needed, just make sure user has your input format as a default when editing the text.

    Sergio Caridad - www.artefantastico.com

    Seems to work for FCKedit too...

    i have installed tinymic editor , but its not working, so plz suggest me how to enable it.