在ace編輯器中突出顯示所選文本

Question

我在我的應用程序中使用了ui-ace指令。如何突出顯示在ace文本框中選擇的文本。

這是我的.js中的ace代碼。

$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>