Question

I am using the Redactor editor as part of Perch. I would like to give the editor the ability to (optionally) add the class of "button" to any <a> tag they add. This could be via an additional option in the existing Add a Link modal, or could be a separate button in the editor toolbar.

Does anyone have any guidance as to the best way to achieve this? Any pointers appreciated.

This is my current config setup:

config.plugins = [];
config.buttons = ['format','bold','italic','deleted','link','lists'];
config.formatting = ['p', 'blockquote', 'h2', 'h3', 'h4'];

Answer 1

您可以使用formattingAdd为格式下拉列表创建一组自定义的格式选项。这将允许您添加自己的CSS类。

formattingAdd: {
  'red-p-add': {
    title: 'Red Paragraph',
    api: 'module.block.format',
    args: {
      tag: 'p',
      class: 'red-styled',
    },
  },
}

很遗憾，根据Official Documentation：

formattingAdd只能应用于块标记（p，pre，blockquote，div，header等）。

换句话说，由于<a>是内联元素（不是块元素），因此，如果您尝试使用内置的Redactor功能创建选项，那么您似乎不走运。

Answer 2

我对Redactor不太熟悉，但是也许可以在元素加载后使用回调或纯JavaScript来实现。

<style>
  .my-custom-class-1 {
    background-color: red;
  }
  .my-custom-class-2 {
    font-size: 16px;
  }
  .my-custom-class-3 {
    font-family: Helvetica Neue, Helvetica, Arial;
  }
</style>

不确定链接返回的内容是什么，但如果是html元素，则可以添加带有回调的类。

  $R('#content', {
    callbacks: {
      link: {
        inserted: function(link) {

          // use the classList API to remove and add classes
          link.classList.remove("my-custom-class-1");
          link.classList.add("my-custom-class-1");

          // add or remove multiple classes
          link.classList.add("my-custom-class-1", "my-custom-class-2", "my-custom-class-3");
          link.classList.remove("my-custom-class-1", "my-custom-class-2", "my-custom-class-3");

        }
      }
    }
  });

如果链接具有自定义ID，则您可以使用纯JavaScript来实现

  const link_1 = document.getElementById('linkId_1');
  const link_2 = document.getElementById('linkId_2');
  const link_3 = document.getElementById('linkId_3');

  // use the classList API to remove and add classes
  link_1.classList.remove("my-custom-class-1");
  link_1.classList.add("my-custom-class-1");

  // add or remove multiple classes
  link_1.classList.add("my-custom-class-1", "my-custom-class-2", "my-custom-class-3");
  link_1.classList.remove("my-custom-class-1", "my-custom-class-2", "my-custom-class-3");

希望这会有所帮助！：）

Answer 3

如其他答案所述，formattingAdd不能应用于标签。这是最新版本的redactor的插件，该插件可将突出显示的文本/链接转换为具有您所关注的特定类的标签：

(function($R) {
  $R.add('plugin', 'button', {
    init: function(app) {
      this.app = app;
    },

    activate: function() {
      // Remove existing link if any
      this.app.api('module.link.unlink')

      // Add a tag with 'button' class
      this.app.inline.format({ tag: 'a', class: 'button' })
    }
  });
})(Redactor);

在定义并加载该代码之后，您需要对redactor json配置进行一些更新以引入功能：

// include the plugin to redactor's world
"plugins": ["button"],
...

"formattingAdd": [
  ...
  // add a "Button" option in the formatting dropdown,
  // but use it to trigger your own plugin's function
  {
    "api": "plugin.button.activate",
    "args": {
      "class": "button",
      "tag": "a"
    },
    "title": "Button"
  },
]

我试图将this.app.api('module.link.open')作为函数activate的最后一行，所以一旦激活了链接类，链接模式就会被打开。很好，但是我注意到根据初始选择的范围有些不一致的行为（如果只选择了文本，则效果很好，但是如果还选择了DOM标签部分，整个事情就坏了。）

选择将课程添加到<a> in Redactor editor

3 个答案: