Basic use

The section below assumes that you are using the default UI built on React. The AlloyEditor core is fully separated from the UI, so creating a UI based on another framework is very easy.

Download AlloyEditor

Option 1) Download AlloyEditor from here, then unzip it.

Option 2) Install AlloyEditor via Bower (bower install alloyeditor)

Option 3) Install AlloyEditor via NPM (npm install alloyeditor)

Copy and Paste

If you downloaded the zip file:

<link href="alloy-editor/assets/alloy-editor-ocean-min.css" rel="stylesheet">
<script src="alloy-editor/alloy-editor-all-min.js"></script>

If you downloaded it via Bower:

<link href="bower_components/alloyeditor/dist/alloy-editor/assets/alloy-editor-ocean-min.css" rel="stylesheet">
<script src="bower_components/alloyeditor/dist/alloy-editor/alloy-editor-all-min.js"></script>

Note that if you intend to use AlloyEditor on older browsers such as IE you may need to make some polyfills available in your environment.

Use AlloyEditor

Invoke the editable static method on AlloyEditor, passing the ID of the node you want to edit:
AlloyEditor.editable('myContentEditable');

That's everything you need to get started!

Liferay.com