Thursday, May 10th, 2007
Rich Text Controls: Tiny MCE 2.1.1 and Control.TextArea
Category: JavaScript, Library
, RichTextWidget
Ryan Johnson has created a new control: Control.TextArea. This is a very different tool, as it isn't about WYSIWYG functionality, but rather building toolbar based text areas that wrap simple text. It has support for functionality such as Markdown, Textile, etc. Everything can be driving from JavaScript to create your own functionality:
JAVASCRIPT:
-
-
textarea = new Control.TextArea('textarea_id');
-
textarea.textarea; //refers to the DOM element 'textarea_id'
-
textarea.observe('change',function(){
-
//called after the user types content, or clicks a button
-
//the change event refers to the Control.TextArea object, NOT the DOM element object
-
});
-
textarea.onChangeTimeoutLength = 500; //default value, amount to wait before firing the change callback
-
-
textarea.getValue(); //gets the contents of the whole textarea
-
textarea.getSelection(); //gets the current selection as a string
-
textarea.replaceSelection('my new text'); //repalce the current selection with this text
-
textarea.wrapSelection('before text','after text'); //wrap the current selection with these two strings
-
textarea.insertBeforeSelection('before text'); //inserts the string before the current selection
-
textarea.insertAfterSelection('after text'); //inserts the string after the current selection
-
textarea.insertBeforeEachSelectedLine('> '); //inserts the string before each selected line
-
textarea.injectEachSelectedLine(function(lines,line){ //works just like Hash.inject() for each selected line
-
lines.push(line); //this logic won't modify the selection, but you can modify each line here
-
return lines;
-
});
-
TinyMCE has a new 2.2.1 release, that has update such as:
- Fixed problem where TinyMCE failed to initialized if used together
with libraries like Scriptaculous. - Fixed various problems with the media plugin, now easier to embed
Youtube/Googlevideo. - Fixed so store/restore selection logic works in Opera and Safari
(Nightly). - Cleaned up the source code by removing some obsolete code.
- Removed debug option, no longer needed since the devkit does it better.
- Removed old IE 5.0 code and reduced the overall code by using smarter
prototype add methods.
Related Content:
- Hide rich text on Web
4.1 rating from 34 votes
Hot damn! The TinyMCE news is awesome! That was so frustrating before.
Took me one minute to find a bug in the otherwise intriguing Control.TextArea… Click to insert a hyperlink or image and click cancel — the link or image URL isn’t added, but the markup around it is. Oops!
Brian, thanks for posting that. I’ve fixed that in all three of the toolbar implementations. I was checking for false instead of null.
It’s me or I see TinyMCE 2.1.1 as last version?
Awesome! That’ll save my life. I was getting bored with a mass of non-working bits of Javascript code and my faulted attempts to find some nice workaround to work with selections.
Fantastic stuff. I can’t get over how useful the Control suite by Ryan is. I’ve found myself including his libraries all over the place, particularly the tidbits and tabs systems. I can’t see Control.TextArea being any different.
I am using the fantastic javascript framework MooTools for most of my projects. I need a sweet and simple way for my clients to add Markdown markup, but the awesome Control.TextArea was sadly not compatible with MooTools.
So I started to work on markdown_toolbar.js which is just a port of Control.TextArea to the MooTools framework.
Find out more over at http://code.c7.se/js/markdown_toolbar/
Cheers