如何删除react上ckeditor5工具栏上的图像插件

Question

如何删除react上ckeditor5工具栏上的图像插件？

import React, { Component, Fragment } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

const Editor = ({onEditorStateChange, defaultValue}) => {
    const onChange = (event, editor ) => {
      const data = editor.getData();
      console.log(  data  );
      onEditorStateChange(data)
    };

    const onBlur = (event, editor) => {
      console.log( 'Blur.', editor );
    };

    const onFocus = (event, editor) => {
      console.log( 'Focus.', editor );
    };

    const onInit = (editor) => {
      // editor
      // You can store the "editor" and use when it is needed.
      console.log( 'Editor is ready to use!', editor );
    };

    return (
        <div className="editor">
            {/* <h2>Using CKEditor 5 build in React</h2> */}
            <CKEditor
                editor={ClassicEditor}
                data={defaultValue}
                onInit={onInit}
                onChange={onChange}
                onBlur={onBlur}
                onFocus={onFocus}
            />
        </div>
    );
}

export default Editor;

Answer 1

您可以为

config

组件提供

CKEditor

属性，并将字符串数组传递给

removePlugins

属性。

  <CKEditor
          editor={ClassicEditor}
          config={{
            removePlugins: ['Image', 'ImageCaption', 'ImageStyle', 'ImageToolbar', 'ImageUpload', 'MediaEmbed']
          }}
          data={defaultValue}
          onChange={onChange}
        >
        </CKEditor>

以下是有关 CKEditor React 组件的更多信息： https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#component-properties

这是配置选项的链接 https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html

这里是经典编辑器的默认插件列表：

• 必需品
• CKFinderUploadAdapter
• 自动套用格式
• 加粗
• 斜体
• 块引用
• CKFinder
• 简易图像
• 标题
• 图片
• 图片说明
• 图像样式
• 图像工具栏
• 图片上传
• 缩进
• 链接
• 列表
• 媒体嵌入
• 段落
• 从 Office 粘贴
• 桌子
• 表格工具栏
• 文本转换

Answer 2

我的 React 解决方案

在下面的 React 组件中，仅用于删除图像和媒体图标

<CKEditor
    editor={ClassicEditor}
    config={{
        removePlugins: ["EasyImage","ImageUpload","MediaEmbed"]
    }}
    data={form.description}
    onChange={(event, editor) => {
        const data = editor.getData();
        setForm((prev) => ({ ...prev, description: data }))
        // console.log({ event, editor, data });
    }}
/>

Answer 3

您可以使用此配置删除图像插件：

{
  removePlugins: ['ImageInsert', 'ImageUpload'],
}