如何在 Vuejs 上的 CKEditor 5 上激活和/或安装插件

Question

我需要在 Vue 的 CKEditor 上激活 PastFromOffice 插件。这就是我设法工作的方式。我已经安装了 "npm install --save @ckeditor/ckeditor5-paste-from-office" 我知道这个插件以前安装在经典的 CKEditor 上。

<template>
   <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
</template>

<script>
   import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
   import VueCkeditor from '@ckeditor/ckeditor5-vue'

   console.log(ClassicEditor.defaultConfig.toolbar);
   export default {
       components: {
           ckeditor: VueCkeditor.component
       },
       data(){
           return {
               editor: ClassicEditor,
               editorData: '<p>Content of the editor.</p>',
               editorConfig: {
                   /*plugins: [
                       'PasteFromOffice'
                   ],*/
               }
           }
       }
   }
</script>

当我像评论中那样应用插件时，我得到一个空的输入类型文本框和许多 console.logs 声称 "The requested toolbar item is unavailable."

如果我添加： "import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';" 我收到此错误： "ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated."

我有什么关键字可以 google 或想法吗？谢谢！

Answer 1

<template>
  <div class="editor">
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig" />
  </div>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default {
  name: "Editor",
  data() {
    return {
      editor: ClassicEditor,
      editorData: "<p>Content of the editor.</p>",
      }
    }
};
</script>

require('./bootstrap');
import Vue from 'vue'
import Editor from './editor'
import CKEditor from "@ckeditor/ckeditor5-vue";

Vue.use(CKEditor);

new Vue({
    el : '#root',
    components: { Editor },
})

    <div id="root">
        <editor></editor>
    </div>

如何在 Vuejs 上的 CKEditor 5 上激活和/或安装插件

How to activate and or install plugins on CKEditor 5 on Vuejs

javascript

laravel

vue.js

ckeditor

ckeditor5