alloy editor
  • Docs
  • Updates
  • Develop
    • About
    • Build it
    • Create
    • Create Buttons
    • Create Skins
    • Create Toolbars
    • Create entirely new UI
  • Use
    • Basic use
    • How to use it?
    • Creating a React component
    • How to use CKEditor Plugins?
    • Editor Configuration
    • Toolbar configuration
    • Button configuration
    • Read only mode
    • Skins
  • Features
    • Bold
    • Camera
    • Code
    • Horizontal Line
    • Heading 1
    • Image Alignment - Center
    • Heading 2
    • Image
    • Image Alignment - Left
    • Image Alignment - Right
    • Indent and outdent block content
    • Link
    • Link AutoComplete
    • Italic
    • Text Alignment - Centered
    • Text Alignment - Left
    • Text Alignment - Justified
    • Quote
    • Strike
    • Remove Format
    • Text Alignment - Right
    • Styles
    • Superscript
    • Subscript
    • Table
    • Table - Cells
    • Table - Columns
    • Lists (Numbered)
    • Table - Heading
    • Table - Remove
    • Table - Rows
    • Underline
    • Twitter
    • Lists (Bulleted)

Creating a React component

You can use AlloyEditor on the server as well. To do this, you can create a React component that renders the editable content and creates an instance of AlloyEditor in the browser. This will be a significant performance improvement.

Talk is cheap. Show me the code (to quote Linus Torvalds)

Instead of just explaining how to do it, we actually created an example repository on GitHub, which contains code and instructions for usage. Please follow the instructions there.

The repository is an example project, which renders a page on the server and creates an instance of AlloyEditor in the browser. The same React component is used on both client and server. Something cool to note is that instead of creating just one bundle file, two bundles are created - one for the application files and another one for the AlloyEditor file itself. In this case, you will leverage the browser's cache.

Liferay.com