javascript - 如何在反应中删除ckeditor5工具栏上的图像插件

Question

如何在反应时删除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;

标签： javascriptreactjsckeditor

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

下面是 ClassicEditor 的默认插件列表：

• 要点
• CKFinderUploadAdapter
• 自动格式化
• 大胆的
• 斜体
• 块报价
• CKFinder
• 易图
• 标题
• 图片
• 图片说明
• 图像样式
• 图像工具栏
• 图片上传
• 缩进
• 关联
• 列表
• 媒体嵌入
• 段落
• PasteFromOffice
• 桌子
• 表格工具栏
• 文本转换