React.js

react-aceでselectedTextを取得する

はじめに

現在チームでプログラミングエディタを作成しています.
react-aceを利用してエディタ部分を作っているのですがreact.jsなんも知らない初心者なので公式ドキュメント見ても詰まりました…
そのメモとして記しておきます.

やりたいこと

タイトルにも書いてあるように選択したテキストを取得します.

道のり

公式ドキュメント

公式ドキュメントにはこんなことが書かれており, よっしゃーとコピペしたらもちろんエラーがでました. 「refs」って誰?って言われました. 僕も同意見です.

もっと読んでみたらドキュメントにこんな記述があって

    <AceEditor
        ref="aceEditor"
     />;

自分のものにはrefがなかったので追加してみましたができませんでした.
というかそもそもエラーでuseRef()やcreateRef()使えと言われました.
これ多分僕が全体的な理解をしてないからわかんないんだろうな.
雲行きが怪しくなってきた…

stack Overflow

似たような質問があった! やったぜ!
React v16.12 +だと

this.refName = React.createRef();

refName作って

     <AceEditor
        ref={this.refName}
     />

refを指定して

this.refName.current.editor.getSelectedText()

で取得できる.

refを自分で作ってそれを使って繋げてるっぽいな

ありがとうStack Overflow!

最終的なコード

今回はクラスコンポーネントではなく, 関数コンポーネントだったのでちょっと実装は変わりましたがこんな感じになりました.

const myRef = React.createRef();
    export default function EditArea () {

        const onSelectionChange = () => {

            const text = myRef.current.editor.getSelectedText();
            console.log(text);

        };
        return (
            <AceEditor
                onSelectionChange={onSelectionChange}
                ref={myRef}
            />
        );

}

onSelectionChangeはセレクションが変わったとき, つまりは選択範囲に変化が生じたときに呼ばれます.

追記

これよりもいいと思われる方法を発見した.
AceEditor の属性にonLoadというのがあり, それはエディタインスタンスを取得できます.
具体的には以下の通りです.

    export default function EditArea () {
        const editorInstance = "";
        const onSelectionChange = () => {

            const text = editorInstance.getSelectedText();
            console.log(text);

        };

       onLoad = (newEditorInstance) => {
           editorInstance = newEditorInstance;
        }
        return (
            <AceEditor
                onSelectionChange={onSelectionChange}
                onLoad={onLoad}
            />
        );

    }

エディタインスタンスの作成が終わったらonLoad関数が呼ばれます.
関数内でeditorInstanceを代入することで準備完了, あとはこのインスタンスの関数から呼び出すだけです.

ちなみにエディタ全体の文字を取得するのはgetValue()です.

おわりに

ちょぉぉぉとreact-aceがわかってきた.

参考

How to get the value of react component - AceEditor - Stack Overflow
How to get the value of react component - AceEditor - Stack Overflow
securingsincity/react-ace
React Ace Component. Contribute to securingsincity/react-ace development by creating an account on GitHub.
Ace - The High Performance Code Editor for the Web
Ref と DOM – React
ユーザインターフェース構築のための JavaScript ライブラリ
2+
そーたの技術ブログ

コメント

タイトルとURLをコピーしました