时间戳

首页 > 解决方案 > Vue.js 的 ckeditor 组件中的 insertText()

javascript - Vue.js 的 ckeditor 组件中的 insertText()

问题描述

我正在尝试将ckeditor 5集成到我的 vue js 应用程序中。我已经成功添加了 ckeditor，但现在我想通过单击按钮在 ckeditor 的光标位置添加一些文本。所以为了实现这一点，我尝试了 insertText方法。但是在将代码添加为editor.model.change(...)时，我无法在 vue 中获取编辑器实例

Uncaught ReferenceError: editor is not defined

代码 =>

<template>
  <ckeditor
    id="custom"
    ref="custom"
    name="custom"
    :editor="editor"
    :config="editorCustomConfig"
    v-model="message">
  </ckeditor>
  <a href="#" @click="addCodeInMsg">Add Text In Editor</a>
</template>
<script>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
export default {
  name: "topbar",
  },
  data() {
    return {
       editor: ClassicEditor,
       editorConfig: {
       },
       message:''
    };
  },
  methods: {
    addCodeInMsg(e){
      editor.change( writer => {
        const insertPosition = editor.model.document.selection.getFirstPosition();
        writer.insertText( 'CKEditor 5 rocks!', { linkHref: 'https://ckeditor.com/' }, insertPosition );
      } );
    }
  }
</script>

我不知道我在使用 ckeditor 组件时缺少什么。任何帮助将不胜感激。

标签： javascriptvue.jsvuejs2ckeditorvue-component

解决方案

当CKeditor准备好时，我可以通过你得到的编辑器对象来做到这一点。

在 on-ready-event 中，你会得到一个编辑器，然后我保存它以使用这些操作。

来源：https ://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#using-the-document-editor-build

推荐阅读