插件上下文是一个在所有插件方法中都可用的对象，提供了对编辑器实例、插件配置和实用函数的访问。
访问插件上下文
插件方法
插件上下文作为第一个参数在所有插件方法中可用：
const MyPlugin = createPlatePlugin({
key: 'myPlugin',
handlers: {
onKeyDown: (ctx) => {
// ctx 就是插件上下文
console.info(ctx.editor, ctx.plugin);
},
},
});getEditorPlugin
当您需要访问其他插件的上下文时，这个函数特别有用。它支持跨插件通信和交互，实现更复杂和相互关联的插件行为。
const MyPlugin = createPlatePlugin({
key: 'myPlugin',
handlers: {
onKeyDown: ({ editor }) => {
const linkCtx = getEditorPlugin(LinkPlugin);
},
},
});useEditorPlugin
在 React 组件中，您可以使用 useEditorPlugin 钩子来访问插件上下文：
const MyComponent = () => {
const { editor, plugin, type } = useEditorPlugin(MyPlugin);
return <div>{type}</div>;
};插件上下文属性
editor
当前的 PlateEditor 实例：
const MyPlugin = createPlatePlugin({
key: 'myPlugin',
handlers: {
onChange: ({ editor }) => {
console.info('编辑器内容:', editor.children);
},
},
});plugin
当前插件的配置：
const MyPlugin = createPlatePlugin({
key: 'myPlugin',
handlers: {
onKeyDown: ({ plugin }) => {
console.info('插件键名:', plugin.key);
},
},
});getOption
获取插件特定选项值的函数：
const MyPlugin = createPlatePlugin({
key: 'myPlugin',
options: { myOption: 'default' },
handlers: {
onClick: ({ getOption }) => {
const myOption = getOption('myOption');
console.info('选项值:', myOption);
},
},
});getOptions
获取插件所有选项的函数：
const MyPlugin = createPlatePlugin({
key: 'myPlugin',
options: { option1: 'value1', option2: 'value2' },
handlers: {
onClick: ({ getOptions }) => {
const options = getOptions();
console.info('所有选项:', options);
},
},
});setOption
设置插件特定选项值的函数：
const MyPlugin = createPlatePlugin({
key: 'myPlugin',
options: { count: 0 },
handlers: {
onClick: ({ setOption }) => {
setOption('count', 1);
},
},
});setOptions
设置插件多个选项的函数：
const MyPlugin = createPlatePlugin({
key: 'myPlugin',
options: { option1: 'value1', option2: 'value2' },
handlers: {
onClick: ({ setOptions }) => {
setOptions({
option1: 'newValue1',
option2: 'newValue2',
});
},
},
});type
与插件关联的节点类型：
const MyPlugin = createPlatePlugin({
key: 'myPlugin',
node: { type: 'myNodeType' },
handlers: {
onKeyDown: ({ type }) => {
console.info('节点类型:', type);
},
},
});