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

I want to use execCommand('formatblock') to select a line with the <p> tag or <span> with a specific class or id or any CSS style in my contentEditable <div> (own rich text editor).

我想使用execCommand('formatblock')来选择一个带有

标记或的行，在我的contentEditable

(拥有丰富的文本编辑器)中使用一个特定的类或id或任何CSS样式。

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

How can I add a class or id or CSS in this code?

如何在代码中添加类或id或CSS ?

5 个解决方案

#1

If you want to add id or class for CSS in content editable div, then you will use below code---

如果您想在内容可编辑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;
    }

#2

I got the solution.

我得到了解决方案。

Javascript:

Javascript:

function line(){

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

HTML

HTML

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

This is work perfectly for me. But i can not make jsfiddle right now. This is work for one line fine but not multiple line.

这对我来说是完美的工作。但是我现在不能做js小提琴。这是一条线的工作，但不是多线。

#3

Try this code: http://jsfiddle.net/lotusgodkk/GCu2D/57/

试试这个代码:http://jsfiddle.net/lotusgodkk/GCu2D/57/

Javascript:

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

HTML

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

#4

There are many ways to do it. Just use execCommand 'insertHTML' instead to replace selected text with wrapped code. Like this:

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

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

This will remove breaklines, tags like <b>, <i> and other intext-html-formatting - to keep them you need smth like this (thx to post):

这将删除断点，像， 和其他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);

This insertHTML does not works with IE. Check Documentation https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

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

#5

I had the same issue. I ended up using jQuery.

我有同样的问题。最后我使用了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' });

There is also this great library that could be helpful: https://github.com/timdown/rangy/wiki/Class-Applier-Module

还有一个很有用的库:https://github.com/timdown/rangy/wiki/Class-Applier-Module。

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