How to use it?

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

1. Add AlloyEditor's CSS to the page:

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

2. 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 in your project you already use CKEditor.
<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>

3. Invoke the static editable method of AlloyEditor:

AlloyEditor.editable('myContentEditable');

4. To retrieve the content from the editor, please do:
var alloyEditor = AlloyEditor.editable('myContentEditable');
var content = alloyEditor.get('nativeEditor').getData();

Please, check our Toolbar Configuration Guide and the Features List to know how to customize your editor and get the most out of it!

comments powered by Disqus