jquery - 简单的 Jquery 所见即所得编辑器问题

Question

我有一个名为 jWYSIWYG 的编辑器，它基本上是一个 Jquery 插件。因此，当我选择一些文本并单击 H1/H2/p 或面板中的任何内容时，我的文本将包含在那些相应的标签中

（例如<h1>My text</h1>）。

我的简单问题：如何将特定类附加到这些标签。我的意思是，每次用户点击 H1 标签按钮时，我希望它产生类似

<h1 class="someclassname">H1</h1>

我知道这一定很简单，如果有人可以提供帮助，那就太好了。

这是我正在使用的项目的链接： https ://github.com/akzhan/jwysiwyg

谢谢你。

Answer 1

我知道这是一个旧线程，但我想我会将我的发现发布给其他人，因为我也在寻找与 jWYSIWYG 类似的调整。

您可以使用“exec”覆盖控件的默认行为。

h1: {
    exec: function () {
        var range = this.getInternalRange(),
            common = $(range.commonAncestorContainer),
            $nodeName = range.commonAncestorContainer.nodeName.toLowerCase();
        if (common.parent('h1').length) {
            common.unwrap();
        } else {
            if ($nodeName !== 'body') {
                common.wrap('<h1 class="someclassname" />');
            }
        }
    }
}

Answer 2

查看文档，它应该是这样的：

$('#wysiwyg').wysiwyg({
    controls: {
        h1: { className: 'your-class-name' },
        h2: { className: 'your-other-class-name' },
    }
});