Question

我想使用execCommand('formatblock')选择<p>标记的行或<span>具有特定类或ID或我的contentEditable <div>中的任何CSS样式（拥有富文本编辑器）。

document.execCommand('formatblock', false, 'p'>;

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

Answer 1

如果你想在内容可编辑的div中添加CSS的id或类，那么你将使用下面的代码---

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


.oder2
    {
       padding-left: 3em;
    }

Answer 2

我得到了解决方案。

<强>使用Javascript：

function line(){

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

<强> HTML

<input type="button" value="addMarginBottom" onclick="javascript:line();"/>
<div class="textcontent" contenteditable ="true"></div>

这对我来说非常合适。但我现在不能制作jsfiddle。这适用于一行精细但不是多行。

Answer 3

试试此代码：http://jsfiddle.net/lotusgodkk/GCu2D/57/

<强>使用Javascript：

$(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

<div contenteditable="true">
  <p id="one">Sample text</p>
  <p>Sample text 2</p>
</div>

Answer 4

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

selection = window.getSelection().toString();
wrappedselection = '<span class="accent" style="somestyle">' + selection + '</span>';
document.execCommand('insertHTML', false, wrappedselection);

这会删除分隔线，<b>，<i>和其他intext-html格式的标记 - 以保证它们像你一样需要smth（thx到post）：

selection = window.getSelection().getRangeAt(0).cloneContents();
span = document.createElement('span');
span.appendChild(selection);
wrappedselection = '<span class="accent1">'+span.innerHTML+'</span>';
document.execCommand('insertHTML', false, wrappedselection);

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

Answer 5

我有同样的问题。我最终使用了jQuery。

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

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

Answer 6

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

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

请注意anchorNode而不是focusNode

Answer 7

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

这是一个例子：

// `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

如何在execCommand formatBlock'p'标签中添加类或id或CSS样式？

7 个答案: