如何在 execCommand formatBlock 'p' 標簽中添加類或 id 或 CSS 樣式？

Question

我想使用 execcommand 'formatblock' 在我的 contenteditable div（自己的富文本編輯器）中通過 'p' 標記或跨度選擇具有特定類或 Id 或任何 css 樣式的行。 我為此搜索了很多，但找不到任何對我有價值的東西。

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

如何在此代碼中添加類或 id 或 css？

Answer 1

如果您想在內容可編輯的 div 中為 CSS 添加 id 或 class，那么您將使用以下代碼---

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


.oder2
    {
       padding-left: 3em;
    }

Answer 2

有很多方法可以做到。 只需使用 execCommand 'insertHTML' 來用包裝的代碼替換選定的文本。 像這樣：

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

這將刪除隔斷線，像<b> ， <i>和其他 intext-html-formatting 這樣的標簽 - 為了保留它們，您需要像這樣（感謝發布）：

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 3

我得到了解決方案。

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 4

試試這個代碼： 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 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