17 Rich Text Editor(RTE) webbase pilihan

Mau buka bola tangkas account???

Akses dimana saja, kapan saja dengan HP mu!

17 Rich Text Editor(RTE) webbase pilihan

Sabtu, 14-11-2009 10:05 WIB | diposting dari rumah | hit: 687 | komentar: 0 | Programming

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 around
with a large community, strong support and is extensively documented.
CKEditor is a valid XHTML aware editor. This means that it produces
valid 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 be
extended 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 id
attribute 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 and
then be able to remove any reference to the editor’s firm, create other
versions 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 well
very popular and powerful. TinyMCE is used in hundreds of projects like
Wordpress and Joomla, companies like Microsoft and Oracle and many
other individuals that use it in their projects. The editor supports
insertion of predefined templates and this is a unique feature built-in
the 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 through
plugins and it uses a rich API that can help you built the editor of
your choice. It is based on on HTMLArea which was produced in the past
by Interactive Tools. Xinha is an open source project and it will
remain one judging from the developers message on the Xinha homepage.
Xinha is a bit more complicated than TinyMCE and CKEditor from the
amateur users view, since it needs a better understanding of the API
but 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 special
actions when something happens to the editor instance. The API is
simple 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, the
only thing required to load the editor is to include the javascript
file. It integrates into any site in seconds to make any element/div
editable or convert standard textareas to rich text editing. One of the
best features of NicEdit is that in order to load a plugin to the
library, the only think needed, is to go to the download section of the
library, choose the plugins you want to be included and download the
library. After that, as soon as you replace the library with the newly
downloaded one, the plugins you have chosen will be there for you to
use.

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 you
select (Assume that you have already added a div element with
id=myNicPanel and you want to make the element with id=instance
editable):

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 source
code files with syntax highlighting. It is one of the few editors that
treat Tabs as a normal editor, this means inserting a tab character
each 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 visual
layout, and to concentrate on its structure and meaning, while trying
to give the user as much comfort as possible (at least as WYSIWYG
editors). This is why the authors of WYMeditor describe the RTE as
WYSIWYM (What You See Is What You Mean). It is a very semantic editor
and uses CSS for styling elements. Styles can be applied from within
the 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 same
example as the other editors above (get the html value of the editor):

wym.html("< icon >Hello, World.</p>");

Download | Demo | Documentation

openWYSIWYG

openWYSIWYG is a simple editor written entirely in JavaScript that
is fast and user friendly. It facilitates one of the best table editing
interfaces seen on RTEs and it is very simple to use it in your
applications. The only drawback for this great RTE is the lack of
documentation 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');

Download | Demo

BXE

BXE is a browser based Wysiwyg XML Editor – and that changes
everything! You can edit now your content semantically and at the same
time display it to your users and editors in its final form. Detailed
explanation 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 has
become a state of the art, full featured rich text editor. Version 2
introduces new industry unique tabbed multi-document interface feature.
Now you can edit virtually unlimited number of HTML snippets in a
single 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 simple
rich text editing functionality to your projects. Supports many
features of an RTE but it lucks dialogs and image insertion the author states that:

This editor does support the adding of images into the
content window. However, at this time, I have the option disabled in
the editor.js file because of the need for a server-side script (my
implementation 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 icon nsubmit=”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();

Download | Demo

Whizzywig

Whizzywig is a lightweight RTE that uses just one file to do all
it’s magic. It is extremely powerful for it’s size and produces valid
XHTML. You can customize the toolbar, load your CSS to make it stick to
your 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 WYSIWYG
editor for simple content. In order to use the editor, you only have to
include the js file and all textareas will be transformed into RTEs.

Download / Demo

Wikiwyg

Wikiwyg is a very exciting RTE that aims on providing a decent RTE
for Wikis and it supports Wikitext too. The documentation of the editor
will get you started right away.

Download | Demo | Documentation

YUI Rich Text Editor

The Rich Text Editor is a UI control that replaces a standard HTML
textarea; it allows for the rich formatting of text content, including
common structural treatments like lists, formatting treatments like
bold and italic text, and drag-and-drop inclusion and sizing of images.
The Rich Text Editor’s toolbar is extensible via a plugin architecture
so that advanced implementations can achieve a high degree of
customization.

To use the editor, you have to include the appropriate files needed
with 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, you
have to purchase the source code. It is a simple RTE like TTW and is
very 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 comes
to JavaScript, size does matter. It comes as a jQuery plugin.

Download | Demo

Web Wiz RTE

Web Wiz comes with a lot of features and an option to download for
free. It works on all popular browsers and the design mode is very
stable. 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.

Tags: rte, WYSIWYG, webbase, HTML, xhtml, css, word, standart

Share this article on: | Bagikan
Seluruh artikel di Hilman.web.id dapat anda perbanyak, cetak, modifikasi dan distribusikan secara bebas, asal tetap mencantumkan sumber URL.

Akses http://m.hilman.web.id di mana saja melalui ponsel, Blackberry, iPhone, atau Windows Mobile Phone Anda

KOMENTAR

http://www.hilman.web.id/posting/blog/668/17-rich-text-editor-rte-webbase-pilihan.html

Belum ada komentar

KIRIM KOMENTAR

Untuk menampilkan pic di komentarmu, gunakan email account Gravatar kamu untuk pic komentar. belum punya account Gravatar? klik disini

POSTING LAINNYA

Naruto Shippuden Episode 150

naruto shippuden videos taken from www.narutoget.com

Flash Player dibutuhkan untuk memutar video.

akses http://m.hilman.web.id dari gadgetmu

Masukkan Code ini K1-3E85C4-4 untuk berbelanja di KutuKutuBuku.com

QUOTE

RSS FEED

WHERE R U FROM

Anda tanpa proxy
IP anda: 38.107.191.85
(38.107.191.85)

BANNER

copy n paste this code
to ur blog/web

STATS

View My Stats

Googlebot last access powered by MyPagerank.Net

Google Friend Connect

MY BOOKMARKLOG

http://www.chethstudios.net
website refrensi web designer..
http://designrfix.com/inspiration/business-cards-collection-inspirational-designs
Inspirasi desain kartu nama professional dan kreatif..
http://freedownloadsecrets.com/70-promising-resources-and-tutorials-especially-for-designers-to-disc
Best Resource For Webdesigner..
http://www.freshwap.net/
Kumpulan templates PSD bagus dan lengkap..
http://brandstack.com
kumpulan logo profesional dan kreatif. buat inspirasi desain logo..

link lainnya...

Nama :
Email/blog :
Alamat/kota :
Komentar :

Saya menerima komentar terkait posting yang ditampilkan. Isi komentar menjadi tanggung jawab anda. Saya berhak untuk tidak menampilkan komentar jika dianggap tidak etis, kasar, berisi fitnah, atau berbau SARA.