我正在使用 Redactor 编辑器作为 Perch 的一部分。我想让编辑器能够（可选地）将"button" 的类添加到他们添加的任何<a> 标记中。这可以通过现有的“添加链接”模式中的附加选项来实现，也可以是编辑器工具栏中的单独按钮。
是否有人对实现这一目标的最佳方法有任何指导？任何指针表示赞赏。
这是我当前的配置设置：
config.plugins = [];
config.buttons = ['format','bold','italic','deleted','link','lists'];
config.formatting = ['p', 'blockquote', 'h2', 'h3', 'h4'];
【问题讨论】：
标签： javascript redactor
我知道这是一个老问题，但我厌倦了在我遇到的每个旧线程中遇到相同的半生不熟的解决方案。
我写了一个插件，可以让你配置一个类名列表，内容编辑者在添加/编辑链接时可以从中选择。
它与默认的 Redactor 链接模块无缝结合。
【讨论】：
如其他答案所述，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 标记部分，整个事情就坏了）。
【讨论】：
您可以使用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、heading 等）。
换句话说，由于<a> 是一个内联元素（不是块元素），如果您尝试使用内置的 Redactor 功能创建一个选项，那么您似乎很不走运。
【讨论】：
我对 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");
希望这会有所帮助！ :)
【讨论】：