[英]how to remove the image plugin on ckeditor5 toolbar on react
how to remove the image plugin on ckeditor5 toolbar on 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;
You can provide a config
property to the CKEditor
component and pass in an array of strings to the removePlugins
prop.您可以为
CKEditor
组件提供config
属性,并将字符串数组传递给removePlugins
。
<CKEditor
editor={ClassicEditor}
config={{
removePlugins: ['Image', 'ImageCaption', 'ImageStyle', 'ImageToolbar', 'ImageUpload', 'MediaEmbed']
}}
data={defaultValue}
onChange={onChange}
>
</CKEditor>
Here is more information on the CKEditor React component: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#component-properties以下是有关 CKEditor React 组件的更多信息: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#component-properties
Here is a link to the configuration options https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html这是配置选项的链接https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html
Here is a list of the default plugins with the ClassicEditor:下面是 ClassicEditor 的默认插件列表:
My React solution
我的反应解决方案
In my React component below only worked to remove Image and Media icons在我下面的 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 });
}}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.