簡體   English   中英

Enter和Backspace無法在React中與Slate.js編輯器一起使用

[英]Enter and Backspace not working with Slate.js editor in React

我正在為應用程序實現文本編輯器,並嘗試添加一些用於快速編輯的熱鍵,例如粗體斜體 由於某種原因,在實現onKeyDown偵聽器以將格式化的文本呈現給退格鍵並輸入按鈕后,該按鈕不再起作用。 當鍵退格或回車時,不會觸發onChange處理程序,但對於其他所有鍵都會觸發。 這是下面的代碼。

TextEditor.js

import React, { Component, Fragment } from 'react';
import { Editor } from 'slate-react';
import { Value } from 'slate';
import Icon from 'react-icons-kit';
import { bold } from 'react-icons-kit/feather/bold';
import { italic } from 'react-icons-kit/feather/italic';
import { BoldMark, ItalicMark } from './TextComponents/index';
import FormatToolbar from './FormatToolbar/FormatToolbar';

const initialValue = Value.fromJSON({
  document: {
    nodes: [
      {
        object: 'block',
        type: 'paragraph',
        nodes: [
          {
            object: 'text',
            text: 'My first paragraph!'
          },
        ],
      },
    ],
  }
});

class TextEditor extends Component {
  state = {
    value: initialValue
  }

  onKeyDown = (e, change) => {
    if (!e.ctrlKey) {
      console.log('[I am not a control key]');
      return;
    }
    e.preventDefault();

    console.log('[e key]', e.key);
    switch (e.key) {
      case 'b': {
        change.toggleMark('bold');
        return true;
      }
      case 'i': {
        change.toggleMark('italic');
        return true;
      }
      default: {
        return false;
      }
    }
  }

  renderMark = props => {
    const { type } = props.mark;

    switch (type) {
      case 'bold':
        return <BoldMark {...props} />;
      case 'italic':
        return <ItalicMark {...props} />;
      default:
        return null;
    }
  }

  onChange = ({ value }) => {
    console.log('[on change]');
    this.setState({
      value
    });
  }

  render () {
    const { value } = this.state;

    return (
      <Fragment>
        <FormatToolbar>
          <button type="button" className="tooltip-icon-button">
            <Icon icon={bold} />
          </button>
          <button type="button" className="tooltip-icon-button">
            <Icon icon={italic} />
          </button>
        </FormatToolbar>
        <Editor
          value={value}
          onKeyDown={this.onKeyDown}
          onChange={this.onChange}
          renderMark={this.renderMark}
        />
      </Fragment>
    );
  }
}

export default TextEditor;

我正在遵循本教程https://www.strilliant.com/2018/07/15/let%E2%80%99s-build-a-fast-slick-and-customizableizable-rich-text-editor-with- slate-js-and-react /

我似乎找不到執行不同的操作,並且想知道是否對Slate / React進行了更改,從而阻止了我正在遵循的代碼正常工作。

對於使用同一教程並遇到此問題的任何人,我將參考Slate.js的文檔

https://docs.slatejs.org/walkthroughs/adding-event-handlers

Correct code

  onKeyDown = (e, editor, next) => {
    if (!e.ctrlKey) {
      return next();
    }
    e.preventDefault();

    switch (e.key) {
      case 'b': {
        editor.toggleMark('bold');
        return true;
      }
      case 'i': {
        editor.toggleMark('italic');
        return true;
      }
      default: {
        return false;
      }
    }
  }

Slate 2.0已棄用change ,現在使用editor 確保聲明next參數,並在未按熱鍵的情況下在返回時調用該參數(在我的情況下為控件)。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM