Ckeditor工具栏项目在Vue(Laravel)中不可用 [英] Ckeditor toolbar item is unavailable in Vue (Laravel)

问题描述

我在Laravel使用Ckeditor5表示VUE。在documentation之后，我使用npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic安装了模块，并在resources/js/app.js文件中启用了Ckeditor

import CKEditor from '@ckeditor/ckeditor5-vue';
Vue.use( CKEditor );
const app = new Vue({
    el: '#app',
});

之后，我导入了VUE组件中的ClassicEdditor

<template>
 // A lot of code here
 <div class="editor">
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
 </div>
</template>

<script>
  import Swal from 'sweetalert2';
  import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
  import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily'; // <----- Here is the error
  export default {
    props: ['groups'],

    mounted(){

    },
    data: function(){
      return {
        // My data
        editor: ClassicEditor,
        editorData: '',
        editorConfig: {
          // The configuration of the editor.
          toolbar: {
            items: [
              'FontFamily',
              '|',
              'bold',
              'italic',
              'underline',
              'subscript',
              'superscript',
              '|',
              'List',
              'Code',
              'EasyImage',
              'ImageUpload',
              '|',
              'link',
              'undo',
              'redo'
            ]
          }
        }
      }
    },
    methods: {
      // My methods here
    }
</script>

在控制台中ckeditor显示警告之后

Toolbarview-Item-不可用：请求的工具栏项为 不可用 {name: "FontFamily"}

在Error Codes页中显示

处理工具栏配置时出现问题。这个 具有给定名称的项不存在，因此在以下情况下将其省略 呈现工具栏。

所以我决定通过NPM安装插件，并在Vue组件中导入，但在

之后

import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';

Ckeditor引发错误

未捕获CKEditorError：ckeditor-duplated-module：某些CKEditor 5 模块重复

我已重新安装ckeditor-相同问题

推荐答案

看起来您正在导入现有生成，而您应该从源代码创建生成。看一下这个link，您可以在这里找到这个示例：

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

<script>
    // ⚠️ NOTE: We don't use @ckeditor/ckeditor5-build-classic any more!
    // Since we're building CKEditor from source, we use the source version of ClassicEditor.
    import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

    import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials';
    import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold';
    import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic';
    import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
    import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';

    export default {
        name: 'app',
        data() {
            return {
                editor: ClassicEditor,
                editorData: '<p>Content of the editor.</p>',
                editorConfig: {
                    plugins: [
                        EssentialsPlugin,
                        BoldPlugin,
                        ItalicPlugin,
                        LinkPlugin,
                        ParagraphPlugin
                    ],

                    toolbar: {
                        items: [
                            'bold',
                            'italic',
                            'link',
                            'undo',
                            'redo'
                        ]
                    }
                }
            };
        }
    };
</script>

要在Laravel中从源代码构建，您应该将此代码添加到您的webpack.Mix.js文件中(源代码：here，编辑了样式加载单例以应对他们所做的API更改)

const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
const CKEStyles = require('@ckeditor/ckeditor5-dev-utils').styles;
const CKERegex = {
  svg: /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+.svg$/,
  css: /ckeditor5-[^/\]+[/\]theme[/\].+.css/,
};

Mix.listen('configReady', webpackConfig => {
  const rules = webpackConfig.module.rules;
  const targetSVG = /(.(png|jpe?g|gif|webp)$|^((?!font).)*.svg$)/;
  const targetFont = /(.(woff2?|ttf|eot|otf)$|font.*.svg$)/;
  const targetCSS = /.css$/;

  // exclude CKE regex from mix's default rules
  for (let rule of rules) {
    if (rule.test.toString() === targetSVG.toString()) {
      rule.exclude = CKERegex.svg;
    }
    else if (rule.test.toString() === targetFont.toString()) {
      rule.exclude = CKERegex.svg;
    }
    else if (rule.test.toString() === targetCSS.toString()) {
      rule.exclude = CKERegex.css;
    }
  }
});

mix.webpackConfig({
  plugins: [
    new CKEditorWebpackPlugin({
      language: 'nl',
      addMainLanguageTranslationsToAllAssets: true
    }),
  ],
  module: {
    rules: [
      {
        test: CKERegex.svg,
        use: ['raw-loader'],
      },
      {
        test: CKERegex.css,
        use: [
          {
            loader: 'style-loader',
            options: {
              injectType: "singletonStyleTag",
            },
          },
          {
            loader: 'postcss-loader',
            options: CKEStyles.getPostCssConfig({
              themeImporter: {
                themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
              },
              minify: true,
            }),
          },
        ],
      },
    ],
   },
});

确保NPM安装要在CKEditor中使用的加载器(raw-loader、style-loader、postcss-loader)和模块。

这篇关于Ckeditor工具栏项目在Vue(Laravel)中不可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！