Javascript 将ckeditor与引导和角度js一起使用

我正在使用angular和bootstrap框架开发web应用程序的前端。我希望有一个页面say-contribution.html，用户可以在其中提交他们选择的任何文章。我想在contribute.html页面中使用，用户可以在其中撰写文章。如何将ck编辑器与bootstrap和angular js集成

我在谷歌上没有找到任何合适的文章，而且我对前端web应用程序开发还不熟悉

---

任何代码/示例/文章都将不胜感激。

我正在使用angularjs和wrap引导部署CKEditor。这对我很有用：

    directive ('ckEditor', function () {
    return {
        require: '?ngModel',
        link: function($scope, $elm, attr, ngModel) {

            var config = {
                toolbar:[
                    { name: 'paragraph', items: [ 'NumberedList', 'BulletedList'] },
                    { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', '-', 'Undo', 'Redo'] },
                    //{ name: 'insert', items: [ 'SpecialChar'] },
                    { name: 'editing', items: [ 'Scayt', 'Options', 'Dictionaries', 'Check Spelling'] }
                ]
            };

            config.toolbarLocation = 'top';
            config.scayt_autoStartup = true;

            //config.removeButtons = '';
            //config.fontSize_sizes = 'petit/12px;normal/14px;grand/16px;';
            //config.extraPlugins = 'tab';
            config.tabSpaces = 4;

            var ck = CKEDITOR.inline ($elm[0], config);         

            ck.on('change', function( evt ) {

                var selection = evt.editor.getSelection();
                var range = selection.getRanges()[0];
                var cursor_position = range.startOffset;

                if(evt.editor.getData()) {
                    var words = evt.editor.getData().trim();

                    if($scope.getWordCount) {
                        $scope.wordCount = $scope.getWordCount(words);

                        $scope.$apply(function() {
                            ngModel.$setViewValue(evt.editor.getData() || '');
                        });
                        }
                    }
                }

            });    

            ngModel.$render = function (value) {
                if($scope.story && $scope.story.Content) {
                    ck.setData($scope.story.Content);
                }
            };

            $scope.$on("$destroy",function() {
                CKEDITOR.instances[ck.name].destroy();
            });
        }
    };
})

<div class="col-xs-11">
    <textarea type="text" ck-editor id="storyContent" ng-model="story.Content" required="" placeholder="Content" class="form-control" ></textarea>
</div>

指令（'ckEditor'，函数（）{ 返回{ 要求：“？ngModel”， 链接：函数（$scope、$elm、attr、ngModel）{ 变量配置={ 工具栏：[ {名称：'段落'，项目：['NumberedList'，'BulletedList']}， {name:'clipboard'，项：['Cut'，'Copy'，'Paste'，'PasteText'，'-'，'Undo'，'Redo']}， //{name:'insert'，项：['SpecialChar']}， {name:'editing'，items:['Scayt'，'Options'，'dictionary'，'Check Spelling']} ] }; config.toolbarLocation='top'； config.scayt_autoStartup=true； //config.removeButtons=''； //config.fontSize_size='petit/12px；normal/14px；grand/16px；'； //config.extraPlugins='tab'； config.tabSpaces=4； var ck=CKEDITOR.inline（$elm[0]，config）； ck.on（‘变更’，功能（evt）{ var selection=evt.editor.getSelection（）； var range=selection.getRanges（）[0]； var cursor_position=范围.STARTOFSET； if（evt.editor.getData（））{ var words=evt.editor.getData（）.trim（）； if（$scope.getWordCount）{ $scope.wordCount=$scope.getWordCount（单词）； $scope.$apply（函数（）{ ngModel.$setViewValue（evt.editor.getData（）| |“”）； }); } } } }); ngModel.$render=函数（值）{ if（$scope.story&&$scope.story.Content）{ setData（$scope.story.Content）； } }; $scope.$on（“$destroy”，函数（）{ CKEDITOR.instances[ck.name].destroy（）； }); } }; })

---

我正在部署带有angularjs和wrap引导的CKEditor。这对我很有用：

    directive ('ckEditor', function () {
    return {
        require: '?ngModel',
        link: function($scope, $elm, attr, ngModel) {

            var config = {
                toolbar:[
                    { name: 'paragraph', items: [ 'NumberedList', 'BulletedList'] },
                    { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', '-', 'Undo', 'Redo'] },
                    //{ name: 'insert', items: [ 'SpecialChar'] },
                    { name: 'editing', items: [ 'Scayt', 'Options', 'Dictionaries', 'Check Spelling'] }
                ]
            };

            config.toolbarLocation = 'top';
            config.scayt_autoStartup = true;

            //config.removeButtons = '';
            //config.fontSize_sizes = 'petit/12px;normal/14px;grand/16px;';
            //config.extraPlugins = 'tab';
            config.tabSpaces = 4;

            var ck = CKEDITOR.inline ($elm[0], config);         

            ck.on('change', function( evt ) {

                var selection = evt.editor.getSelection();
                var range = selection.getRanges()[0];
                var cursor_position = range.startOffset;

                if(evt.editor.getData()) {
                    var words = evt.editor.getData().trim();

                    if($scope.getWordCount) {
                        $scope.wordCount = $scope.getWordCount(words);

                        $scope.$apply(function() {
                            ngModel.$setViewValue(evt.editor.getData() || '');
                        });
                        }
                    }
                }

            });    

            ngModel.$render = function (value) {
                if($scope.story && $scope.story.Content) {
                    ck.setData($scope.story.Content);
                }
            };

            $scope.$on("$destroy",function() {
                CKEDITOR.instances[ck.name].destroy();
            });
        }
    };
})

<div class="col-xs-11">
    <textarea type="text" ck-editor id="storyContent" ng-model="story.Content" required="" placeholder="Content" class="form-control" ></textarea>
</div>

指令（'ckEditor'，函数（）{ 返回{ 要求：“？ngModel”， 链接：函数（$scope、$elm、attr、ngModel）{ 变量配置={ 工具栏：[ {名称：'段落'，项目：['NumberedList'，'BulletedList']}， {name:'clipboard'，项：['Cut'，'Copy'，'Paste'，'PasteText'，'-'，'Undo'，'Redo']}， //{name:'insert'，项：['SpecialChar']}， {name:'editing'，items:['Scayt'，'Options'，'dictionary'，'Check Spelling']} ] }; config.toolbarLocation='top'； config.scayt_autoStartup=true； //config.removeButtons=''； //config.fontSize_size='petit/12px；normal/14px；grand/16px；'； //config.extraPlugins='tab'； config.tabSpaces=4； var ck=CKEDITOR.inline（$elm[0]，config）； ck.on（‘变更’，功能（evt）{ var selection=evt.editor.getSelection（）； var range=selection.getRanges（）[0]； var cursor_position=范围.STARTOFSET； if（evt.editor.getData（））{ var words=evt.editor.getData（）.trim（）； if（$scope.getWordCount）{ $scope.wordCount=$scope.getWordCount（单词）； $scope.$apply（函数（）{ ngModel.$setViewValue（evt.editor.getData（）| |“”）； }); } } } }); ngModel.$render=函数（值）{ if（$scope.story&&$scope.story.Content）{ setData（$scope.story.Content）； } }; $scope.$on（“$destroy”，函数（）{ CKEDITOR.instances[ck.name].destroy（）； }); } }; }) 有用于codemirror、tinymce的插件，ace有用于codemirror、tinymce和ace的插件