elRTE with integrated elFinder

elRTE with integrated elFinder

WYSIWYG rich text editor with file manager and file upload.

  • Language: JavaScript
    Framework: jQuery
  • Released: Feb 25, 2011
    Last Update: Feb 25, 2011

What is it?

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 much more. You can use it in any commercial or non-commercial projects(licensing at end of document). The main goal of the editor is to simplify working with text and formatting (HTML) on sites, blogs, forums and other online services.

elFinder is an open-source file manager for web applications. It is also written in JavaScript using jQuery UI. As you can see by looking at the screenshots, its creation was inspired by the simplicity and convenience of the Finder program in Mac OS X.

Contents:

This package contains all the files needed to add rich text editing and file upload/management to your website. It also includes HTML demos, a PHP based GUI for configuring basic features, and a demo using PHP functions to add the rich text editor to the page.

Requirements:

elRTE was built using JavaScrip, jQuery and jQuery UI so all it needs is for you to use a modern browser. It has been tested in Firefox 3.5+, Internet Explorer 7 & 8, Safari 4, Opera 10 and Chrome.
elFinder is also JavaScript but requires either a PHP or Python backend to take care of the heavy lifting.
The image preview and thumbnails creation requires:

  • PHP: mogrify utility or GD/Imagick module
  • Python: PIL library

Translations:

  • English
  • Russian
  • Spanish
  • Ukranian

The default language is English.

License

elRTE and elFinder are issued under a 3-clauses BSD license by Studio 42.
elRTE and elFinder use and come with jQuery and jQuery-UI which are issued under MIT and GPL licenses.

Hide

Install Instructions

Server requirements:

  • There are connectors for PHP and Python.
  • Image preview and thumbnails creation requires:
  • PHP: mogrify utility or GD/Imagick module
  • Python: PIL library

All the demos included use PHP but most can be quickly changed to work with Python.

PHP

Extract files to PHP server.

If you place it in the root directory of localhost so that readme.txt is located at http://localhost/rte-fileupload/readme.txt it should work right out of the box. If you extract it to a different directory you will have to edit connectors/php/connector.php so that "root" and "URL" point correctly in relation to where you located it.

At this point you are ready to start looking at the demos. Start with demos/index.html

Python

Setup is the same as with PHP except that you will be using connectors/python/connectors.py instead of the PHP connector.

To get the demos working you will have to replace each link to the PHP connector (connectors/php/connector.php) with the Python connector (connectors/python/connectors.py).

The demos that you can easily get working in Python all end in ".html". The ones that rely heavily on PHP end in ".php".

Demos

All demos are located in the sub-folder demos/

The standard demo is of a text area with rich edit and image upload. It is called:

rte.html

If you have a text field in which you want the URL of an uploaded image (or other file) look at this demo:

text_field.html

If you want both the text area and text field on the same page (or in the same form) look at this demo:

rte-text_field.html

If you need multiple of either this demo has two of each:

2rte-2text_field.html

Also included is a PHP based GUI for setting some of the common setting for the rich text editor and getting an immediate look at that implementation. It gives you three views, the graphic look, the JS and CSS includes and scripts needed to implement your chosen setting, and the full code of a demo page using those settings. It is called:

rte-gui.php

Finally there is some demo PHP code that calls a function to fill out the head and insert the form. The functions were built for a specific use-case so you will probably have to write your own for your project but it may give you some ideas. This is called:

rte-text_field.php and calls app/functions.php for the functions.

Basic Documentation

To get this rich text editor working on your project include this code in the head of your html document along with your other js or css files

Open js/elrte-elfinder.js and change connectors/php/connector.php to connectors/python/connector.py if using Python.
Also change "˜#editor' to the id of the text area you want rich edit on.
Adjust any other settings to suit your needs.

Also configure connectors/php/connector.php (or connectors/python/connector.py) if needed.

More Documentation

The complete documentation for both the rich text editor and the file manager/explorer/uploader are available on their respective websites:

elRTE

elFinder

You need to log-in or create an account
  • Create an account
  • Log-in
Please use your real name.
Activation link will be sent to this address.
Minimum 8 characters
Enter your password again

Clicking this button confirms you read and agreed to the terms of use and privacy policy.

X

Save your watchlist

Fill your details below to receive project updates from your watch list - including new versions, price changes and discounts.

I agree to the terms of use and privacy policy.

License » BSD license Download
or Get a quote

for customization or integration services

  • excellent, ready to use.
    L leoneste79
    3 years ago, 0 comments
    Was this helpful?
    Flag 1 of 1 people found this review helpful
  • They a 2 great programs! but their integration it's hopeless!

    ho needs an eIrte with an integrated elfinder?

    what people needs it's an elfinder (password protected) with an integrated eIrte !!!!

    In one word... elfinder with the option to edit using eIrte!!!

    I've been a System engineer (sytems analysis) the las 35 years..
    M mcapdevila
    1 year ago, 0 comments
    Was this helpful?
    Flag
  • easy to install, demos are very helpfull
    H hrnsky
    2 years ago, 0 comments
    Was this helpful?
    Flag
Post a comment

Or enter your name and Email
  • ZS Zechariah Stover Developer 6 months ago
    Thank you rink, glad it was helpful.
  • R rink 6 months ago
    thanks alot this is solve my problems when i worked all whsiwhg editors. thanks alot
  • ZS Zechariah Stover Developer 1 year ago
    Great idea. I can certainly see the benefits of what you are describing here. I don't have the time to do that integration but maybe someone else would. The integration we have currently is really for someone to integrate into their own project; It doesn't really stand alone.