Question

I have the following div:

<div contenteditable="true" unselectable="off" id="foo">

inside this div I want to make a specific amount of words look bold everytime a user makes an input. Therefor I have the following changelistener:

$('#foo').live('focus', function() {
   before = $(this).html();
}).live('blur keyup paste', function() { 
   if (before != $(this).html()) { $(this).trigger('change'); }
});

$('#foo').live('change', function() {
   // make certain words bold
   document.execCommand ('bold', false, null); // doesn't work
});

I tried to use the document.execCommand() but it only works when I select the text which I want to make bold. But I don’t want to select the text because the user doesn’t know the words which should be bold.

Answer 1

You can not use execCommand to bold text without selecting it first.

I don’t understand what are you doing exactly, but if you know the words you want to make bold, just replace them with <strong>your word</strong> in the editors html, using js.