Javascript 在Vue.js中使用CKeditor实例

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

在这个表单中，我想用文本编辑器将“textarea”替换为name=“ckeditor1”

    <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>

更新->已解决

---

通过添加Vue.nextTick，我可以初始化编辑器。我为每个textarea添加了一个类“editor”，我希望它成为一个编辑器，然后使用class=“editor”从textareas中查找所有id

---

通过添加Vue.nextTick，我可以初始化编辑器。我为每个textarea添加了一个类“editor”，我希望它成为一个编辑器，然后使用class=“editor”从textareas中查找所有id

---

通过添加Vue.nextTick，我可以初始化编辑器。我为每个textarea添加了一个类“editor”，我希望它成为一个编辑器，然后使用class=“editor”从textareas中查找所有id

---

我还将CKeditor与laravel vue一起使用。您只需要使用CKeditor设置和获取基本数据

这是我的main.html文件，我需要它来编辑

<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>

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

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

---

我还将CKeditor与laravel vue一起使用。您只需要使用CKeditor设置和获取基本数据

这是我的main.html文件，我需要它来编辑

<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>

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

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

---

到底出了什么问题？它不会启动编辑器吗？Javascript控制台中是否有错误？@DavidK.Hess我没有收到任何错误，并且编辑器在my位于节中时没有显示。只要我在那部分外面放一个，它就工作得很好。到底出了什么问题？它不会启动编辑器吗？Javascript控制台中是否有错误？@DavidK.Hess我没有收到任何错误，并且编辑器在my位于节中时没有显示。只要我在那部分外面放一个，它就会工作得很好。

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

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