Now You Can Add Any WYSIWYG Editor To Dropkiq | Try It Now Free

We've updated Dropkiq to include any WYSIWYG editor including Ace, Codemirror, Froala, and CKEditor. Our flexible architecture allows for any WYSIWYG editor.

Adam Darrah
Apr 20, 2020 10:24 PM
Now You Can Add Any WYSIWYG Editor To Dropkiq | Try It Now Free

DropkiqUI officially supports and has been tested with a handful of WYSIWYG editors including: Ace, Codemirror, Froala, and CKEditor. Our editor architecture is flexible enough that any new WYSIWYG editor an be added with ease. Check out this Github Pull Request to see what adding a new editor implementation typically looks like.

Let's break this pull request down:

1. demo/ckeditor.html: We always add a new demo page for every new WYSIWYG editor that we add. This allows us to test the new implementation, and easily verify that things are working any time we make a change. If you look in the /demo directory, you'll see that we have every WYSIWYG editor covered with a demo page.

2.  node_modules/*: We typically install new WYSIWYG editors in the DropkiqUI project via Yarn. When we do this, we get all the files of the new editor added in the node_modules directory. This section of the pull request can typically be ignored.

3. package.json / yarn.lock: Since we are managing our editors using yarn, we must modify these files to add the new WYSIWYG editor to our project.

Every time we officially add support for a new WYSIWYG editor, we do a lot of testing to verify everything is working correctly. Once we know everything is working, we add a new documentation page so that anyone can see how to implement Dropkiq.

You may be surprised that we didn't actually have to change any real code to enable DropkiqUI to work with CKEditor. This is actually pretty typical for most editors that use an iframe, textarea, or input to function since DropkiqUI works out of the box with these elements. Most of these editors have a way to access these raw elements when the editor initializes, which is where we can hook into the editor with DropkiqUI.

For some editors that don't use a standard HTML element, such as Ace editor and Codemirror, the integration may take a little more work. However, things usually work pretty smoothly as long as you can provide some basic information to Dropkiq. Take a look at this pull request to see what is required for a custom UI element.

As always, please reach out if you're interested in using Dropkiq but don't see your WYSIWYG editor listed. We're happy to make it work for you!

You might also like...

Explore how Dropkiq can help improve your user experience.

Writing Liquid expressions is hard. Let Dropkiq help you make it easier.