在 Vue.js 中使用 CKeditor 实例

【问题标题】：Use CKeditor instance in Vue.js在 Vue.js 中使用 CKeditor 实例
【发布时间】：2015-09-15 06:04:02
【问题描述】：

我正在尝试在我的 Laravel-backoffice 中实现 CKeditor，它使用 Vue.js 构建其视图

在这种形式中，我想用 texteditor 替换带有 name="ckeditor1" 的“textarea”

    <form method="POST" v-on="submit: onSubmitForm">
    <div class="col-md-4">

        <h1>Pagina: @{{ page.name }}</h1>

        <h2>Pagina algemeen</h2>

        <div class="form-group">
            <label for="name">
                Name
                <span class="error" v-if="! page.name">*</span>
            </label>
            <input type="text" name="name" id="name" class="form-control" v-model="page.name">
        </div>

        <ul class="nav nav-tabs">
            <li class="" v-repeat="page.translations" v-class="active: language == defaultLanguage"><a
                        data-toggle="tab" href="#@{{ language  }}">@{{ language  }}</a></li>
        </ul>
        <div class="tab-content">
            <div v-repeat="page.translations" id="@{{ language  }}" class="tab-pane fade in "
                 v-class="active: language == defaultLanguage">
                <h2>Pagina inhoud</h2>

                <div class="form-group">
                    <label for="name">
                        Titel
                    </label>
                    <input type="text" name="title_@{{ language  }}" id="title_@{{ language  }}"
                           class="form-control" v-model="title">
                </div>
                <div class="form-group">
                    <label for="content">
                        Inhoud
                    </label>
                    <textarea name="ckeditor1" id="content_@{{ language  }}"
                              class="form-control editor" v-model="content"></textarea>
                </div>

                <h2>Seo</h2>

                <div class="form-group">
                    <label for="meta_keywords">
                        Meta keywords
                    </label>
                    <input type="text" name="meta_keywords_@{{ language  }}"
                           id="meta_keywords_@{{ language  }}" class="form-control"
                           v-model="meta_keywords">
                </div>
                <div class="form-group">
                    <label for="meta_decription">
                        Meta description
                    </label>
                    <textarea name="meta_description_@{{ language  }}"
                              id="meta_description_@{{ language  }}" class="form-control"
                              v-model="meta_description"></textarea>
                </div>
                <input type="hidden" name="page_id_@{{ language  }}" id="page_id_@{{ language  }}"
                       class="form-control" v-model="page_id" value="@{{ pageId }}">
            </div>
        </div>

        <div class="form-group" v-if="! submitted">
            <button type="submit" class="btn btn-default">
                Opslaan
            </button>
        </div>
    </div>
</form>

@{{ }} 字段已加载并填充了 json 调用和 vue.js，但没有问题，因为所有字段都根据需要完美填充。问题只是我的编辑器的初始化。

这是我获取数据的地方：

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

var pages = new Vue({
    el: '#page',
    data: {
        pageId: document.querySelector('#page-id').getAttribute('value'),
        pageTitle: 'Pagina',
        page: [],
        submitted: false,
        defaultLanguage: 'nl',
        errors: false
    },

    ready: function() {
        this.fetch();
    },

    methods: {
        fetch: function() {
            this.$http.get('/api/pages/' + this.pageId, function(response) {

                this.page = response;
            });
        },
        onSubmitForm: function(e) {
            e.preventDefault();
            this.submitted = true;
            this.errors = false;

            if(this.pageId == 0) {
                this.$http.post('/api/pages/', this.page, function (response) {
                    if (response.errors.length) {
                        this.errors = response.errors;
                        this.submitted = false;

                        return;
                    }//endif

                    this.submitted = false;
                    window.location.href = '/admin/pages';
                });
            }
            else
            {
                this.$http.put('/api/pages/' + this.pageId, this.page, function (response) {

                    if (response.errors.length) {
                        this.errors = response.errors;
                        this.submitted = false;

                        return;
                    }//endif

                    this.submitted = false;
                    window.location.href = '/admin/pages';
                });
            }
        }

    }
});

更新 -> 已解决

通过添加 Vue.nextTick 我可以初始化一个编辑器。我为每个文本区域添加了一个“编辑器”类，我希望它成为编辑器，然后从文本区域中找到所有 id 为 class="editor"。

fetch: function() {
    this.$http.get('/api/pages/' + this.pageId, function(response) {

        this.page = response;

        Vue.nextTick(function () {
            $('textarea.editor').each(function(){
                CKEDITOR.replace(this.id);
            });
        });
    });
},

【问题讨论】：

• 到底出了什么问题？它不会启动编辑器吗？ Javascript 控制台是否有错误？
• @DavidK.Hess 我没有收到任何错误，当我的 位于 <div v-repeat="page.translations"> 部分时，编辑器没有显示。只要我在该部分之外放置一个 <textarea> ，它就会完美运行。