/ angularjs

How to embed CKEditor with Angular Formly

In this article we'll be looking how to embed CKEditor with Angular Formly, we will be using ng-ckeditor directive to achieve this. Angular formly as described in previous posts is a simple solution to have forms built out for you, all it needs is the type of fields you want and it'll churn out the html for you.

If you're looking to use CKEditor without formly, follow the previous article on ckeditor and angular.

So to begin embedding CKEditor with Formly we'll need to register it as a custom form type, if you've read the previous article about multi-select-dropdowns in formly you'll know what i'm talking about.

What we need:

Download the plugins using your preferred method.

Lets begin registering CKEditor as custom input type.

// custom form template for ckeditor.html
<textarea  ckeditor="editorOptions"
       ng-model="model[options.key]">
</textarea>

var myapp = angular.module("CKEditorExample", ['ngCkeditor', 'formly', 'formlyBootstrap'],
function config(formlyConfigProvider) {
    // set templates here
    formlyConfigProvider.setType({
        name: 'ckeditor',
        templateUrl: 'ckeditor.html'
    });
});     
 // this registers the  ckeditor as custom field type in formly

To use this form type, just like you would for any other form input type we do something like this:

var ckeditorField = function (key) {
    return [{
        className: "col-md-12",
            "type": "ckeditor",
            "key": key
     }];
};

// when it needs to be called

$scope.field_name = ckeditorField("my_model_key");

The key(key within a model) is passed along as a parameter in a custom function to make this field generic, because in most cases this field will be used many times in the app as you wouldn't want to repeat the same thing over and over again, if you are using it multiple times with different ng-model keys.

Then finally in your template you will do something like this.

<formly-form model="model" fields="field_name"></formly-form>   
// the value of this field will be assigned to model.my_model_key

Below is the working example for this.

Refer to previous articles mentioned earlier in this article for more info on Angular Formly and CKEditor.

Hope this helps, Happy Coding!

See the Pen Angular CKEditor Example with ng-ckeditor and Angular Formly by Naveen Singh (@official_naveen) on CodePen.

Naveen Singh

Naveen Singh

I am Full Stack Developer from India who loves design, I use Python and Javascript to curb my cravings, with additional dosages of various web and mobile frameworks.

Read More