1

我在多个插件中使用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不工作。

4

1 回答 1

1

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

希望这可以帮助！

于 2019-07-11T04:10:47.060 回答