2015-04-11 6 views
0

У меня есть статьи, содержащие внутренний код программирования. Я использовал угловой highlightjs для блика кода в веб-интерфейсе, например:подсветка кода внутри textAngular wysiwyg

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

Он отлично работает!

Теперь я включаю textAngular для статей CREATE/UPDATE в панели администратора, но он удаляет мою директиву «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; 
     }]); 
    }); 

ответ

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

Смежные вопросы