Integrating CKEditor

Most web admins will at one point or another require a WYSIWYG text editor for HTML content. Luckily, using Monad and Angular makes integrating something like CKEditor (which is a bit of an industry standard) relatively easy.

Install the plugin

$ npm install --save angular-ckeditor

There are other CKEditor plugins for angular; use the one you like best.

Note that CKEditor itself is installed using Bower, not NPM. The NPM package is just a wrapper. If you installed Monad using Bower to begin with, you should of course use their Bower package directly:

$ bower install --save angular-ckeditor

CKEditor needs to live in a public place so it can load images, styles, plugins etc. Either make sure bower_components is publicly accessible, or symlink/copy/alias the ckeditor folder to a public place.

Loading the Javascript for CKEditor

CKEditor needs to be included before any of the other libraries. It also wants a CKEDITOR_BASEPATH global "constant" to be defined. CKEditor is notoriously picky here. So add the following to your admin's index.html:

<script>window.CKEDITOR_BASEPATH = '/path/to/ckeditor/'</script>
<script src="/path/to/ckeditor/ckeditor.js"></script>
<!-- if using Bower: -->
<script src="/path/to/monad/bundle.js"></script>
<!-- ...other plugins installed using Bower... -->
<script src="/path/to/my/admin/bundle.js"></script>

If installed using NPM/Browserify you'll also need to require the Angular module for CKEditor (Bower users would add the plugin with a <script> tag):

// ES6
import 'angular-ckeditor';
// Browserify
require('angular-ckeditor');

...and in all cases, add it as a dependency to your admin module:

angular.module('myAwesomeAdmin', ['monad-cms', 'ckeditor']);
// ...and then your normal admin code...

Add the attribute where you need it

<label>WYSIWYG!</label>
<textarea ckeditor="options_expression" ng-model="$ctrl.data.someItem.somefield"></textarea>

The options_expression is a hash of options for CKEditor. You can set it on a custom controller, resolve it or even place it on $rootScope (which would make sense if you have multiple CKEditor instances throughout your application with the same settings).