![](/img/trans.png)
[英]Creating a slate.js editor component that keeps its state in markdown
[英]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;
我似乎找不到執行不同的操作,並且想知道是否對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.