vue3中ckeditor改变元素后，跳转到指定位置

在 Vue3 中使用 CKEditor 插件，当用户编辑完内容并触发了内容更改，你通常会监听 CKEditor 的 `contentChange` 或者 `change` 事件。当你接收到这些事件时，可以获取到编辑器当前的内容，然后更新对应的页面数据。接着，你可以使用 Vue 的 `$router.push` 或者 `$route.replace` 方法来导航到指定的位置。

以下是一个简单的示例：

<template>
  <div>
    <ckeditor v-model="editorContent" @contentChange="handleContentChange"></ckeditor>
    <button @click="goToSpecificPosition">Jump to Specific Position</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue';

export default {
  components: {
    CKEditor,
  },
  data() {
    return {
      editorContent: '',
      specificPositionRouteName: 'yourRouteName', // 替换为你的路由名
    };
  },
  methods: {
    handleContentChange(newContent) {
      this.editorContent = newContent;
      // 如果你想在内容变化后立即跳转，可以在这里添加 $router.push
      this.goToSpecificPosition();
    },
    goToSpecificPosition() {
      this.$router.push({ name: this.specificPositionRouteName });
    },
  },
  mounted() {
    // 初始化 CKEditor
    onMounted(() => {
      CKEditor.create(this.$refs.editorContainer, {
        // ...配置选项
      });
    });
  },
};
</script>

在这个例子中，每当内容发生变化，`handleContentChange` 方法会被调用，此时你可以直接调用 `goToSpecificPosition` 来跳转到指定的路由。