contentEditable, execCommand и принудительное выделение вновь набранного текста

Question

Я дурачусь с contentEditable и execCommand и пытаюсь сделать так, чтобы при нажатии кнопки

• Если в contentEditable выделен текст, онстановится жирным шрифтом

• Если в contentEditable текст не выделен, то любой текст, введенный в contentEditable после нажатия кнопки, выделен жирным шрифтом

Я пыталсяиспользуя следующую команду Javascript:

 document.execCommand('bold', false, null);

Но, к сожалению, из-за этого выделенный текст становится жирным;если текст не выделен, и вы начинаете печатать после нажатия кнопки, текст отображается незакрашенным.

Я заметил, что если я нажимаю Ctrl + B в contentEditable, он делает именно то, что я хотел бы выполнить,но я хотел бы сделать это, используя Javascript (и не имитируя Ctrl + B в Javascript).

Answer 1

На самом деле вызов document.execCommand() делает именно то, что вы хотите (вы можете доказать это, вызвав его из обработчика событий keydown), и я подозреваю, что это эффект любой кнопки или чего-либо еще, что вы можете использовать для запуска команда это проблема.

Answer 2

Javascripts Range может проверить выделенный текст, см. эту ссылку .Вы можете использовать его, чтобы получить выделенный текст (начальный узел, конечный узел, смещение и т. Д.).Если вы хотите, чтобы новый текст был выделен жирным шрифтом, просто добавьте его в новый созданный <p>, который вы выделите жирным шрифтом в css.НО, это может не работать в IE ...