highlight html editor

PHPDev

Новичок
highlight html editor

Мне нужно сделать редактор с подцветкой синтаксиса, т.е. я ввожу какой-нибудь html код, а он сразу подсвечивается (как в обычных системных приложениях). По какому признаку подцвечивать - неважно, главное понять принцип. Потом нужно будет сделать напротив каждого тега <sometag> иконку с возможностью спрятать/развернуть контент внутри тега. Подскажите, пожалуйста, в каком направлении двигаться.
 

SelenIT

IT-лунатик :)
Нужно использовать основу простейшего wysiwyg-а. Вот в этом подсветка уже реализована (правда, он IE-only). Принцип несложный - замена в innerHTML последовательностей &amp;lt;что-то&amp;gt; на <span class="стиль_раскраски">&amp;lt;что-то&amp;gt;</span> (с помощью регвыров).
 

alexhemp

Новичок
SelenIT

Это сделано во многих редакторах - например в DevEdit тоже есть.

Другое дело - что подсветка там сделана один раз при переключении в режим "кода". А если делать подсветку каждый раз при изменении контента - то будет тормозить жутко.

Нужно что-то извращать, например подсвечивать только текущий элемент, но как-то это нужно сперва определять...

Перегрузка же текста вызовет "сбивание" позиции курсора.
 

PHPDev

Новичок
bgmи что ты мне дал за линк? Никаких притензий, спасибо за ответ, но это скрипты которые подсвечивают переданный им текст, я про них и так знал. У меня проблема в !динамической! подсветке, С PHP вообще мало связано
Всем спасибо, буду разбираться :/
 

bgm

&nbsp;
Нормальный линк.
У тебя два варианта: использовать исключительно javascript для разбора и анализа введённого текста, или использовать взаимодействие с серверной частью. Если первый вариант, то действительно c PHP никакой связи (посмотри как устроен FCKEditor.net - он подстветку делает на лету). Второй вариант - вот уже и PHP появился :)
 

PHPDev

Новичок
Если кому-то надо, можно попробывать взять подобное решение отсюда:
http://helene.muze.nl/
А вообще вот что думают некоторые специалисты:

[01:13] <Yurik> это возможно? http://php.com.ua/forum/viewtopic.php?t=3333
[01:14] <tony2001> Yurik: теоретически? наверное, да. практически - бред
[01:16] <tony2001> Yurik: есть же tokenizer в PHP
[01:16] <Yurik> ну
[01:17] <Yurik> знаю что такое токенайзер, знаю что такое wysiwyg (как например spaw)
[01:17] <tony2001> вероятно, его аналог можно сделать и на js
[01:17] <tony2001> *вероятно*
[01:17] <Yurik> но какая между ними может быть связь
[01:18] <Yurik> если висивиг редактирует то что показывает
[01:18] <Yurik> а для подсветки - нужно редактировать одно (сорцы пхп) а показывать другое (сорцы пхп в формате хтмл с подсветкой)
[01:18] <tony2001> ему раскраска же нужна
[01:19] <tony2001> вот парсить код и раскрашивать
[01:19] <Yurik> ну так несоответствие же самого кода и хтмл представления кода
[01:20] <Yurik> тут что - обратную анти-подсветку после каждого нажатия клавишы делать?
[01:20] <tony2001> вот-вот
[01:22] <Yurik> tony2001: сделать подсветку на javascript вобще не проблема
[01:22] <Yurik> tony2001: тут речь именно _о редакторе_
[01:22] <tony2001> Yurik: дада. можно и землю перевернуть, только опоры нет
[01:23] <Yurik> типа пишешь, а оно на ходу красит
[01:23] <tony2001> думаю, и редактор можно сделать, только он будет работать на P4 как на ЕС
 

crocodile2u

http://vbolshov.org.ru
Писать на JS такую штуку - это будет слишком тормозить. Вариант: показывать сорс с подсветкой по нажатию на кнопку.
 

PHPDev

Новичок
можно еще каждые n (выбрать оптимальное) секунд посылать на сервер ajax запрос и обновлять код в поле.

-~{}~ 11.07.06 19:42:

Может кто-то сталкивался с данной проблемой? чтобы обновить содержимое используется слеующий код:
document.getElementById("my_iframe_id").contentWindow.document.body.innerHTML = "somecodehere";

В ИЕ курсор при этом отправляется в конец, а в FireFox в самое начало. Как сделать чтобы он оставался на своей позиции?

-~{}~ 12.07.06 14:47:

для ИЕ проблему решил так:
Код:
var rng = document.getElementById(pointer).document.selection.createRange();
var position = { left : rng.offsetLeft, top : rng.offsetTop};
AddContent(content)
rng.moveToPoint(position.left, position.top);
rng.select();


Может кто-то знает аналог для Мозиллы?

-~{}~ 12.07.06 14:59:

для ИЕ проблему решил так:
Код:
var rng = document.getElementById(pointer).document.selection.createRange();
var position = { left : rng.offsetLeft, top : rng.offsetTop};
AddContent(content)
rng.moveToPoint(position.left, position.top);
rng.select();


Может кто-то знает аналог для Мозиллы?
 

senich

Новичок
Автор оригинала: PHPDev
Если кому-то надо, можно попробывать взять подобное решение отсюда:
http://helene.muze.nl/
А вообще вот что думают некоторые специалисты:

[01:13] <Yurik> это возможно? http://php.com.ua/forum/viewtopic.php?t=3333
[01:14] <tony2001> Yurik: теоретически? наверное, да. практически - бред
[01:16] <tony2001> Yurik: есть же tokenizer в PHP
[01:16] <Yurik> ну
[01:17] <Yurik> знаю что такое токенайзер, знаю что такое wysiwyg (как например spaw)
[01:17] <tony2001> вероятно, его аналог можно сделать и на js
[01:17] <tony2001> *вероятно*
[01:17] <Yurik> но какая между ними может быть связь
[01:18] <Yurik> если висивиг редактирует то что показывает
[01:18] <Yurik> а для подсветки - нужно редактировать одно (сорцы пхп) а показывать другое (сорцы пхп в формате хтмл с подсветкой)
[01:18] <tony2001> ему раскраска же нужна
[01:19] <tony2001> вот парсить код и раскрашивать
[01:19] <Yurik> ну так несоответствие же самого кода и хтмл представления кода
[01:20] <Yurik> тут что - обратную анти-подсветку после каждого нажатия клавишы делать?
[01:20] <tony2001> вот-вот
[01:22] <Yurik> tony2001: сделать подсветку на javascript вобще не проблема
[01:22] <Yurik> tony2001: тут речь именно _о редакторе_
[01:22] <tony2001> Yurik: дада. можно и землю перевернуть, только опоры нет
[01:23] <Yurik> типа пишешь, а оно на ходу красит
[01:23] <tony2001> думаю, и редактор можно сделать, только он будет работать на P4 как на ЕС
по поводу редактора http://tinymce.moxiecode.com/example_full.php?example=true
 

senich

Новичок
блин, протупил сорри, запарился. я в это диалоге чорт знает что прочитал.
 

PHPDev

Новичок
Продолжаю делать редактор, может кто-то знает как можно поставить каретку в определенный div/span.
Например, у меня есть следующий html код:

тут какой-то текст <div id="result"></div> тут опять текст.

Пусть у меня сейчас курсор находится в конце строки. Каким образом можно сделать, чтобы он оказался между тегами <div></div>? Нужно определенный фокус задать, может что-то еще...
 
Сверху