Ace.jsを用いてエディタを作成しているのですが,Anchorと言うものがそもそもどういったものなのか理解できていないようで教えていただきたいです
実現したいことは,例えば2行目3列目の位置に画像を表示して,文字と同じ様に何か入力があれば一緒に動くみたいなことがしたいです
例えば,1行目にaって打ったり3行目にbって打っても2行目に影響はないので動かないですが,2行目の1列目とかにcって打つと画像がc分右に動いて,1行目にエンターとか入れると1行下に動くみたいなイメージです
これを実装するためにAnchorに目をつけたのですが,どうも想定の動きはしないっぽい.....?2行目3列目以降に入力した時もAnchorの位置が更新されてました
入力された文字列の一番最後に常に位置するのかな....?
以下が試して見たことです.changeAnchorでpositionを更新してその位置に画像表示するみたいな感覚です
教えていただきたいことは,Anchorってそもそもどういったものなのか,っていうのと上記を実現する方法です
よろしくお願いいたします
JavaScript
1 editor.renderer.setAnimatedScroll(true); 2 const selection = editor.getSelection(); 3 const cursor = selection.getCursor(); 4 const aceDocument = editor.getSession().getDocument(); 5 const anchor = aceDocument.createAnchor(cursor.row, cursor.column); 6 anchor.on("change", e => { 7 const anchorPosition = editor.renderer.textToScreenCoordinates( 8 anchor.getPosition() 9 ); 10 changeAnchor( 11 anchorPosition.pageX, 12 anchorPosition.pageY 13 ); 14 });
あなたの回答
tips
プレビュー