add plugin in ng-ckeditor

Question

I'm using ng-ckeditor to work on ckeditor with angularJS. I have to add code snippet plugin in ckeditor. As per words of ng-ckeditor, I have passed plugin data into editorOptions. But still it is not getting loaded into ckeditor. I can't get that waht is issue. ng-ckeditor accepts uiColor value from editorOptions. But it doesn't work for plugin data. If anyone can help, it will be appreciated.

Here is my code

HTML

<textarea id="taDescription" name="taDescription" placeholder="Enter Description" rows="10" cols="80" ng-model="topic.description" ckeditor="editorOptions" required></textarea>

JS

$scope.editorOptions = {
    extraPlugins: 'codesnippet',
    uiColor: '#000000'
};

Note: I have included all the files related to ckeditor. So I'm sure that there is not any problem related to missing file etc.

Cannot find any problem with your provided code. That is weird. Any error message in console? Maybe u can try [refresh ckeditor's config](http://stackoverflow.com/questions/14940452/force-ckeditor-to-refresh-config) first. — MMhunter, Aug 06 '16 at 13:09
@MMhunter, Yes, that's weird. Because there is no any error in console. And I also have cleared all the cache files from browser too many times. But still same problem. — Akshay Vaghasiya, Aug 08 '16 at 05:52

score 1 · Answer 1 · answered Jul 26 '17 at 06:23

I think this angular directive does not support the functionality of adding extra plugins. I also faced the same problem when adding code snippet plugin to CKEditor in angular js and ended by implementing in following way: Add following script on your main page:

<script src="http://cdn.ckeditor.com/4.7.1/standard-all/ckeditor.js"></script>

Also, define config for CKEditor of code snippet plugin in following way:

<script>
var config = {
    extraPlugins: 'codesnippet',
    codeSnippet_theme: 'monokai_sublime',
    autoUpdateElement : true,
    height: '30%'
};</script>

You can also define this config in your page or in your main page(if yu need to add it to multiple pages). Then go to your page and use CKEditor as following:

<textarea ng-model="yourmodel" placeholder="Enter Description" id="description" name="description"></textarea>

At the end of the page you need to use following script:

<script>var editor = CKEDITOR.replace( 'description' , config);</script>

This script should be only added after your element otherwise it will give you the error of undefined element.

Hope this will help someone.

add plugin in ng-ckeditor

1 Answers1