关于javascript：如何以execCommand formatBlock’p’标签添加类或id或CSS样式？

How to add class or id or CSS style in execCommand formatBlock 'p' tag?

我想使用execcommand'formatblock'通过'p'标签选择一行，或者在我的contenteditable div(自己的富文本编辑器)中使用特定的类或ID或任何CSS样式来跨距。我为此进行了很多搜索，但找不到任何对我有价值的东西。

1	document.execCommand('formatblock', false, 'p');

如何在此代码中添加类或ID或CSS？

如果要在内容可编辑的div中为CSS添加ID或类，则将使用以下代码-

1
2
3
4
5
6
7
8
9
10
11
12
13

function CssFnctn()
{
document.execCommand('formatblock', false, 'p')
var listId = window.getSelection().focusNode.parentNode;
$(listId).addClass("oder2");
}

.oder2
{
padding-left: 3em;
}

相关讨论

有很多方法可以做到这一点。只需使用execCommand'insertHTML'代替用包装的代码替换选定的文本。像这样：

1
2
3

selection = window.getSelection().toString();
wrappedselection = '' + selection + '';
document.execCommand('insertHTML', false, wrappedselection);

这将删除断行线，，等标记以及其他intext-html格式-要使其保持不变，您需要这样的代码(要发布的代码)：

1
2
3
4
5

selection = window.getSelection().getRangeAt(0).cloneContents();
span = document.createElement('span');
span.appendChild(selection);
wrappedselection = ''+span.innerHTML+'';
document.execCommand('insertHTML', false, wrappedselection);

此insertHTML不适用于IE。检查文档https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

我找到了解决方案。

Javascript：

1
2
3
4
5
6

function line(){

window.execCommand('formatblock', false, 'p');
selectedElement = window.getSelection().focusNode.parentNode;
selectedElement.style.marginBottom = '100px';
}

的HTML

1	<input type="button" value="addMarginBottom" onclick="javascript:line();"/>

这对我来说是完美的工作。但是我现在不能做jsfiddle。仅适用于一行，而不适用于多行。

尝试以下代码：http://jsfiddle.net/lotusgodkk/GCu2D/57/

Javascript：

1
2
3
4
5
6
7
8
9
10
11
12

$(document).ready(function () {
$('div').click(function () {
var sel = window.getSelection();
var range = document.createRange();
el = document.getElementById('one'); //Get the element
range.selectNodeContents(el);
sel.removeAllRanges();
sel.addRange(range);
document.execCommand('formatblock', false, null); //execute command.
document.execCommand('bold', false, null); //execute command.
});
});

的HTML

1
2
3
4
5

Sample text


Sample text 2

相关讨论

可靠地找到由execCommand创建的元素的一种方法是比较运行它之前和之后的子元素列表。在execCommand被调用之前不存在的所有元素都被execCommand添加。

这是一个例子：

1
2
3
4
5
6
7
8
9
10

// `container` is the contenteditable container element
// Get all the existing elements
const elementsBefore = Array.from(container.querySelectorAll("*"));
// Run the command (wrap selection in a p tag)
document.execCommand("formatblock", false,"p");
// Get all the existing elements again
const elementsAfter = Array.from(container.querySelectorAll("*"));
// Find any that elements didn't exist before `execCommand` and select the first one
const newElement = elementsAfter.filter(e => !elementsBefore.includes(e))[0]
// `newElements` should now be the p tag that was added

要将类添加到p标签，我认为它实际上应该像这样...

1
2
3
4
5

function CssFnctn() {
document.execCommand('formatblock', false, 'p')
var listId = window.getSelection().anchorNode.parentNode;
listId.classList = 'oder2';
}

请注意，anchorNode而不是focusNode

我遇到过同样的问题。我最终使用了jQuery。

1
2
3
4
5
6
7

document.execCommand(optionCommand, false, null);

let snippets = $('.js-editor-content-snippet');
let lists = snippets.find('ul, ol');

lists.css({ margin: '0', padding: '0 0 0 20px' });
lists.find('li').css({ margin: '0 0 12px' });

还有一个很棒的库可能会有所帮助：https://github.com/timdown/rangy/wiki/Class-Applier-Module

1	rangy.createClassApplier(String theClass[, Object options[, Array tagNames]])