Question

我正在使用邮件系统发送大量电子邮件。我为redactor制作了一个插件，为例如添加了一个标签。名字。这些标签不应由用户编辑，只能删除。

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

是否有些人之前已经这样做过或知道该怎么做？

如果可以用另一个WYSIWYG完成，那么我愿意接受改变。

初始编辑器：

$("#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);
        }

    };
};

在编辑器中应如何显示

Tags example

Answer 1

我找到了一个解决方案（不是一个很好的解决方案......）

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();
        }

    };
};

Init redactor

$("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();
  }
});

WYSIWYG中的标签/占位符（Redactor）

1 个答案: