在Vue.js中使用CKeditor实例

本文介绍了在Vue.js中使用CKeditor实例的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I am trying to implement CKeditor in my Laravel-backoffice which build its views with Vue.js

在这种形式下，我想用文本编辑器将名称为"ckeditor1"的文本区域"替换为文本编辑器

In this form I want to replace the "textarea" with name="ckeditor1" with a 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填充，但这没有问题，因为所有字段都根据需要完美地填充了.问题只是初始化我的编辑器.

The @{{ }} fields are loaded and filled with json call and vue.js but there is no problem cause all fields are filled perfectly as needed. The problem is just the initializing of my editor.

这是我获取数据的地方:

This is where I get my data:

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"从文本区域中找到所有ID.

By adding Vue.nextTick I can initialize an editor. I added a class 'editor' to every textarea I want it to be an editor and then find all id's from the textareas with 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);
            });
        });
    });
},

在vue

在Vue.js中使用CKeditor实例

问题描述

推荐答案