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 it on the page, separating the CKEditor code from AlloyEditor. This is useful if you already use CKEditor in your project:
Add it on the page, separating the React code from AlloyEditor. This is useful if you already use React in your project:
If you use both React and CKEditor on your page, then just include AlloyEditor's core:
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
Retrieve the content from the editor
var alloyEditor = AlloyEditor.editable('myContentEditable'); var content = alloyEditor.get('nativeEditor').getData();