How to use it?

The section below assumes that you are using the default UI built on React. If you're using your own custom UI, these steps will be different.

Add AlloyEditor's CSS to the page

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

Add AlloyEditor's JS to the page

There are a few ways to add the editor to the page:

Add the whole editor with all UI on the page:
<script src="alloy-editor/alloy-editor-all-min.js"></script>
Add it on the page, separating the CKEditor code from AlloyEditor. This is useful if you already use CKEditor in your project:
<script src="alloy-editor/alloy-editor-no-ckeditor-min.js"></script>
Add it on the page, separating the React code from AlloyEditor. This is useful if you already use React in your project:
<script src="alloy-editor/alloy-editor-no-react-min.js"></script>
If you use both React and CKEditor on your page, then just include AlloyEditor's core:
<script src="alloy-editor/alloy-editor-core-min.js"></script>

Polyfilling older browsers

To work properly on older browsers such as IE11 you will need to ensure that you have the appropriate polyfills in your environment. These are:

  • In order to correctly display icons, an SVG polyfill such as svg4everybody.
  • To provide Symbol, which is needed by React, a polyfill like react-app-polyfill.

Invoke the static editable method of AlloyEditor

AlloyEditor.editable('myContentEditable');

Retrieve the content from the editor

var alloyEditor = AlloyEditor.editable('myContentEditable');

var content = alloyEditor.get('nativeEditor').getData();

Liferay.com