Как сделать текст жирным? Крошечный редактор WYSIWYG

как насчет перебора выбранной строки с помощью javascript при нажатии определенной кнопки стиля. вы просто можете сохранить несколько тегов, таких как ,, .... внутри массива, а затем выполнить цикл по выбранной вами строке. так что вы даже можете изменить стиль кнопок стилей, когда какой-либо из тегов был найден, чтобы пользователь знал, какой стиль только что используется. После отмены выбора стиля просто повторите цикл и удалите теги из строки.

Вам нужно рассмотреть случай, когда выбор пользователя охватывает абзацы. Например (границы выбора обозначены трубками):

<p>One <b>t|wo</b></p>
<p>Thr|ee</p>

Чтобы справиться с этим, вам нужно обернуть все текстовые узлы и частичные текстовые узлы в пределах выбора пользователя в теги <b>, а также определить, какие текстовые узлы уже выделены жирным шрифтом, и оставить их в покое. Это нетривиально, и document.execCommand() сделает все за вас, как и большие WYSIWYG-редакторы.

Большинство браузеров позволяют переключаться между режимами стиля, позволяя вам выбирать между стилем с использованием таких элементов, как <b> и <i>, или стилем с использованием элементов <span> с атрибутами стиля. Вы можете сделать это с помощью команды «StyleWithCSS», откатившись к «UseCSS» в старых браузерах. Следующие команды переключают для использования версии без CSS:

try {
    if (!document.execCommand("StyleWithCSS", false, useCss)) {
        // The value required by UseCSS is the inverse of what you'd expect
        document.execCommand("UseCSS", false, !useCss);
    }
} catch (ex) {
    // IE doesn't recognise these commands and throws.
}

Наконец, если вы переключились на использование классов CSS вместо <b> и т. д., вы можете использовать класс CSS. модуль применения моей библиотеки Rangy.