1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Medium Editorでカーソルを指定の位置に設定する方法

Posted at

##環境
Rails6 (6.0.1)
ruby 2.7.0

##参考
Change Cursor Position to particular para Medium Editor

##MediumEditorとは?
有名ブログサービスのMediumで使われているWYSIWYGエディターです。

※RailsにMediumEditorを導入する際はこちらの記事を参考にしました。

##なぜカーソル位置を指定の場所に移動させるのか?
インデントが適用されたpタグ内でテキストを入力し文字確定でEnterを押すとなぜかカーソル位置がpタグ内の先頭に移動してしまうバグが発生。このバグを解消させるために、元の位置にカーソルを戻す方法がないか調べた結果、カーソル位置を指定の場所に移動させる方法があったので、この記事にまとめました。

##カーソル位置を指定の場所に移動させる方法
MediumEditor.selectionが持つmoveCursor()メソッドを使うことで実現できた。

MediumEditor.selection.moveCursor(document, node, offset);

node: カーソルの移動先となるノード
offset: カーソルの位置(ノード内の文字列の先頭から〜番目)

今回の場合は文字確定時のカーソルがあるノードを取得する必要があったので
getSelection()メソッドのfocusNodeオプションを利用しました。

target_node = document.getSelection().focusNode;

あとはoffsetを指定することで任意の場所にカーソルを移動させることができます。

テキストノードの先頭にカーソルを移動させる

target_node = document.getSelection().focusNode;
MediumEditor.selection.moveCursor(document, target_node, 0);

テキストノードの先頭からn番目にカーソルを移動させる
5番目に移動させる場合

target_node = document.getSelection().focusNode;
MediumEditor.selection.moveCursor(document, target_node, 5);

##結果
今回のバグ対応は、文字確定時のカーソル位置に再びカーソルを戻すという特殊な対応だったので、getSelection()メソッドのfocusOffsetオプションでノードの先頭を基準に現在のカーソル位置を取得しました。

offset = document.getSelection().focusOffset;

上記の方法でnodeとoffsetを取得できたので、カーソル位置が変わってしまった後に下記の処理を走らせることで無事バグの解消はできました。

MediumEditor.selection.moveCursor(document, target_node, offset);
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?