Можете подсказать Javascript редактор (Не wysiwyg. Хочу, чтобы было как на Тостере — жму на кнопку B, например, и появляется код)?

Question

[sorry_i_noob]

Подскажите текстовый редактор. Как тут для добавления вопроса / комментирования. Я пробовал CKEditor, но это wysiwyg. Да, там можно включить режим source, но тогда блокируется тулбар с кнопками. Нельзя нажать B, I и т.д. Они просто неактивные.
Я не знаю, как называются такие редакторы. А отрицание (НЕ wysiwyg, NOT wysiwyg) плохо гуглится.

Comments

[Антон Спирин]

Возможно, они используют самописный редактор. Функционал у него до боли прост.

[sorry_i_noob]

Антон Спирин, для back-end разработчика не особо прост. Я JS не так знаю, как PHP. Много времени уйдет на написание.

Answer 1

[Антон Спирин]

Пример, реализующий желаемый функционал.
Версия с использованием JQuery.

Comments

[sorry_i_noob]

Спасибо) А можно сделать так, чтобы курсор не исчезал? И теги ставились после него (А то сейчас они в каком-то хаотичном порядке ставятся - если написать одну букву и потом щелкать по B, например, то теги появляются то перед этой буквой, то после нее. Как-то странно.).

[Антон Спирин]

sorry_i_noob, поправил. Теперь поведение как на Toster. Для тегов с атрибутами функцию придется усоложнить.

[sorry_i_noob]

Антон Спирин, спасибо :-)
Для тегов с атрибутами... Вы про тег <a href="https://toster.ru/">toster</a>. Ну, наверно, я справлюсь.

А что означает вот это?

`${el.value.slice(0, start)}<${wrapper}>${el.value.slice(start, end)}</${wrapper}>${el.value.slice(end)}`;

Никогда не видел такой записи. Где про нее почитать? ${...} - это как бы обращение к коду, как к переменной? А </$ ? Да еще и кавычки такие странные...

[Антон Спирин]

el.value.slice(0, start)- часть строки до выделения
el.value.slice(start, end) - выделенная часть строки
el.value.slice(end) - часть строки после выделения
wrapper - имя тега
Ну и почитайте если не знаете, что такое шаблонные строки.

[Антон Спирин]

sorry_i_noob, обновил ответ. Я изменил реализацию. Теперь проще использовать атрибуты.

[sorry_i_noob]

Антон Спирин, большое спасибо :)