Question

我在我的应用程序中使用ui-ace指令。如何突出显示在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>

在ace编辑器中突出显示所选文本

1 个答案: