What order to test, execCommand and pasteHTML

[csdude55]

I'm working within a contenteditable section, and I have some HTML tags set up (bold, italics, underline, a handful of fonts and font sizes, colors).

I built the system in 2013, though. At the time, I did something like this:

var imgTag = 'blah blah blah';

if (document.selection) {
b.focus();

var c = document.selection;
if (c != null) {
var d = c.createRange();

if (d != null) d.pasteHTML(imgTag)
}
}

else if (document.body.innerHTML) {
b.focus();
document.execCommand('insertHTML', false, imgTag)
}

else document.execCommand(v, false, x)

I can't find browser compatibility for createRange() or pasteHTML(), and I honestly have no idea why I have execCommand() as the else since it's already in the second else if... but after 5 years no one has complained, so I'm guessing that everybody worked with one of the conditions.

I still have to deal with some older browsers (going back to IE7 and iOS 4), but for the most part people use modern browsers. So should I test for document.selection first, or execCommand?

[lucy24]

I honestly have no idea why I have execCommand() as the else

I got hung up on the two occurrences of b.focus(). If A exists, focus on it and do stuff; if not but there's a B then focus on that and do stuff; and if neither A nor B then just ... uh ... throw stuff in the general direction of the screen and hope it sticks?

Can we assume v and x (in the "else" line) are defined somewhere or other?

[csdude55]

I got hung up on the two occurrences of b.focus().

I'm not sure what my logic was, either... my only thought was that if the browser recognized document.body.innerHTML then it would recognize focus(), but if it didn't recognize innerHTML then it wouldn't recognize focus(), either (but would recognize execCommand()? Like I said, though, I built it 5 years ago...)

Can we assume v and x (in the "else" line) are defined somewhere or other?

Haha, sorry about that! I changed them to something more legible for the post, but forgot to change them in the last condition... in production, though, the two lines are the same, the only difference is the else() doesn't have the focus() command.

Since I already test that the browser supports contenteditable separately, I'm pretty sure that I can just test for execCommand first, and if it isn't recognized then assume document.selection for the else. Or should I do it the other way around?

[csdude55]

For the sake of posterity... I had to test for document.selection first. IE9 will pass the .innerHTML test, but chokes on the actual commands.