在ember中创建一个可切换的CKEditor

Question

我正在尝试在ember中创建一个内联CKEditor视图，用户可以使用“编辑”按钮打开或关闭该视图。这个想法是某些用户有权编辑内容，因此他们可以选择单击“编辑”按钮，将<blockquote>元素更改为CKeditor实例。单击“保存”应取消激活编辑器并恢复原始元素。我有一半使用以下代码，但问题是再次点击“编辑”不会重新创建编辑器，它只是在contenteditable上设置<blockquote>。

App.CkEditor = Ember.View.extend({
    tagName: 'blockquote',
    attributeBindings: ['contenteditable'],

    value: '',
    editor: null,
    enabled: false,

    contenteditable: function() {
        if (this.get('enabled')) {
            return 'true';
        } else {
            return 'false';
        }
    }.property('tagName', 'enabled'),

    enabledObserver: function() {
        var editor = this.get('editor');
        if (this.get('enabled') && Ember.isNone(editor)) {
            this.createElement();
        } else if (!this.get('enabled') && !Ember.isNone(editor)) {
            editor.destroy();
            this.createElement();
        }
    }.observes('enabled'),

    createElement: function() {
        if (this.get('enabled')) {
            // Create a CKEDitor
            var configOption = this.get('configOptions')[this.get('config')];
            var _this = this;

            CKEDITOR.disableAutoInline = true;
            this.$().ckeditor(function(element) {
                var editor = $(element).ckeditor().editor;
                _this.set('editor', editor);
                editor.setData(_this.get('value'));
                editor.on('change', function(event) {
                    if (editor.checkDirty()) {
                        _this.set('value', editor.getData());
                    }
                });
            });
        } else {
            // Just create a basic element
            this.$().html(this.get('value'));
        }
    },

    didInsertElement: function() {
        this.createElement();
    }
});