l2k 27 окт 2008 в 17:34

Подсветка текста в «TextArea»

4 мин

20K

JavaScript*

+46

Комментарии 28

Markovnin 27 окт 2008 в 17:38

круто, еще бы живой пример посмотреть ;-)

l2k 27 окт 2008 в 17:40

До дома доберусь — залью на сервер то, что получилось.
А так — можете руками всё собрать вместе :) и посмотреть локально — notepad'a и Opera/FireFox должно хватить.

Markovnin 27 окт 2008 в 17:41

это понятно, что статьи «хау-ту» обычно пишут с расчетом того, что кто-то доберется и сделает все как написано. я к тому, что было бы нагляднее и полезнее увидеть живой пример )

freehome 27 окт 2008 в 18:57

хорошо бы еще результаты тестов на разных браузерах увидеть

l2k 27 окт 2008 в 19:23

Добавил рабочие примеры.

maxshopen 27 окт 2008 в 17:59

На этом основаны все визивик-редакторы, насколько я понимаю. Так что можно какой нибудь FCK расковырять в качестве примера :)

l2k 27 окт 2008 в 18:13

Я написал основы. Всё, как можно проще — для новичков.
Если вам интерестно, что из этого можно сделать — тогда я напишу следующую статью: «Использование WYSIWYG» :)

maxshopen 27 окт 2008 в 18:32

Это я скорее товарищу Markovnin-у написал.

Спасибо за статью. Следующую буду ждать тоже, интересно.

НЛО прилетело и опубликовало эту надпись здесь

pietrovich 27 окт 2008 в 19:22

рад за вас, вы круты… а я такой ерундой занимался 6-7 лет назад и тем не менее считаю что статья найдет свой круг читателей.

l2k 27 окт 2008 в 19:26

Я не ставил себе задачу вас удивить.

У меня была своя задача. Я её для себя решил.
И так как я много времени потратил, чтобы найти хороший материал и разобраться в нём, решил сделать несколько статей на эту тему.

charger 27 окт 2008 в 21:14

Спасибо! Никак не мог найти время сам поковыряться.

dyakov 27 окт 2008 в 19:04

Это все конечно хорошо.
Здорово было бы, если подсветка кода включалась одним единственным атрибутом html или css-свойством… И обрабатывалась браузером. Давно жду. Жаль не то…

theOnlyBoy 27 окт 2008 в 19:17

Заголовок в первые пару секунд ввел буквально в шок, что за супер-секрет о textarea не знаю. Хороший заголовок :)
Советую вам развивать эту тему, постепенно усложняя алгоритмы и превнося новые возможности, написав простенький WYSIWYG. Плодотворная тема, если копнуть глубже.

LDEV 27 окт 2008 в 19:21

Отлично! Давно хотел узнать, как всё-таки WYSIWYG так красиво рисует контент ))

Hint 27 окт 2008 в 19:35

Последняя ссылка из статьи убивает Opera 9.61 ( zcn.ru/tmp/W3.html )

l2k 27 окт 2008 в 19:50

Вы абсолютно правы. Я уже исправил.

надо
NewTextArea.frame=frames[frame]?frames[frame]:document.getElementById(frame);
вместо
NewTextArea.frame=document.getElementById(frame);

Надо отослать баг-репорт в Оперу :)

НЛО прилетело и опубликовало эту надпись здесь

mdevils 27 окт 2008 в 20:27

//1) получить указатель NewTextArea.document=NewTextArea.frame.contentDocument?NewTextArea.frame.contentDocument:NewTextArea.frame.document?NewTextArea.frame.document:false;

NewTextArea.document = NewTextArea.frame.contentDocument || NewTextArea.frame.document || false;

Используйте краткую запись)

l2k 27 окт 2008 в 21:28

Век живи, век учись ;)
Спасибо!

not_ice 27 окт 2008 в 21:06

а возможно ли таким методом сделать подсветку синтаксиса html, php, css или js? имеется в виду повышение удобства редактирования шаблонов из цмсок.

l2k 28 окт 2008 в 11:37

Да, возможно. В следующих статьях я разберу эти методы.

НЛО прилетело и опубликовало эту надпись здесь

Buran 27 окт 2008 в 22:27

Автор, не стоило designMode уделять столько времени. contentEditable поддерживается в

IE 5.5
Opera 9
Firefox 3
и как минимум Safari 2

Firefox по статистике одного очень посещаемого сайта (не хочу называть имени) — 33%, из них Firefox 3 — 26,8% (от общего числа посетителей). Таким образом contentEditable не покрывает всего лишь 6,2% (Firefox 2). Для такой в принципе нетривиальной вещи, как WYSIWYG-редактор, это нормальная погрешность, на которую можно забить и получать удовольствие от правильного атрибута contentEditable.

-3

Goodkat 28 окт 2008 в 03:59

наверное, поэтому в Хроме не работает WYSIWYG на некоторых сайтах

sapegin 28 окт 2008 в 09:47

Как раз contentEditable там работает и даже Ctrl+B, Ctrl+I и Ctrl+U работают без всяких жабоскриптов (как и в Опере).

l2k 28 окт 2008 в 11:25

Ничего страшного. contentEditable работает так-же, как и designMode. По этому разобравшись с более сложными вещами, можно делать тоже самое с более простыми.

agreen 20 дек 2008 в 21:55

глупый вопрос: А почему NewTextArea.init работает только при событии body.onload?

Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Показать лучшие за всё время

Подсветка текста в «TextArea»

Комментарии 28

Публикации

Истории