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

Question

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

（例如

My text

） 。

我的简单问题： 如何将特定的类附加到这些标签。我的意思是，每次用户单击 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' },
    }
});