在 ReactJS 中使用 AceEditor 知道光标在文本中的位置

Question

我正在创建一个代码编辑器，现在我想知道光标在 Ace 编辑器文本中的位置。

这是代码编辑器组件的代码：

import React, {Component} from 'react';
import AceEditor from 'react-ace';
import 'brace/mode/javascript';
import 'brace/theme/monokai';
import 'brace/ext/language_tools';

class EditorCodeEditor extends Component {
  onChange = e => {
    // Here  I want show for console the position of cursor
    Something like this? -> console.log(this.refs.ace.editor.focus);
  };

  render() {
    return (
      <div>
        <AceEditor
          mode="javascript"
          theme="monokai"
          name="blah2"
          onChange={this.onChange}
          fontSize={14}
          showPrintMargin={true}
          showGutter={true}
          highlightActiveLine={true}
          value="I AM AN EDITOR"
          ref='ace'
          focus={true}
          cursorStart={1}
          editorProps={{$blockScrolling: true}}
          style={{width: '100%', height: '400px'}}
          setOptions={{
            enableBasicAutocompletion: false,
            enableLiveAutocompletion: true,
            enableSnippets: true,
            showLineNumbers: true,
            tabSize: 2
          }} />
      </div>
    );
  }
}

export default EditorCodeEditor;

The problem is when I use ref='ace' in AceEditor label, it returns the error: Using string literals in ref attributes is deprecated. (react/no-string-refs) and the same with this.refs into onChange function.

有什么想法吗？感谢您的帮助。

Answer 1

ref 属性指的是 DOM 节点。并且可以通过以下代码访问：

ref={c => { this.ace = c; }}

为了获取光标的位置，AceEditor 有一个 onCursorChange 属性，您可以使用它。

onCursorChange(selection) {
  const cursorPosition = selection.getCursor();
}

在 ReactJS 中使用 AceEditor 知道光标在文本中的位置

Know where the cursor is in the text using AceEditor in ReactJS

javascript

ace-editor

reactjs