CKEditor inline directive not working in Angular 1.2.0-rc.3

Question

Just changed to Angular 1.2.0-rc.3 (from 1.2.0-rc.2) and directive for inline Editor doesn't work anymore.

Works fine in normal mode but not inline.

Does anyone knows how to fix this?

Thanks.

app.directive('uiCkeditor', [function() {
        return {
            require: '?ngModel',
            link: function(scope, element, attrs, ngModel) {
                if (!ngModel)
                    return; 

                ngModel.$render = function(value) {
                    ck.setData(ngModel.$viewValue);
                }

                 // var ck = CKEDITOR.replace(element[0]);
                 var ck = CKEDITOR.inline(element[0])

                ck.on('pasteState', function() {
                    ngModel.$setViewValue(ck.getData());
                    scope.$apply();
                });

            }
        }
    }])

Answer 1

I used ng-bind-html to render what is in the model and I created the directive ck-inline to add the inline feature and bind the model to the changes that happen in the inline editor. This directive requires a ng-bind-html to work and you also need to have ngSanitize added to your module. Add directive ck-inline to your element and it should work fine.

I would recommend you to use a different directive for the regular editor since it has a different behavior and can work well enough with just the ng-model directive.

I also use $timeout because I noticed that if I don't the text is rendered and then ckeditor somehow deletes all the values which messes up the model (this does not happen with the non-inline option). Here is the code.

yourModule.directive('ckInline', ['$sce', '$timeout', function($sce, $timeout){
    return{
        require : '?ngBindHtml',
        scope:{value:"=ngBindHtml"},
        link : function(scope, elm, attr, ngBindHtml)
        {
            $timeout(function()
            {
                var ck_inline;
                elm.attr("contenteditable", "true");
                CKEDITOR.disableAutoInline = true;
                ck_inline = CKEDITOR.inline(elm[0]);

                if (!attr.ngBindHtml)
                    return;

                ck_inline.on('instanceReady', function()
                {
                    ck_inline.setData(elm.html());
                });

                function updateHtml()
                {
                    scope.$apply(function()
                    {
                        scope.value = $sce.trustAsHtml(ck_inline.getData());
                    });
                }


                ck_inline.on('blur', updateHtml);
                ck_inline.on('dataReady', updateHtml);

            }); 
        }
    };
}]);