Contenteditable div Remove <font>

Question

I have a contentEditable div with 14px as default font size. The default font size can be changed from a customization part (13-15px).

I added a button to change font size of selected text.

nicEditors.findEditor('myInstance1').nicCommand('fontSize', '5');

The button calls that function:

nicCommand : function(cmd,args) {
  document.execCommand(cmd,false,args);
}

The result in the contentEditable div:

<font size="5">Such a</font>

It works but I can't find a way to remove <font> tag. So I tried to put null or 0 or -1 or 2 or 3 in the argument of nicCommand but the result size is not the same of the rest.

Is there anyway to remove or to move the <font> tag from a contentEditable div ?

To move in this case: You can have this <font size="5">Something is controlled by a cat.</font>. The user select "Something is" to remove "Something is" from <font size="5">. In this case <font size="5"> must be placed after "is".

Answer 1

There is an option of document.execCommand I had not seen and which works fine with Firefox, Chrome and IE, removeformat:

nicEditors.findEditor('myInstance1').nicCommand('removeformat', null)

This calls that function:

nicCommand : function(cmd,args) {
  document.execCommand(cmd,false,args);
}

removeformat allows to remove all tags of the selected text. This remove as well as <b> as <i> as <u> as <font>. That's fine for me. :-)

Answer 2

if you want just to delete it, use

var reg = /<font\ssize="\d+">(.*?)<\/font>/g;
str = str.replace(reg, "$1");

where str is a content of your editor

demo