elRTE - WYSIWYG editor

Open source WYSIWYG editor for website

elRTE is an open-source WYSIWYG HTML-editor written in JavaScript using jQuery UI. It features rich text editing, options for changing its appearance, style and many more. You can use it in any commercial or non-commercial projects.

Main goal of the editor - simplify work with text and formating (HTML) on sites, blogs, forums and other online services. elRTE is developed by Studio 42 team for ELDORADO.CMS.

Usage

• Rich text editing, change its appearance and style
• Insert and manage various HTML elements with formatting (images, tables, lists and etc.)
• View and edit HTML-code

Features

• Advanced work with CSS
  • Setting indentation (margins, paddings) for images and table cells (seperate for each direction)
  • Controlling border properties (width, style, color) with convenient dialogs
  • Writing element properties as CSS-style always when possible
• Lightweight, fast and easy to integrate
• Interface appearance is configured from one CSS file
• No templates used
• i18n. The editor can be easily localized into any language
• Designed to work with elFinder file manager, but can also be used with any other
• Flexible for extensions

Translations

• Arabic
• Chinese (traditional)
• Czech
• Dutch
• English
• French

• German
• Hungarian
• Japanese
• Italian
• Latvian
• Persian

• Polish
• Spanish
• Russian
• Ukranian

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Install

<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.7.custom.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="css/elrte.min.css"                         type="text/css" media="screen" charset="utf-8">

<script src="js/jquery-1.4.4.min.js"           type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.7.custom.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/elrte.min.js"                  type="text/javascript" charset="utf-8"></script>
<script src="js/i18n/elrte.ru.js"              type="text/javascript" charset="utf-8"></script>

If you are not using full jQuery UI library, than make sure your custom version includes dialog and tabs components.

<script type="text/javascript" charset="utf-8">
    $().ready(function() {
        var opts = {
            lang         : 'ru',   // set your language
            styleWithCSS : false,
            height       : 400,
            toolbar      : 'maxi'
        };
        // create editor
        $('#our-element').elrte(opts);

        // or this way
        // var editor = new elRTE(document.getElementById('our-element'), opts);
    });
</script>

#our-element - id of element where editor will be created, this can textarea or any HTML element that can contain text (will be replaced with textarea on form submit)

Options

Toolbar

Next toolbars are predefined:

• tiny: only buttons to change text style (bold, italic, underline, strike, subscript, superscript)
• compact: the same as tiny + save, undo/redo, text alignment, list, link, fullscreen
• normal: compact + copy/paste, colors, paddings, block-elemet, images
• complete: normal + text size, style and font formating
• maxi: complete + tables

Custom toolbar

You can customize your toolbar. Toolbar contains panels and panels contains buttons. For list of available toolbars/panels/buttons see src/elrte/js/elRTE.options.js file

Example:

elRTE.prototype.options.panels.web2pyPanel = [
    'bold', 'italic', 'underline', 'forecolor', 'justifyleft', 'justifyright',
    'justifycenter', 'justifyfull', 'formatblock', 'insertorderedlist', 'insertunorderedlist',
    'link', 'image', 'flash'
];
elRTE.prototype.options.toolbars.web2pyToolbar = ['web2pyPanel', 'tables'];
var opts = {
    toolbar  : 'web2pyToolbar',
    /* ...snip... */
}
var rte = jQuery('#editor').elrte(opts);

With example above you will get such toolbar: