highlight.pack.js
 

Всем привет, есть визуальный редактор https://github.com/summernote/summernote/ , в нем с помощь плагина реализована подсветка highlight.js . Код самого плагина

/*!
 * summernote highlight plugin
 * [url]http://www.hyl.pw/[/url]
 *
 * Released under the MIT license
 */
(function (factory) {
    /* global define */
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node/CommonJS
        module.exports = factory(require('jquery'));
    } else {
        // Browser globals: jQuery
        factory(window.jQuery);
    }
}(function ($) {
    // Extends plugins for adding highlight.
    //  - plugin is external module for customizing.
    $.extend($.summernote.plugins, {
        /**
         * @param {Object} context - context object has status of editor.
         */
        'highlight': function (context) {
            var self = this;
            var ui = $.summernote.ui;
            var $editor = context.layoutInfo.editor;
            var options = context.options;
            var lang = options.langInfo;
            // add button
            context.memo('button.highlight', function () {
                // create button
                var button = ui.button({
                    contents: '<i class="fa fa-file-code-o"></i>',
                    tooltip: 'highlight',
                    click: function () {
                        self.show()
                    }
                });
                // create jQuery object from button instance.
                var $highlight = button.render();
                return $highlight;
            });
            this.createDialog = function () {
                var $box = $('<div />');
                var $selectGroup = $('<div class="form-group" />');
                var $textGroup = $('<div class="form-group" />');
                var $select = $('<select class="form-control ext-highlight-select" />');
                var languages = [
                    'css', 'html','java', 'js', 'php', 'xhtml', 'xml', 'xsl'
                ];
                for (var i = 0; i < languages.length; i++) {
                    $select.append('<option value="' + languages[i] + '">' + languages[i] + '</option>');
                }
                var $label = $('<label />');
                $label.html('Select language');
                $box.append($selectGroup.append($label));
                $box.append($selectGroup.append($select));
                var $label = $('<label />');
                $label.html('Enter the code fragment');
                var $textarea = $('<textarea class="ext-highlight-code form-control" rows="10" />');
                $box.append($textGroup.append($label));
                $box.append($textGroup.append($textarea));
                temp = temp.replace(/<br>/g, "\n");
                return $box.html();
            };
            this.createCodeNode = function (code, select) {
                var $code = $('<code>');
                $code.html(code);
                $code.addClass( select +' hljs');
                var $pre = $('<pre>');
                $pre.html($code);
                return $pre[0];
            };
            this.showHighlightDialog = function (codeInfo) {
                return $.Deferred(function (deferred) {
                    var $extHighlightCode = self.$dialog.find('.ext-highlight-code');
                    var $extHighlightBtn = self.$dialog.find('.ext-highlight-btn');
                    var $extHighlightSelect = self.$dialog.find('.ext-highlight-select');
                    ui.onDialogShown(self.$dialog, function () {
                        $extHighlightCode.val(codeInfo);
                        $extHighlightCode.on('input', function () {
                            ui.toggleBtn($extHighlightBtn, $extHighlightCode.val() != '');
                            codeInfo = $extHighlightCode.val();
                        });
                        $extHighlightBtn.one('click', function (event) {
                            event.preventDefault();
                            deferred.resolve(self.createCodeNode($extHighlightCode.val(), $extHighlightSelect.val()));
                        });
                    });
                    ui.onDialogHidden(self.$dialog, function () {
                        $extHighlightBtn.off('click');
                        if (deferred.state() === 'pending') {
                            deferred.reject();
                        }
                    });
                    ui.showDialog(self.$dialog);
                });
            };
            this.getCodeInfo = function () {
                var text = context.invoke('editor.getSelectedText');
                return '';
            };
            this.show = function () {
                var codeInfo = self.getCodeInfo();
                context.invoke('editor.saveRange');
                this.showHighlightDialog(codeInfo).then(function (codeInfo) {
                    self.$dialog.modal('hide');
                    context.invoke('editor.restoreRange');
                    if (codeInfo) {
                        context.invoke('editor.insertNode', codeInfo);
                    }
                });
            };
            //// This events will be attached when editor is initialized.
            //this.event = {
            //    // This will be called after modules are initialized.
            //    'summernote.init': function (we, e) {
            //        console.log('summernote initialized', we, e);
            //    },
            //    // This will be called when user releases a key on editable.
            //    'summernote.keyup': function (we, e) {
            //        console.log('summernote keyup', we, e);
            //    }
            //};
            //
            //// This method will be called when editor is initialized by $('..').summernote();
            //// You can create elements for plugin
            this.initialize = function () {
                var $container = options.dialogsInBody ? $(document.body) : $editor;
                var body = [
                    '<button href="#" class="btn btn-primary ext-highlight-btn disabled" disabled>',
                    'Insert code',
                    '</button>'
                ].join('');
                this.$dialog = ui.dialog({
                    className: 'ext-highlight',
                    title: 'Insert code',
                    body: this.createDialog(),
                    footer: body,
                    //callback: function ($node) {
                    //    $node.find('.modal-body').css({
                    //        'max-height': 300,
                    //        'overflow': 'scroll'
                    //    });
                    //}
                }).render().appendTo($container);
            };
            // This methods will be called when editor is destroyed by $('..').summernote('destroy');
            // You should remove elements on `initialize`.
            this.destroy = function () {
                ui.hideDialog(this.$dialog);
                this.$dialog.remove();
            };
        }
    });
}));

Все подсветка работает , но придобавлении html кода или другого кода он не экранируется. Я так понял что нужен аналог вот этой функции

.str_replace(array('[', '<','{','/','"',']'), array('&#91;', '&lt;','&#123;','&#47;','&#34;','&#93;')

, это функция replace , но как её добавить в выше указанный скрипт я не понял.

Нашел в highlight.pack.js замену символов, но почему - то вставляется в textarea как html теги , а не как символы (смотрю в исходном коде).
Видать проблема в редакторе

Нашел где заменяется, добавил свои спецсимволы

function dom_value($node, stripLinebreaks) {
  var val = isTextarea($node[0]) ? $node.val() : $node.html();
  // Cross Site Scripting Mitigation
  String.prototype.escape = function() {
    var tagsToReplace = {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;',
        '[': '&#91;',
        ']': '&#93;',
        '{': '&#123;',
        '}': '&#125;',
        '/': '&#47;',
        
    };
    return this.replace(/(?:&(?!amp;|gt;|lt;|#93;|#91;|#125;|#123;|#47;|)|>|<|]|[|}|{|/|)/g, function(tag) {
        return tagsToReplace[tag] || tag;
    });
  };
  val = val.escape();
  if (stripLinebreaks) {
    return val.replace(/[\n\r]/g, '');
  }
  return val;
}

Как правильно записать вот эту строку

return this.replace(/(?:&(?!amp;|gt;|lt;|#93;|#91;|#125;|#123;|#47;|)|>|<|]|[|}|{|/|)/g,