Create entirely new UI

Is React not your thing? Perhaps you prefer JQuery. Are you a JavaScript ninja and prefer writing vanilla JS instead? Welcome on board. You'll see how straightforward it is to create a whole new UI for AlloyEditor.

Create UI folder

Follow the instructions in our How to build it Guide to learn how to modify and build AlloyEditor.

Follow these steps to create your UI:

Create UI folder

Create a new directory under src/ui with the name of your UI (e.g jquery)

Create Build

Create a subfolder called gulp-tasks and a build.js file with your custom build steps. You can check out the Gulp Project or some of the existing tasks for extra insight into the build system.

Build your UI

Build AlloyEditor with your brand new UI (jquery in the example) by running the command below:

gulp --ui jquery

There you have it. How will you structure the directories? Which modules will you use? Will you load Buttons and Toolbars on demand? What gulp tasks will you add? These questions are entirely up to you. The good news is that you won't start from scratch entirely. You will still be able to use the core of AlloyEditor, as well as the API from CKEditor.

Once you are ready with the UI, please send us a pull request and we will merge it!