JavaScript execCommand жирная команда

Я делаю этот WYSIWYG-редактор, используя JavaScript-команду execCommand, а позже я буду настраивать его. Но у меня проблема. Прежде всего, вот ссылка codepen.io на мою проблему: https://codepen.io/pankaj260/pen/BGJaWJ?editors=1010. А ниже приведены все детали проблемы.

Возьмите этот пример строки "панкаж не чувствует себя хорошо".
Теперь, если вы видите мой код JavaScript, я использовал нечетную четную концепцию, чтобы показать, что полужирная кнопка активна / неактивна. И еще один оператор if, если выделенный текст должен быть жирным, и я не увеличиваю свою переменную boldCounter (см. Мой код javascript). Теперь, если я вставлю пример строки в contenteditable div. Следующее происходит.

  1. Если я выделю текст "pankaj", нажмите кнопку "полужирный", она станет жирной, а кнопка "полужирный" не станет желтой (отлично, круто).

  2. Теперь без выделения текста, если я нажимаю полужирную кнопку, кнопка становится желтой, и если я пишу что-либо после слова "хорошо", оно пишется жирным шрифтом (снова потрясающе), а после написания некоторого полужирного содержимого я снова нажимаю полужирную кнопку, цвет кнопки меняется на белый, и если я что-нибудь напишу, все будет написано обычным шрифтом.

  3. Но если я выберу последнее слово в моем примере строки и нажму полужирную кнопку, последнее слово станет жирным, то есть "хорошо". Но цвет кнопки не меняется на желтый. И все написано жирным шрифтом. Так что теперь, если я хочу прекратить выделять жирным шрифтом, я снова нажимаю кнопку жирным шрифтом, теперь цвет меняется на желтый, но шрифты являются обычными шрифтами. И отсюда все портится.

Я хочу, чтобы моя жирная кнопка работала как pell

0 ответов

Другие вопросы по тегам