Edited at

【AngularJS】テキストフォームの任意の位置にテキストを挿入するボタン

More than 3 years have passed since last update.

ブログのリッチエディタなどによくある、テキストフォームの任意の位置にテキスト(リンクタグなど)を挿入するボタンをAngualrJSで実装する方法です。


利用ライブラリ

こちらを利用しています。

angular-caret


input(type="text")の場合

<input type="text" ng-model="textHoge" eb-caret="caretHoge">

<button ng-click="addHoge()">hoge</button>

$scope.textHoge = 'Lorem Ipsum'

$scope.addHoge = ->
caret = $scope.caretHoge.get
text = $scope.textHoge
if caret
former = text.slice(0,caret)
latter = text.slice(caret)
$scope.textHoge = former + 'hoge' + latter
else
$scope.textHoge += 'hoge'
return


textareaの場合

<textarea ng-model="textFuga" eb-caret="caretFuga"></textarea>

<button ng-click="addFuga()">fuga</button>

$scope.textFuga = 'Lorem Ipsum'

$scope.addFuga = ->
caret = $scope.caretFuga.get
text = $scope.textFuga
if caret
former = text.slice(0,caret)
latter = text.slice(caret)
$scope.textFuga = former + '\n' + 'hoge' + '\n' + latter
else
$scope.textFuga += '\n' + 'hoge'
return


実際のコードはこちら

http://plnkr.co/edit/i5Jqof2IBi5HZDqfZSNa?p=preview


簡単な解説

input(type="text)あるいはtextareaeb-caretを設定し、それをコントローラー側で.getとすることで、キャレット(カーソルの位置)を取得できるようです。

あとは、それを使って、バインドしているテキストの指定の位置に入れたいテキストを追加するだけですね。

eb.caretモジュールを依存性注入することを忘れないようにしてくだい。

angular

.module 'app',['eb.caret']
.controller 'appCtrl',appCtrl