Come aggiungere class o id o stile CSS nel formato execCommandBlock ‘p’?

Voglio usare execCommand('formatblock') per selezionare una riga con il tag

o con una specifica class o id o qualsiasi stile CSS nel mio contentEditable

(proprio editor di testo avanzato).

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

Come posso aggiungere una class o un ID o CSS in questo codice?

Solutions Collecting From Web of "Come aggiungere class o id o stile CSS nel formato execCommandBlock ‘p’?"

Se vuoi aggiungere un ID o una class per i CSS nel contenuto modificabile div, allora userai il seguente codice —

   .oder2 { padding-left: 3em; } 

Ho la soluzione

Javascript:

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

HTML

  

Questo funziona perfettamente per me. Ma non posso fare jsfiddle adesso. Questo è lavoro per una linea fine, ma non per linee multiple.

Prova questo codice: 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

 

Sample text

Sample text 2

Ci sono molti modi per farlo. Basta usare execCommand ‘insertHTML’ invece di sostituire il testo selezionato con il codice avvolto. Come questo:

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

Questo rimuoverà breaklines, tag come , e altri intext-html-formatting – per mantenerli hai bisogno di smth come questo (thx per postare ):

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

Questo insertHTML non funziona con IE. Verifica documentazione https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

Ho avuto lo stesso problema. Ho finito per usare 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' }); 

C’è anche questa grande libreria che potrebbe essere utile: https://github.com/timdown/rangy/wiki/Class-Applier-Module

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