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 ?

How/where do you init the ckeditors? Probably with jQuery? The ng-templates are loaded in asynchronously, so after the ckeditors are initialized by jquery — devqon
– devqon, Commented May 17, 2016 at 14:32

devqon · Accepted Answer · 2016-05-18 08:52:50Z

3

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>

answered May 18, 2016 at 8:52

devqon

14k2 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use CKeditor in template with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related