在 Vue.js 中使用 CKeditor 实例

Question

我正在尝试在我的 Laravel-backoffice 中实施 CKeditor，它使用 Vue.js

构建其视图

在这个表单中，我想用 name="ckeditor1" 替换 "textarea" 和 texteditor

    <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 我可以初始化一个编辑器。我在每个文本区域中添加了一个 class 'editor' 我希望它成为一个编辑器，然后使用 class="editor".

从文本区域中找到所有 id

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);
            });
        });
    });
},

Answer 1

通过添加 Vue.nextTick 我可以初始化一个编辑器。我在每个文本区域添加了一个 class 'editor' 我希望它成为一个编辑器，然后使用 class="editor".

从文本区域中找到所有 id

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);
            });
        });
    });
}

Answer 2

我也在使用 CKeditor 和 laravel-vue。您只需要使用 CKeditor 设置和获取基本的数据。

这是我的 main.html 文件，我需要 CKeditor。

<div class="row">
    <div class="col-md-2">
         <label for="body" >Mail Body :</label>
    </div>

   <div class="col-md-10" >
       <textarea class="ckeditor" id="body" rows="5" cols="70" name="body" v-model="template.body" ></textarea>
   </div>
</div>

之后我在 app.js 文件

中初始化我的 CKeditor 值

var vm = this;
axios.post('/fetchEmailTemplate', {
                'template_id' : template_id
                }).then(function (response) {

                    vm.template = response.data.emailTemplate;

                CKEDITOR.instances['body'].setData(vm.template.body);

                }).catch(function (error) {
                    console.log(error);
                    setNotification(error, "danger");
                });

如果我没记错的话，ckeditor 用自定义模板替换了原来的textarea。因此，您在 ckeditor 中看到的内容不会自动放入您的 messageArea textarea 中。这就是为什么您看不到模型有任何变化的原因。
因此，要进行更改，您需要在提交 app.js 文件之前替换更新的文本，如下所示.

this.template.body = CKEDITOR.instances['body'].getData();

在 Vue.js 中使用 CKeditor 实例

Use CKeditor instance in Vue.js

javascript

jquery

ckeditor

vue.js