使用 execCommand() 添加 CSS Class

Question

function iBlockquote(){
    rich_body_eng.document.execCommand('FormatBlock', false, "<blockquote>");
    var quote = window.getSelection().focusNode.parentNode;
    $(quote).addClass("quote");
}

上面我使用 execCommand() 向所选文本添加了块引号。我想做的另一件事是向 <blockquote 标记添加一个名为 quote 的 CSS class，因此输出类似于 <blockquote class="quote">Some text</blockquote>。它似乎不起作用。请帮忙。

我正在使用这个问题作为指导。 How to add class or id or CSS style in execCommand formatBlock 'p' tag?

Answer 1

无法在 Firefox 中重现，这里是 JSFiddle，我已经尝试添加 class 和 jQuery 以及普通的 JavaScript，两者都有效。

HTML

<div contentEditable="true"></div>

CSS

This is just to visualize the blockquote.

.quote{
    width:300px;
    height:100px;
    background-color:khaki;
}

JavaScript

document.designMode = "on";
document.execCommand('formatBlock', false, "<blockquote>");
var quote = window.getSelection().focusNode.parentNode;
$(quote).addClass("quote");
//quote.className = "quote";

也许这有帮助，也许我做了一些不同的事情:)

Answer 2

您将 class 添加到错误的元素。尝试

var newEl = this.options.ownerDocument.getSelection().focusNode;
newEl.className = newEl.className + " new-para";

使用 execCommand() 添加 CSS Class

Adding CSS Class with execCommand()

html

javascript

css

jquery

execcommand

HTML

CSS

JavaScript