17 Rich Text Editor(RTE) webbase pilihan
Text Editor atau Rich Text Editor(RTE) sangat di butuhkan untuk administrasi konten berikut beberapa RTE yang ada di pasaran.
CKEditor
Formerly known as FCKEditor, CKEditor is one of the top RTEs aroundwith a large community, strong support and is extensively documented.CKEditor is a valid XHTML aware editor. This means that it producesvalid XHTML code that does not break your page's validation and layout.You can do nearly anything you would with a desktop editor, it can beextended with custom plugins and it is very user friendly.
Using the editor is as simple as setting a class name to an element.You can also load specific elements with a reference to their idattribute like this:
CKEDITOR.replace( 'editor' );
The code has to be used after the element has rendered, for example within a window.onload function.
A simple example use of the CKEditor API is:
function InsertHTML(htmlvalue)
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.editor1 ;
// Check the active editing mode.
if (oEditor.mode == 'wysiwyg' )
{
// Insert the desired HTML.
oEditor.insertHtml( htmlvalue ) ;
}
else
alert( 'You must be on WYSIWYG mode!' ) ;
}
The above code will insert any HTML you give to the InsertHTML method to the editor.
Except from free licences, someone could acquire a paid licence andthen be able to remove any reference to the editor's firm, create otherversions of the editor with no need to be open sourced etc.
Download | Demo | Documentation | Plugins
TinyMCE
TinyMCE from Moxiecode is the rival to CKEditor since it is as wellvery popular and powerful. TinyMCE is used in hundreds of projects likeWordpress and Joomla, companies like Microsoft and Oracle and manyother individuals that use it in their projects. The editor supportsinsertion of predefined templates and this is a unique feature built-inthe editor. TinyMCE also comes as a jQuery plugin.
In order to load the editor in it's simplest form you should include the library and use this code:
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
The TinyMCE API is powerful and easy to use too. For example if you want to get the editor contents you should do a:
tinyMCE.get('editor').getContent());
Download | Demo | Documentation | Plugins
Xinha
Xinha is one of my favorite RTEs. Xinha is fully extendable throughplugins and it uses a rich API that can help you built the editor ofyour choice. It is based on on HTMLArea which was produced in the pastby Interactive Tools. Xinha is an open source project and it willremain one judging from the developers message on the Xinha homepage.Xinha is a bit more complicated than TinyMCE and CKEditor from theamateur users view, since it needs a better understanding of the APIbut once you master it, you will never want to use another editor.
To load the Xinha editor in a textarea with id=editor using some plugins, you can use this code:
var xinha_plugins =
[
'ExtendedFileManager','ContextMenu','CSS','FindReplace','FormOperations','Forms','SpellChecker','LangMarks','InsertSnippet'
];
var xinha_editors =
[
'editor'
];
function xinha_init()
{
if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return;
var xinha_config = new Xinha.Config();
xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
Xinha.startEditors(xinha_editors);
}
Xinha.addOnloadHandler(xinha_init);
Xinha also supports event hooks that can be used to perform specialactions when something happens to the editor instance. The API issimple to use too. For example you can insert HTML in the editor(assume that the xinha instance is 'editor'):
editor.insertHTML(html);
Download | Demo | Documentation | Plugins
NicEdit
NicEdit is one of the easiest Rich Text Editors out there since, theonly thing required to load the editor is to include the javascriptfile. It integrates into any site in seconds to make any element/diveditable or convert standard textareas to rich text editing. One of thebest features of NicEdit is that in order to load a plugin to thelibrary, the only think needed, is to go to the download section of thelibrary, choose the plugins you want to be included and download thelibrary. After that, as soon as you replace the library with the newlydownloaded one, the plugins you have chosen will be there for you touse.
This code will convert all textareas in a page to rich text editors:
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
and this code will add an inline editor to any element that youselect (Assume that you have already added a div element withid=myNicPanel and you want to make the element with id=instanceeditable):
bkLib.onDomLoaded(function() {
var myNicEditor = new nicEditor();
myNicEditor.setPanel('myNicPanel');
myNicEditor.addInstance('instance');
});
An example use of the NicEdit panel for getting the contents of the editor is:
[nicInstance].getContent()
Download/Plugins | Demo | Documentation
EditArea
EditArea is another type of RTE that focuses on editing of sourcecode files with syntax highlighting. It is one of the few editors thattreat Tabs as a normal editor, this means inserting a tab charactereach time by default. EditArea supports real time highlighting for PHP,CSS, Javascript, Python, HTML, XML, VB, C, CPP, SQL, Pascal, Basic,Brainf*ck and more.
EditArea can be loaded with just one function call this way (For a textarea with id=editor):
editAreaLoader.init({
id : "editor" // textarea id
,syntax: "" // syntax to be used for highlighting
,language: "en" //The language to use
,start_highlight: false // to display with highlight mode on start-up
});
and the API is fairly simple to use (get the contents of the editor):
editAreaLoader.getValue('editor');
Download | Demo | Documentation
WYMeditor
WYMeditor tries to see things in a different way than any other RTE.WYMeditor's main concept is to leave details of the document's visuallayout, and to concentrate on its structure and meaning, while tryingto give the user as much comfort as possible (at least as WYSIWYGeditors). This is why the authors of WYMeditor describe the RTE asWYSIWYM (What You See Is What You Mean). It is a very semantic editorand uses CSS for styling elements. Styles can be applied from withinthe editor using prefefined classes that are loaded with the editor.The library is a jQuery plugin.
Loading WYMeditor with the silver skin:
jQuery(function() {
jQuery('#editor').wymeditor({
lang: "en",
stylesheet: './wymeditor/styles.css',
skin: 'silver',
postInit: function(wym) {
wym.hovertools(); //activate hovertools
wym.resizable(); //and resizable plugins
}
});
});
WYMeditor's API is not an alien technology to learn. The sameexample as the other editors above (get the html value of the editor):
wym.html("<p>Hello, World.</p>");
Download | Demo | Documentation
openWYSIWYG
openWYSIWYG is a simple editor written entirely in JavaScript thatis fast and user friendly. It facilitates one of the best table editinginterfaces seen on RTEs and it is very simple to use it in yourapplications. The only drawback for this great RTE is the lack ofdocumentation which could make it even better if existed.
Loading openWYSIWYG is as easy as (for attaching an editor to a textarea with id=editor):
WYSIWYG.attach('editor');
Reacting with the editor from outside functions can be done like this (To insert some html to the editor):
WYSIWYG.insertHTML(html,'editor');
BXE
BXE is a browser based Wysiwyg XML Editor - and that changeseverything! You can edit now your content semantically and at the sametime display it to your users and editors in its final form. Detailedexplanation on how to use the bitflux editor will get you started in minutes.
Download | Demo | Documentation
SPAW
SPAW is another popular RTE that from version 2.0 and above hasbecome a state of the art, full featured rich text editor. Version 2introduces new industry unique tabbed multi-document interface feature.Now you can edit virtually unlimited number of HTML snippets in asingle WYSIWYG instance.
SPAW can be used with PHP like this (for a textarea with id=editor):
<?php
include("spaw2/spaw.inc.php");
$spaw = new SpawEditor("editor", 'Initial Content here...');
$spaw->show();
?>
and with .NET technologies like this (for ASP):
<%@ Register TagPrefix="spaw" Namespace="Solmetra.Spaw2" Assembly="Solmetra.Spaw2" %>
<spaw:Editor ID="Editor1" runat="server" />
and for C#:
using Solmetra.Spaw2;
Editor spaw1 = new Editor();
spaw1.ID = "Editor1";
Page.Controls.Add(spaw1);
Download | Demo | Documentation | Plugins/Themes
TTW
A very basic RTE that could come handy if you want to add simplerich text editing functionality to your projects. Supports manyfeatures of an RTE but it lucks dialogs and image insertion the author states that:
This editor does support the adding of images into thecontent window. However, at this time, I have the option disabled inthe editor.js file because of the need for a server-side script (myimplementation is done in PHP).
To add TTW to a page you have to create a form element and add a onsubmit handler on it like this:onsubmit=”editor.prepareSubmit()” in order to handle the data. Afterwards you need this code where you want the editor to render:
var editor = new WYSIWYG_Editor('editor');
editor.display();
Whizzywig
Whizzywig is a lightweight RTE that uses just one file to do allit's magic. It is extremely powerful for it's size and produces validXHTML. You can customize the toolbar, load your CSS to make it stick toyour project's style and more.
Adding the Whizzywig RTE to your projects is like (for a textarea with id=editor):
makeWhizzyWig("editor", "all");
Download | Demo | Documentation
widgEditor
widgEditor is an easily installed, easily customisable WYSIWYGeditor for simple content. In order to use the editor, you only have toinclude the js file and all textareas will be transformed into RTEs.
Wikiwyg
Wikiwyg is a very exciting RTE that aims on providing a decent RTEfor Wikis and it supports Wikitext too. The documentation of the editorwill get you started right away.
Download | Demo | Documentation
YUI Rich Text Editor
The Rich Text Editor is a UI control that replaces a standard HTMLtextarea; it allows for the rich formatting of text content, includingcommon structural treatments like lists, formatting treatments likebold and italic text, and drag-and-drop inclusion and sizing of images.The Rich Text Editor's toolbar is extensible via a plugin architectureso that advanced implementations can achieve a high degree ofcustomization.
To use the editor, you have to include the appropriate files neededwith your configuration and add this code in an onload function:
(function() {
//Setup some private variables
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
//The SimpleEditor config
var myConfig = {
height: '300px',
width: '600px',
dompath: true,
focusAtStart: true
};
//Now let's load the SimpleEditor..
var myEditor = new YAHOO.widget.SimpleEditor('editor', myConfig);
myEditor.render();
})();
Download YUI | Demo | Documentation
Cross Browser RTE
Cross-Browser RTE is free to use but in order to customize it, youhave to purchase the source code. It is a simple RTE like TTW and isvery simple to use.
To add the editor you have to add this code to your pages :
var rte1 = new richTextEditor('editor');
rte1.build();
You can access the editor programmatically like this:
rte1.html = html;
Download | Demo | Documentation
Damn Small RTE
A very small but powerful RTE. Only 18kb footprint and when it comesto JavaScript, size does matter. It comes as a jQuery plugin.
Web Wiz RTE
Web Wiz comes with a lot of features and an option to download forfree. It works on all popular browsers and the design mode is verystable. This is how to install the editor in your pages.
Download | Demo | Documentation
Which one do you use for your projects? Which one did we forgot to mention here? I am waiting to test the rtePad editor which is set to launch late October/Early November 2009 and i use mainly the YUI RTE and Xinha.