Question

我在多个插件中使用 renderMark ，但是仅调用了插件堆栈中的顶部插件，其余的被忽略。

//第一个插件

function MarkHotkey(options) {
  const { type, key, RenderTag, icon } = options

  return {
    onKeyDown(event, editor, next) {
      if (!event.ctrlKey || event.key != key) return next();
      event.preventDefault();
      editor.toggleMark(type)
    },
    renderMark(props, editor, next){
      const { children, mark, attributes } = props;
      if(type === mark.type){
       return <u {...attributes}>{children}</u>
     }
      next();
    }

//第二个插件

function MarkHotkey1(options) {
  const { type, key, RenderTag, icon } = options
  return {
    onKeyDown(event, editor, next) {
      if (!event.ctrlKey || event.key != key) return next();
      event.preventDefault();
      editor.toggleMark(type)
    },
    renderMark(props, editor, next){
      const { children, mark, attributes } = props;
      if(type === mark.type){
       return <i {...attributes}>{children}</i>
      }
      next();
    }

//插件数组

const plugins = [
  MarkHotkey1({ key: 'i', type: 'italic' ,RenderTag : 'em',icon :''}),
  MarkHotkey({ key: 'u', type: 'underline' ,RenderTag : 'u',icon :''}),
]

//带有插件的渲染编辑器

class App extends React.Component {
  state = {
    value: Value.fromJSON(initialValue), // editor initialisation
  }

  onChange = ({ value }) => {
    this.setState({ value })
  }

  render() {
    return <Editor 
    value={this.state.value} 
    onChange={this.onChange}
    plugins={plugins}
    />
  }

}

export default App;

当我按下 ctrl + i 时，它按预期运行，而 ctrl + u 则不运行。

Answer 1

您必须返回 next()，而不仅仅是调用它。之后，您的插件应按照列出的顺序触发，并继续传递事件，直到其中一个不返回 next()。

希望这会有所帮助！

SlateJs RenderMark在多个插件中

1 个答案: