How to remove H1 formatting in ContentEditable (wysiwyg)

Question

Except for using Undo, I don’t think there is a way to remove h1 and h2 tags in editable content. The expected behavior is to click on the H1 button to switch it, but it is not. There is also a “delete formatting” button, but it only works on highlighted items, in italics, etc. Is there any way to do this through javascript?

Edit: The result should remove the opening and closing tag H1, and not replace it with anything else.

Please see a simplified example: http://jsfiddle.net/kthornbloom/GSnbb/1/

<div id="editor" contenteditable="true"> <h1>This is a heading one</h1> How can I remove the header styling if I want to? </div> 

Answer 1

I decided to implement the approach that I outlined in my comment on my other answer: traversing nodes in a selected range and deleting certain nodes (in this case, based on the tag name).

Here's the full demo. It will not work in IE <= 8 (which does not support DOM Range and Selection support), but it will be used in all other major browsers. One of the problems is that the choice is not always saved, but this is not too difficult to achieve.

http://jsfiddle.net/gF3sa/1/

This example includes modified range bypass code from elsewhere on SO .

 function nextNode(node) { if (node.hasChildNodes()) { return node.firstChild; } else { while (node && !node.nextSibling) { node = node.parentNode; } if (!node) { return null; } return node.nextSibling; } } function getRangeSelectedNodes(range, includePartiallySelectedContainers) { var node = range.startContainer; var endNode = range.endContainer; var rangeNodes = []; // Special case for a range that is contained within a single node if (node == endNode) { rangeNodes = [node]; } else { // Iterate nodes until we hit the end container while (node && node != endNode) { rangeNodes.push( node = nextNode(node) ); } // Add partially selected nodes at the start of the range node = range.startContainer; while (node && node != range.commonAncestorContainer) { rangeNodes.unshift(node); node = node.parentNode; } } // Add ancestors of the range container, if required if (includePartiallySelectedContainers) { node = range.commonAncestorContainer; while (node) { rangeNodes.push(node); node = node.parentNode; } } return rangeNodes; } function getSelectedNodes() { var nodes = []; if (window.getSelection) { var sel = window.getSelection(); for (var i = 0, len = sel.rangeCount; i < len; ++i) { nodes.push.apply(nodes, getRangeSelectedNodes(sel.getRangeAt(i), true)); } } return nodes; } function replaceWithOwnChildren(el) { var parent = el.parentNode; while (el.hasChildNodes()) { parent.insertBefore(el.firstChild, el); } parent.removeChild(el); } function removeSelectedElements(tagNames) { var tagNamesArray = tagNames.toLowerCase().split(","); getSelectedNodes().forEach(function(node) { if (node.nodeType == 1 && tagNamesArray.indexOf(node.tagName.toLowerCase()) > -1) { // Remove the node and replace it with its children replaceWithOwnChildren(node); } }); } removeSelectedElements("h1,h2,h3,h4,h5,h6"); 

Answer 2

This may not suit your needs, but you can do this by using the FormatBlock command and passing "div" or "pre" as the parameter:

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

Demo: http://jsfiddle.net/GSnbb/2/ [jsFiddle deleted]

EDIT : Yes, this does not answer the question as it is now. However, it precedes editing the question of replacing the <h1> element and is a reasonable answer to the original question.

Answer 3

This is possible with javascript, the logic is this:

• get the selected text and its position (cf. Get the text of the selected / selected text as well as javascript - Get the selected text position )

• remove all <h1> and </h1> from the selected text

   s = s.replace(/<h1>/g, ''); s = s.replace(/<\/h1>/g,''); 

• Paste the corrected text instead of the original

I developed a solution based on your JSFiddle , but requires some tweaking.

works : removing <h1> and </h1> from selected text in Gecko and webKit browsers

not developed : IE support - cf. links in jsfiddle should not be difficult

are broken

• replacing incomplete samples (containing only one of <h1> and </h1> ) - easy to fix
• deleting <h1> when it is right at the beginning of the selected text - you will need to play a little with selection and ranges to sort them.

PS Have you considered using an existing text editor plugin instead of creating it yourself?