Jquery 所见即所得（Redactor）中的标记/占位符

我正在开发一个邮件系统来发送大量电子邮件。 我为redactor制作了一个插件，它在例如first name中添加了一个标签。 用户不应编辑这些标记，而应将其删除

我的问题是，每次我使用this.code.get（）获取代码时，它都会清理代码，并且不会返回我的“标记”。标记中的文本也是可编辑的

有没有人以前做过或者知道怎么做

如果可以用另一个所见即所得来完成，那么我愿意改变

Init编解码器：

$("#redactor").redactor({
            buttons: ['html', 'formatting', 'bold', 'italic',
                'unorderedlist', 'orderedlist', 'alignment'],
            plugins: ['tags'],
            toolbarExternal: toolbar,
            allowedTags: ['p', 'h1', 'h2', 'pre', 'div', 'span'],
            iframe: true,
            keydownCallback: function(e)
            {
                console.log(this.code.get());
            },
            startCallback: function () {
              ...
            },
            destroyCallback: function () {
              ...
            },
            blurCallback: function (e) {
               ...
            }
        })

插件

var fields = {
    "first_name" : "First name",
    "last_name" : "Last name",
    "e_mail" : "E-mail"
}

RedactorPlugins.tags = function()
{
    return {
        init: function ()
        {
            var dropdown = {};
            var redactor = this;
            $.each(fields, function( key, value ) {
                dropdown[key] = { title: value , func: redactor.tags.pointFirstCallback };
            });

            var button = this.button.add('fields', 'tags');

            this.button.addDropdown(button, dropdown);
        },
        pointFirstCallback: function(buttonName)
        {
            this.insert.html('<span field="'+buttonName+'" class="tag">'+fields[buttonName]+'</span> ', false);
        }

    };
};

var字段={
“名字”：“名字”，
“姓氏”：“姓氏”，
“电子邮件”：“电子邮件”
}
RedactorPlugins.tags=函数（）
{
返回{
init：函数（）
{
var下拉列表={}；
var redactor=this；
$.each（字段、函数（键、值）{
下拉[键]={title:value，func:redactor.tags.pointFirstCallback}；
});
var button=this.button.add（'fields'，'tags'）；
this.button.addDropdown（按钮，下拉菜单）；
},
pointFirstCallback:函数（buttonName）
{
this.insert.html（“”+字段[buttonName]+“”，false）；
}
};
};

它在编辑器中应该是什么样子

我找到了一个解决方案（不是一个漂亮的，而是一个解决方案…）

---

我正在进行类似的挑战。我在Redactor 8和9中遇到了这个问题：但在Redactor 10中我找不到类似的问题。你找到好的解决办法了吗？嘿@JonnyWhite。我制作了自己的插件。我将很快在回复中发布：）@ThomasBolander你是否为Redactor（可能是版本10）编写了插件？@splattne我现在发布了我的解决方案。。如果有什么不合理的地方，请告诉我。。我是从我的内容中抄出来的，所以对其他人来说不会有点难看：）你的方法看起来很有前途。一旦我有时间在我的应用程序中测试它，我会让你知道的。

var fields = {};
fields["field_first_name"] = "First name";        
fields["field_last_name"] = "Last name";
fields["field_e_mail"] = "E-mail";


RedactorPlugins.tags = function () {
    return {
        init: function () {
            var dropdown = {};
            var redactor = this;
            $.each(fields, function (key, value) {
                dropdown[key] = {title: value, func: redactor.tags.tagsCallback};
            });

            var button = this.button.add('fields', 'Shortcodes');

            this.button.addDropdown(button, dropdown);
        },
        tagsCallback: function (buttonName) {
            var elem;
            if ($(this.selection.getParent()).is(".tag, span.tag"))
                elem = $(this.selection.getParent());
            else
                elem = $(this.selection.getCurrent())

            if ($(elem).is(".tag")) {
                this.caret.setAfter($(elem));
                this.insert.text(" ");
            }

            var node = $('<samp />').attr("title", fields[buttonName]).addClass("tag").attr("field_id", buttonName).text(fields[buttonName]);
            this.insert.node(node);
            this.caret.setAfter(node);
            this.code.sync();
        }

    };
};

$("editor").redactor({
  buttons: ['formatting', 'bold', 'italic', 'unorderedlist', 'orderedlist', 'alignment', 'link'],
  plugins: ['tags', 'fontsize', 'fontcolor', 'underline'],
  allowedTags: ['u', 'span', 'p', 'a', 'h1', 'h2', 'h3', 'h4', 'h5', 'pre', "samp", "strong", "em", "li", "ul", "ol", "br"],

  keydownCallback: function (e) {
    var elem;
    if ($(this.selection.getParent()).is(".tag, f"))
      elem = $(this.selection.getParent());
    else
      elem = $(this.selection.getCurrent())

    if ($(elem).is(".tag") && (e.keyCode == 8 || e.keyCode == 46)) {
      $(elem).remove();
    }
    else if ($(elem).is(".tag")) {
      this.caret.setAfter($(elem));
    }

    if ($(elem).is(".tag") && (e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40)) {
      if (e.keyCode == 37)
        this.caret.setBefore($(elem));
      else
        this.caret.setAfter($(elem));
    }

    if ($(elem).is(".tag")) {
      $(elem).text($(elem).attr("title"));
    }
  },

  keyupCallback: function (e) {
    var elem;
    if ($(this.selection.getParent()).is(".tag"))
      elem = $(this.selection.getParent());
    else
      elem = $(this.selection.getCurrent())


    if ($(elem).is(".tag") && (e.keyCode == 8 || e.keyCode == 46)) {
      e.preventDefault();
      $(elem).remove();

    }
    else if ($(elem).is(".tag")) {
      e.preventDefault();
      this.caret.setAfter($(elem));
    }

    if ($(elem).is(".tag") && (e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40)) {
      e.preventDefault();
      if (e.keyCode == 37)
        this.caret.setBefore($(elem));
      else
        this.caret.setAfter($(elem));
    }

    if ($(elem).is(".tag")) {
      $(elem).text($(elem).attr("title"));
    }
  },

  clickCallback: function (e) {
    var elem;
    if ($(this.selection.getParent()).is(".tag"))
      elem = $(this.selection.getParent());
    else
      elem = $(this.selection.getCurrent())


    if ($(elem).is(".tag")) {
      this.caret.setAfter($(this.selection.getCurrent()));
    }
  },

  changeCallback: function () {
    $("samp.tag").each(function () {
      if ($(this).attr("title") !== $(this).text())
        $(this).remove();
    })
    this.code.sync();
  },

  blurCallback: function (e) {
    $("samp.tag").each(function () {
      if ($(this).attr("title") !== $(this).text())
        $(this).remove();
    })
    this.code.sync();
  }
});