Use CKeditor in template with AngularJS

Question

I have a problem to use CKeditor.

First in the top I have this :

<textarea class="ckeditor" id="test"></textarea>

No problem I have a textarea with the buttons style (bold,underline,...) of ckeditor.

But I have the same texterea in a template :

<script type="text/ng-template".....
.....
<textarea class="ckeditor" id="test"></textarea>
.....
.....</script>

And I have a simple textarea... Do you know this problem ?

Answer 1

You should use directives for this, because angular loads in templates asynchronously while the ckeditors are created (by jquery probably) when the document is loaded.

Either use an existing library, like https://github.com/lemonde/angular-ckeditor, or create a simple directive yourself:

angular.module("myApp", [])
    .directive("ckeditor", [function(){
        return {
            restrict: "A",
            link: function (scope, elem, attrs) {
                CKEDITOR.replace(elem[0], {
                    // configuration
                });
            }
        }
    }]);

html:

<textarea ckeditor></textarea>