Just click inside the content below and start typing.

AlloyEditor is a WYSIWYG Editor built on top of CKEditor
By Liferay

Editing the content on the fly

Yes, you can edit this content right here and right now. Just select some text and the toolbar for styling will appear. Not only it will appear, but it will appear where you expect it; where you released the mouse. However, if you do it using your keyboard, the toolbar will be positioned right in the middle of the selection.

Example image:


Paste content

You can also paste content directly from the web! In most cases, it will work out of the box.


Drag&Drop images

Want to Drag&Drop images from your Desktop directly to the editor? Nothing easier than this. Try now right here (but keep in mind this requires IE10+, Chrome, Firefox or Safari).


Editing content

Currently we have the following available buttons to apply styles to content:

Text Images Table
Custom Styles (enabled by default) Custom Styles * Custom Styles *
Bold (enabled by default) Float left (enabled by default) Row (insert, delete) (enabled by default)
Italic (enabled by default) Center(enabled by default) Columns (insert, delete) (enabled by default)
Underline (enabled by default) Float right (enabled by default) Cells (insert, delete, merge, split) (enabled by default)
Code Remove Table (enabled by default)
Heading Level 1
Heading Level 2
Alignment
Quote
Subscript
Superscript
Remove Format
Marquee *

* Note that the button for Marquee and Styles have been created or configured especially for this demo! Check out below how we did it... you wouldn't believe how easy it was!


Adding content

Editing is good, but what about adding content? Well, right now you can:

  • Add links (enabled by default)
  • Add Twitter links (enabled by default)
  • Insert images (enabled by default)
  • Capture pictures
  • Insert Horizontal lines (enabled by default)
  • Insert Tables (enabled by default)


Browser support

AlloyEditor runs on IE9+, Chrome, Firefox and Safari.


Want to help us?

The project is under heavy development and any help would be highly appreciated! If you are a developer, you are welcome to contribute code. We have to create more buttons, more toolbars, to add mobile support... plenty of exciting work for everybody!

If you just want to use the editor, go ahead. However, don't forget to send us some feedback. That's everything we need!

P.S. Do you know that the Marquee button, which you probably used to have fun with the demo was especially added for this page? It does not exist as a default button in AlloyEditor. However, adding a new button is extremely easy. Here is the code for it:
var React = AlloyEditor.React; // Use the built-in version of React if your site does not use React

var ButtonMarquee = React.createClass({
    mixins: [AlloyEditor.ButtonStyle, AlloyEditor.ButtonStateClasses, AlloyEditor.ButtonActionStyle],

    propTypes: {
        editor: React.PropTypes.object.isRequired
    },

    getDefaultProps: function() {
        return {
            style: {
                element: 'marquee'
            }
        };
    },

    statics: {
        key: 'marquee'
    },

    render: function() {
        var cssClass = 'ae-button ' + this.getStateClasses();

        return (
            <button className={cssClass} data-type="button-marquee" onClick={this.applyStyle} tabIndex={this.props.tabIndex}>
                <span className="ae-icon-separator"></span>
            </button>
        );
    }
});

AlloyEditor.Buttons[ButtonMarquee.key] = AlloyEditor.ButtonMarquee = ButtonMarquee;
And then we add it to the text selection just like this:
var textSelection;

for (var i = 0; i < AlloyEditor.Selections.length; i++) {
    textSelection = AlloyEditor.Selections[i];

    if (textSelection.name === 'text') {
      break;
    }
}

textSelection.buttons.push('marquee');

AlloyEditor.editable('contentEditable');