エースエディタで選択したテキストをハイライト表示

Question

私は自分のアプリでui-aceディレクティブを使用しています。エーステキストボックスで選択したテキストをハイライト表示するにはどうすればいいですか？

これは.jsの私のエースコードです。

$scope.aceLoaded = function(_editor) { 
     // Editor part 
     var _session = _editor.getSession(); 

     _session.setUseWrapMode(true); 
     _session.setWrapLimitRange(); 
     var _renderer = _editor.renderer; 
     globalEditor = _editor; 
     _editor.$blockScrolling = Infinity 
     _renderer.setShowGutter(false);  
    }; 

これはHTMLの外観です。

<div ui-ace="{ 
            onLoad : aceLoaded, 
            onChange: aceChanged, 
            showGutter: false, 
            mode:'javascript', 

            require: ['ace/ext/language_tools'], 
            advanced: { 
            enableSnippets: true, 
            enableBasicAutocompletion: true, 
            enableLiveAutocompletion: true 
            } 
           }" class= "ace-chrome ace-editor div-width div-heights" ng-model="campaign.rule" id="rule"> 

Answer 1

...以下のようなカスタムフィルタを作成します

angular.module("filters").filter('highlight', ['$sce', 
     function ($sce) { 
      return function (text, phrase) { 
       if (phrase) { 
        text = text.replace(new RegExp('(' + phrase + ')', 'gi'), '<span class="highlighted">$1</span>') 
        return text; 
       } 
      }; 
     } 
]); 

<p ng-bind="data| limitTo:20 | highlight:columnFilterSearchInput"></p>