wysihtml5 编辑器 - 如何简单地向元素添加类？

Question

我爱wysihtml5但我找不到任何关于向元素添加类这样简单的文档。

基本上我正在寻找的是一种允许 blockquote 元素有 2 种不同变体的方法:

blockquote.pull-left blockquote.pull-right

(其中每个类指定不同的样式属性)

所以理想情况下，我想创建 2 个额外的工具栏按钮，让我不仅可以使用 formatBlock 命令(用 blockquote 元素包装选择)，还可以指定 blockquote 的类。

有什么想法吗？

Answer 1

为清楚起见，尝试将这样的自定义函数添加到单独的 custom.js 文件中:

wysihtml5.commands.custom_class = {
  exec: function(composer, command, className) {
    return wysihtml5.commands.formatBlock.exec(composer, command, "blockquote", className, new RegExp(className, "g"));
  },
  state: function(composer, command, className) {
    return wysihtml5.commands.formatBlock.state(composer, command, "blockquote", className, new RegExp(className, "g"));
  }
};

然后在你的工具栏中传递类名，假设类是“pull-left”:

<a data-wysihtml5-command="custom_class" data-wysihtml5-command-value="pull-left">Pull left</a>

您还必须通过转到 advanced.js 文件并将它们添加到类下，将任何自定义类添加到“白名单”中，否则这些类将在您保存时被删除。