Question

我有文章，包含内部编程代码。我在前端使用了angular-highlightjs作为hilight代码，例如：

<div hljs>
<!-- put your codes here -->
</div>

一切正常！

现在我在管理面板中为CREATE / UPDATE文章添加了textAngular，但它从输入文章中删除了我的“hljs”指令。

我应该怎么做才能修复它？或建议我使用代码高亮支持的角度wysiwyg。

UPD： 谢谢你的建议，这段代码很好用：

        .config(function($provide){
        $provide.decorator('taOptions', ['taRegisterTool', '$delegate', '$compile', '$rootScope', function(taRegisterTool, taOptions, $compile, $rootScope){
            taRegisterTool('hljs', {
                iconclass: "glyphicon glyphicon-eye-open",
                tooltiptext: "code highlighting",
                action: function() {
                    var selectedText = window.getSelection();
                    var  hljsTag = '<div hljs>'+ selectedText +'</div>';
                    var scope = $rootScope.$new();
                    var element = $compile(hljsTag)(scope);
                    return this.$editor().wrapSelection('insertHTML', element.html(), true);
                }
            });
            taOptions.toolbar[1].push('hljs');
            return taOptions;
        }]);
    });

Answer 1

您可以在textAngular中创建自己的工具栏按钮，如下所示：

module.config(function($provide){
$provide.decorator('taOptions', ['taRegisterTool', '$delegate', function(taRegisterTool, taOptions){
    // $delegate is the taOptions we are decorating
    // register the tool with textAngular
    taRegisterTool('colourRed', {
        iconclass: "fa fa-square red",
        action: function(){
            this.$editor().wrapSelection('forecolor', 'red');
        }
    });
    // add the button to the default toolbar definition
    taOptions.toolbar[1].push('colourRed');
    return taOptions;
}]);

}）;

此按钮将使您在textAngular编辑器中选择的内容变为红色。

转到https://github.com/fraywing/textAngular/wiki/Customising-The-Toolbar了解更多信息

代码突出显示在textAngular所见即所得中

1 个答案: