WYSIWYG - What you see is what you get

You’re working directly with your content - we simply add a few helper objects to aid you, these get removed when you’ve finished. If you’ve configured the paths to your CSS and any additional wrapper classes your content may require - you can view, interact and edit your content and layout directly within your browser. 

Please note that only static HTML content is editable, if you have content generated by a database (like a product listing or news feed) or content driven by javascript you may not be able to see or edit this within rgeEditor.

Optimised for both Mobile and Tablet

And most importantly, rgeEditor is optimised to adapt to both mobile phones and tablets on both iOS and Android devices allowing for unprecedented content management on the move.

The layout of the interface changes slightly on mobile devices with the introduction of a horizontally scrollable inline toolbar. We have added an additional tool to allow access to the comprehensive toolset available from the context (right click) menu available on the desktop version of rgeEditor.

A keyboard switch has also been included as editing content on a mobile device can be tricky enough, without having to worry about the keyboard popping up all the time, so you can now edit layout easily using the all of the screen space available.

Microsoft Word

There’s a handy paste Microsoft Word option that will endeavour to convert the MS Word content on your clipboard into valid html content. The system will recognise text formatting including list objects and convert MS Word tables to HTML tables. However, it will ignore all colours (as these should really be applied using CSS Classes) and embedded images within your document.

Paste Rich Text

Some users still use rich-text based editors to write and format their content. There’s a useful paste Rich Text option that will convert basic rich text formatting to valid html.  

Paste Text

The standard browser paste [ctrl V] will strip all formatting from any content and place it as plain text, if you want to paste copied html from a bowser web-page, you can use the Paste  Browser HTML option.

Paste Browser HTML Content

If you want to paste some formatted content from a web page into your content, this feature may prove very useful. Simply copy the layout selection (including images and structure) and use this option to inject the HTML into your content.

Markdown

Markdown content is a very useful and quick way of adding formatted content to a webpage. Review wikepedias overview of how markdown works, it could be very handy for quickly creating formatted content.  

Select the add markdown content option and either type or paste your markdown content, there’s even a handy view option so you can visualise how your content  will look when converted to the correct tags.

Tables

Adding tables to your content is very easy, simply select the number of rows and columns you require and create a new table. You can choose if and where you want the table headers to appear along with a handy option to inject "helper" content into each cell to ensure it is visible within your environment, prior to assign classes and styling.

Once created you can easily amend the table structure, split and join cells or nest further tables into cells for more complex layouts.

Text Formatting

Use the inline selector to easily assign text formatting, alignment and special characters. You can easily remove formatting by selecting the formatted text as an object, then choose the remove tag option which incidentally will unwrap any object removing its outer element..

Hyperlinks

Hyperlinks can be added very easily to any text selection, or wrapped around a certain object to make them clickable. 

Our hyperlink editor allows you to define the link type ( including anchors and email) , protocol, url and target window. The target window also contains a complete pop-up window configurator. 

Within rgeEditor configuration there is an option to link to a file (that needs to be generated by your CMS in a specific format). This file contains the site map and corresponding URLS for each page. If this is configured, the site map links will appear within the hyperlink helper, enabling quick and easy selection of any page within your website to use as links.

CSS Classes

Assign all of your relatively hosted or remotely hosted CSS stylesheets within the configuration settings and they will become available to you within the editor. By selecting an object you can view assigned classes, remove classes or use the quick look displaying all of the classes that match your criteria as you type, for quick and easy assignment.

CSS in-line Stylesheets

If your design is not completely CSS Class based, you can utilise the powerful inline CSS selectors that display the complete CSS breakdown of any selected object. It also allows you to assign any CSS property as an inline style in real time.

CSS Helpers

CSS can be a bit daunting, so we have created several helpers widgets.

- Object Quick Edit: A visual tool that enables you to easily apply margins, padding, position and sizing of any object.

- Size Sliders: A tool to enable you to increase or decrease a css value by dragging left or right.

- Color Selector: A pop-over pipet based color selector that works in rgba, rgb or hex vlaues 

- Color Palette: A pop-over visual colour palette. Configure using css color names, hex, rgb or rgba values within your settings.

- Widgets: Easily assign / amend object shadows, text shadows, transitions and transforms with these handy helpers.

Object Attributes

Easily assign, edit or remove object attributes including id, class, styles, title and events in a dedicated panel.

HTML Templates

Create template blocks from your own layouts and designs files. Then utilise our template manager to add, edit and categorise your blocks.

Templates can be injected anywhere within your content using the direct placement options or from within the Page Builder tools.

Page Builder

Page Builder is a powerful extension to the template system. Adding the rgeMod  CSS Class to each template wrapper enables it within the Page Builder environment.  The CSS Class can also be placed at alternate injection points within your templates for much greater flexibility.

Selected objects with the rgeMod class will display the  symbol at their base.  Clicking the symbol will launch the template selection window where a template can be further selected to inject. Replace, inject before or after, append or prepend the currently selected object within your layout. View our Bootstrap theme and Foundation theme page builder demo videos to see it in action or simply have a go for yourself.

Code Manager

The in-built code manager allows you to edit server side Javascript, XML, CSS and HTML files from within rgeEditor. Simply assign the file paths and set the correct permissions on your server.

Spell Checker

The spell-checker utilises a third party API service, returning errors and suggestions for inline replacement.

Speak Selection

Select a paragraph or sentence from within your content, then choose the Speak Selection tool from within the inline formatting tools, or context menu (or use CTRL K). rgeEditor will 'speak back' your content, enabling your to head potential mistakes within the content you have just written.

Cut, Copy, Paste and Duplicate options

It is very easy to manipulate objects within rgeEditor.  Selections are made even easier by utilising either the rgeMod class to define visible wrappers, or adding a data-rgetype attribute to objects such as columns and rows. This allows labels to be displayed against layout objects within the editor.

Once you’ve selected the object you want to manipulate, right click and choose to duplicate (clone), copy or cut.  To paste, select a neighbouring object from where you would like your content to appear, then choose to paste before, after or within the objects bounds appending or prepending your content to it.

Edit root or object Source Code

We’ve integrated ACE, our favourite code editor within rgeEditor for the desktop version, both the mobile and tablet versions currently allow editing of source code as basic text without formatting or code hinting. The ROOT source can be edited for the entire page, or you can select any object and edit its source code directly - very handy indeed.

Tidy Code

Some developers (like myself) don’t like their code auto tidied, that’s why we added a feature to optionally tidy up your html for you within the source code root and object editors.

DOM Tree 

DOM stands for Document Object Model. It represents the structure of a HTML document. Understanding this structure is key to understanding how objects work inside HTML and rgeEditor.  Each object, however small, is represented in the DOM tree, it could be a simple piece of bold text [strong] or a link [a]. 

Clicking on an object on your page will display that objects hierarchical position in your document.  You can easily navigate to and select any object in that objects hierarchy, whether that be its direct parent or an object much further up the tree. The DOM tree can also be used as the selection point for an object including the context (right click) menu - as some objects might be tricky to select visually. 

To that end, there is also a very clever and fast way of traversing your document using keyboard shortcuts. These shortcuts allow you to easily select parent or first child object or previous sibling or next sibling. With those four shortcuts you can flick between and around objects extremely easily without touching your mouse or trackpad. Alas, there is no easy shortcut for traversing between objects on mobile devices other than using the DOM tree.

DOM Object Labels 

We’ve just added this new helpful feature. As developers we understand the DOM and how objects and wrappers are created to form layout. The average end user probably isn’t au fait with this, so web developers and designers can now add labels to different object types.

Using the data-rgetype="xxx" attribute (available as a default within the Object Attributes panel), you can add labels such as "row", "column" or "heading". These objects may all be HTML DIV element within your code, but adding an object label, now displays a small blue dot helper within the DOM Tree and adds a blue label under the object when hovered over or selected.

This helpful tool now takes the guess work our of selecting the correct object, for example, duplicating a column or a row.

Accessibility

We have tried to make our editor as accessible as possible. We have ensured that as many useful tools are available as quick keys as possible; from emboldening text, inserting a link or adding objects to completely traversing between objects around the document. The full selection of quick keys is displayed as a menu when you click on the small ninja icon top left of the editor.

Undo / Redo

You can undo and redo up to 99 times within the editor environment.

Find and Replace

The find and replace tool is extremely powerful, allowing you to find and replace content in many ways:
- Across the entire document or within a selected object / content region
- Within a specific object type or by CSS Class
- At source code level or restricted to visual text 

You can test your selection prior to replacing your content to see how many matches have been found and will be changed.

Access Groups

The rgeEditor configuration file allows you to create specific access groups. Each access group can have almost every feature enabled or disabled to restrict specific groups from say, editing source code or adding inline styles. 

There is even an option to completely lock down the layout and content with the exception of objects with a specific class assigned.

Special Characters

You can easily insert one of many "hard to type" characters directly within your content as required from a set we compiled.

Object Creation / Object Wrapping / Switch Object

Adding new elements to your content, or wrapping a selected element within a new parent object is very easy. You can add paragraphs, divs and spans after the selected object or wrap the selected object with a div or span.  These newly created objects can easily be changed/switched using the Tag Type option to any other object type you require.

3rd Party Video (YouTube and Vimeo)

YouTube and Vimeo are the two major players in the hosted video arena. We decided to build some helpful tools to enable you to easily add a new video, or edit an existing video. Each tool comes with a complete configuration panel so you can autoplay, hide the playbar or tools and so on. (To note: creating a new plugin to manage a different video object type is very easy to do!)

3rd Party CMS Installation

Installation guides for bespoke CMS systems are available, however we’re always looking to extend our plugin library for other popular CMS systems, if you have a CMS you would like a plugin written for, or if you’re interested in writing a plugin please get in contact with our support team.

Wordpress Installation

We have created a WordPress plugin complete with full admin configuration screens that can be very easily installed into WordPress website, overriding the default HTML editor. There is an option to inject your Wordpress menu links from within the configuration screens, giving users access to easy website page linking within content.

Joomla Installation

We have created a Joomla plugin that can be easily installed into Joomla 3.x - there are some manual configuration settings and security settings that will require you to have FTP access to your website to complete the installation.

You can define a Joomla navigation menu within the editors configuration to allow the link properties to access your website pages URL’s.

Drupal Installation

We have created a Drupal plugin that can be easily installed into Drupal 7.x - there are some manual configuration settings and security settings that will require you to have FTP access to your website to complete the installation.

You can define a Drupal navigation menu within the editors configuration to allow the link properties to access your website pages URL’s.

Images and Backgrounds

Add or replace both inline images and background images very easily. Then use the resource manager, image crop or image edit tools to upload with optional cropping and resizing images to your server and select them to use within your content.

Plugins

Easily create new plugins for rgeEditor using jQuery. We have created tools to add them to the editor’s context menu and routines to detect content, enabling the insertion of your tooltips and detection when saving to remove all tool tips from your document.  

Within the standard install there are several examples demonstration plugins available.

White Label

We’re very proud of rgeEditor.  However we appreciate that when you create a custom content management system you may like your client to believe it’ is all of your making... Thats ok... there’s an option in the setup to assign your own logo and page title to white label our software as your own.

Resource Manager

Our powerful resource manage (complete with the image crop and image edit tools) work seamlessly alongside rgeEditor. However, with two simple javascript functions you can include these tools in other areas of your CMS for image or resource uploading

Our resource manager is configured to your directory of choice, allowing you then to:

- create folders / directories

- drag and drop (or manually select) single or multiple files to upload

- change file names 

- move files from one directory to another

Image Crop

This powerful tools sits within the resource manager allowing users to select an image to upload, resize and crop as required with tools to: 

- Apply preset canvas sizes (set within the rgeEditor configuration) 

- Manually crop by fixed sizes with the option to lock by ratio, or use the CTRL key and handles to resize the canvas manually.

- Manually scale by fixed sizes with the option to lock by ratio, or use the SHIFT key and handles to resize the image manually. 

- Auto set the canvas to the image size 

- Auto fit the image within the canvas or set the image to cover the canvas.

- Save as JPG or PNG format in a directory of your choosing

Image Edit

rgeEditor has recently deprecated its Flash based image editor in favour of a new html5 based imager editor with lots of new features enabling developers and end users to crop, edit and tweak their images online. View our news article for an insight into the features available.