javascript - 将 ckeditor 与 Bootstrap 和 Angular JS 结合使用

Question

我正在使用 Angular 和 Bootstrap 框架开发 Web 应用程序的前端。我想要一个页面——contribute.html，用户可以在其中提交他们选择的任何文章。我想使用ck editor在tribute.html页面中，用户可以在其中撰写文章。如何将 ck 编辑器与 Bootstrap 和 Angular JS 集成？

我没有通过谷歌搜索找到任何合适的文章，而且我是前端 Web 应用程序开发的新手。

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

Answer 1

我正在使用 AngularJS 和 Wrap-Bootstrap 部署 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>