javascript - JQuery TextNTags 插件在更改触发器后删除标签格式 `syntax`

Question

我正在使用 JQuery TextNTags plugin在我的网络应用程序中。这是原始代码:

$.browser = {
    webkit: true
};
$(function () {
    $('textarea.tagged_text').textntags({
        triggers: {'!': {
            uniqueTags   : false,
            syntax       : _.template('![<%= id %>:<%= type %>:<%= title %>]'),
            parser       : /(!)\[(\d+):([\w\s\.\-]+):([\w\s@\.,-\/#!$%\^&\*;:{}=\-_`~()]+)\]/gi,
            parserGroups : {id: 2, type: 3, title: 4},
        }, '#': {
            uniqueTags   : false,
            syntax       : _.template('#[<%= id %>:<%= type %>:<%= title %>]'),
            parser       : /(#)\[(\d+):([\w\s\.\-]+):([\w\s@\.,-\/#!$%\^&\*;:{}=\-_`~()]+)\]/gi,
            parserGroups : {id: 2, type: 3, title: 4},
        }, 'PP:': {
            uniqueTags   : false,
            syntax       : _.template('PP:[<%= id %>:<%= type %>:<%= title %>]'),
            parser       : /(PP:)\[(\d+):([\w\s\.\-]+):([\w\s@\.,-\/#!$%\^&\*;:{}=\-_`~()]+)\]/gi,
            parserGroups : {id: 2, type: 3, title: 4},
        }},
        onDataRequest:function (mode, query, triggerChar, callback) {
            var data = {
                '!': [
                    { id:1, name:'Daniel Zahariev (via !)',   'img':'http://example.com/img1.jpg', 'type':'contact1' },
                    { id:2, name:'Daniel Radcliffe (via !)',  'img':'http://example.com/img2.jpg', 'type':'contact1' },
                    { id:3, name:'Daniel Nathans (via !)',    'img':'http://example.com/img3.jpg', 'type':'contact1' }
                ],
                '#': [
                    { id:4, name:'Daniel Zahariev (via #)',  'img':'http://example.com/img1.jpg', 'type':'contact2' },
                    { id:5, name:'Daniel Radcliffe (via #)', 'img':'http://example.com/img2.jpg', 'type':'contact2' },
                    { id:6, name:'Daniel Nathans (via #)',   'img':'http://example.com/img3.jpg', 'type':'contact2' }
                ],
                'PP:': [
                    { id:7, name:'Daniel Zahariev (via PP:)',  'img':'http://example.com/img1.jpg', 'type':'contact3' },
                    { id:8, name:'Daniel Radcliffe (via PP:)', 'img':'http://example.com/img2.jpg', 'type':'contact3' },
                    { id:9, name:'Daniel Nathans (via PP:)',   'img':'http://example.com/img3.jpg', 'type':'contact3' }
                ]
            };

            query = query.toLowerCase();
            var found = _.filter(data[triggerChar], function(item) { return item.name.toLowerCase().indexOf(query) > -1; });

            callback.call(this, found);
        }
    });



    $('.get-syntax-text4').click(function() {
        $('textarea.tagged_text_ex4').textntags('val', function(text) {
            alert(text);
            console.log(text);
        });
    });
});

在这段代码中，我试图通过删除 :<%= title %> 来更改每个触发器的语法。从它。

但是当我这样做时，它会删除标签背景色。以下是修改语法之前的 fiddle :http://jsfiddle.net/6205ef8j/6/修改后:http://jsfiddle.net/6205ef8j/7/

你能告诉我为什么会这样吗？

我还有另一个问题，我认为它与我的上述问题有关。如果有人能告诉我parserGroups有什么用？在文档中写道:

Object that maps the indexes of the parsed groups with the corresponding tag properties.

但是我无法理解这个定义。

Answer 1

背景来自一个实际的独立分层 div 标签，其中标题用于映射具有格式的文本。此外，如果您想使用编辑模式，则需要保留标题。