JavaScript WYSIWYG text editors

Question

I'm writing a heavily-customised WordPress CMS for a fishkeeping website. Currently I'm working on the species profiles which consist of a load of small fields (Genus, Species, Diet, Compatibility, etc).

I'd like to use the built-in TinyMCE rich text editor, but WordPress appears to only allow the use of this editor on the large "Post" box, which I'm not using at all.

As such, I'm looking into alternative WYSIWYG editors, but I have some precise requirements:

Needs to be lightweight, as there will be around 15 instances of the editor on the page
On the same page, I need to be able to set different sizes for the different instances of the editor. Some will be say 200px wide, others 400px wide.
Needs to have a "special characters" toolbar item, and preferably a spell-checking module, along with your standard b, em, ol and ul.
Would be ideal if I could have a small number of rows with a minimised toolbar, i.e. just bold and italic with a single row of text.

In an ideal world, I'd like to be able to set up three different instances of the editor on a single page:

A single row textarea with bold and italic toolbar items, at about 200px width
A four row textarea with b, em, ol, ul, specialchars, spellchecking with 200px width
A twelve row textarea with b, em, ol, ul, specialchars, spellchecking at about 400px width

I've tried using a separately-linked version of TinyMCE and it works generally, but the interface appears to only allow one width per page.

I've tried using ckeditor but I get an odd bug where all of the toolbar items appear in a vertical column rather than rows and I can't find any kind of support for it on their forums.

Does anyone have any suggestions for such a flexible rich text editor?

Thanks in advance,

EDIT

I have now tried jHtmlArea (no Special Characters or Spell-checking modules and an issue in FireFox where CTRL+I and CTRL+B shortcuts don't work); nicEdit (not quite flexible enough, though it's lovely in its simplicity) and YUI (don't like the number of dependencies required).

As such, I would like to add two further requirements:

Keyboard shortcuts must work in recent versions of FireFox, Internet Explorer and Chrome
At most, the editor must only state jQuery as a dependency

You could use javascript to resize them after the page has loaded and the TinyMCE areas have been initialised. — Andrew Jackman
Hi Andrew. Could you give me an example of how I'd go about doing this? — turbonerd
Do you use the jQuery version of TinyMCE? If so I can give you some code, otherwise I can make some guesses. — Andrew Jackman
Not using either at the moment but it would be the jQuery TinyMCE I'd prefer to use, thanks. — turbonerd
Sorry I didn't respond yesterday, I had to fly, but I added some of my code below — Andrew Jackman

Andrew Jackman Andrew Jackman · Accepted Answer · 2011-12-27T07:42:50

So to have two instances of a different size, you can just initialize them separately and give a different width:

$('#textarea1').tinymce({
    // Location of TinyMCE script
    script_url: '/Resources/Scripts/tiny_mce/tiny_mce.js',
    // General options
    theme: "advanced",
    plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",
    // Theme options
    theme_advanced_buttons1: "cut,copy,paste,|,undo,redo,|,bold,italic,underline,forecolor,fontsizeselect",
    theme_advanced_buttons2: "",
    theme_advanced_buttons3: "",
    theme_advanced_buttons4: "",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_statusbar_location: "none",
    theme_advanced_resizing: false,
    height: 500,
    width: 700,
    // Example content CSS (should be your site CSS)
    content_css: "css/content.css"
});
$('#textarea2').tinymce({
    // Location of TinyMCE script
    script_url: '/Resources/Scripts/tiny_mce/tiny_mce.js',
    // General options
    theme: "advanced",
    plugins: "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",
    // Theme options
    theme_advanced_buttons1: "cut,copy,paste,|,undo,redo,|,bold,italic,underline,forecolor,fontsizeselect",
    theme_advanced_buttons2: "",
    theme_advanced_buttons3: "",
    theme_advanced_buttons4: "",
    theme_advanced_toolbar_location: "top",
    theme_advanced_toolbar_align: "left",
    theme_advanced_statusbar_location: "none",
    theme_advanced_resizing: false,
    height: 500,
    width: 500,
    // Example content CSS (should be your site CSS)
    content_css: "css/content.css"
});

This is what I am using, and you can see at the bottom of the "Theme options" section I have a width declaration.

JavaScript WYSIWYG text editors

2 Answers