HTML > javascript > créer une éditeur de texte

DesignMode and ContentEditable

avec document.designMode

 

document.designMode pour le document en entier

element.contentEditable pour juste un élément

 

document.execCommand modifie le HTML en ajoutant des balises autour de son contenu.

 

Il faut utiliser event.preventDefault(); s’il s’agit d’un bouton.

 

<div contenteditable="true">
  This text can be edited!
</div>

 

Get the new text when it changes

Make sure the text is safe

Render back your entire HTML

execCommand()

document.execCommand(command, showUI, value)

 

command peut être : backColor - bold - createLink - copy - cut - defaultParagraphSeparator - delete - fontName - fontSize - foreColor - formatBlock - forwardDelete - insertHorizontalRule - insertHTML - insertImage - insertLineBreak - insertOrderedList - insertParagraph - insertText - insertUnorderedList - justifyCenter - justifyFull - justifyLeft - justifyRight - outdent - paste - redo - selectAll - strikethrough - styleWithCss - superscript - undo - unlink - useCSS

—

https://codepen.io/Shokeen/pen/XXggZr

https://codepen.io/Shokeen/pen/eJRRVw

https://code.tutsplus.com/tutorials/create-an-inline-text-editor-with-the-contenteditable-attribute--cms-25655

https://www.shieldui.com/blogs/html-editor-in-your-browser

https://demos.shieldui.com/web/editor/basic-usage