кто подскажет принципы работы TinyMCE и ему подобных библиотек? вот редактор http://www.worz.ru/ Как работает? Там как-то textarea подкладывается, но ее не видно. В место нее отображается блок форматированного текста. TinyMCE хотел разложить, да в ней код нечитабельный...
то есть нечитабельный? обычно есть файл *_src.js - там все читабельно. а самому понять принцип работы будет очень трудновато, не зная тонкостей программирования на js.
Там текст не форматированный... Все в одну строчку... Если уж тут у бывалых не найдется, то тогда да. Тогда буду ковырять до посинения. Очень мне интересно стало.
Trank сам разберись, никто не сможет тебе объяснить, это слишком долгий расказ, который по памяти не расскажешь.
Поверхностно смотрел на код визуального редактора. Как понял, там iframe наложен на textarea. Но вот как посылать данные в textarea из iframe так я не понял. Объясните принцип, пожалуйста.
Как интересно. А найдется такой же простенький пример визуального редактора основанного НЕ на свойстве designMode?
А где я сказал, что он плох? И что исходя из этого мне нужно аргументировать? Я прочел, что designMode это не единственный способ. К тому же мне писали, что и я считаю, что эти слова нельзя отнести к приведенному примеру.
Хорошая статья по поводу визуальных редакторов! Просто и наглядно! Здесь подробное описание execCommand
Недавно делал так: При вводе каждого нового символа в textarea формы, содержание всей textarea копируется в фрейм рядом. Тоесть в форме: <b>Текст</b>, а при переносе в фрейм: Текст. Получается некий предпросмотр, как в macromedia: сверху код, снизу то, как оно будет в браузере. JS кода при этом минимум.
Я тоже так сделал, но только используя designMode - в итоге: два окошка, если правишь в редакторе - тут же все отображается в wysiwyng'е, если в wysiwyng'е то отображается в редакторе. еще сдделал кнопки для смены режимов отображения: только wysiwyng, только редактор, или оба. ИМХО удобно. Напрягает только что при правке в wysiwyng'е в редакторе все отображается без форматирования и отступов, но с этим можно мириться...
Я чего-то не понял - на одной странице не могут быть два визуальных редактора? В FF по крайней мере не работает.
Kreker Что именно не работает в FF? "Код в студию" S.t.A.M. Ну я бы за всех не говорил. Тем более про такого монстра, как fck.
Ивашка У меня первый редактор инициализируется и вставляется нужный текст, а второй - нет. И ошибок в ФФ нет. А в ИЕ пишет - "document.body - null или не является объектом" и дает ссылку на строку, где вставляется текст во второй редактор. Код редакторов одинаков, за исключением разных id. HTML: <table class="redactortbl"> <tr> <td style="width: 70%; border-right: 1px solid #000000; border-bottom: 1px solid #000000"> Текст <iframe src='#' id='redactor_2' name='redactor_2' class="frame"></iframe><br /> </td> <td class="botbord"> <script type="text/javascript"> designInit("redactor_2"); </script> <input type="hidden" name="redactor_2_text" id="redactor_2_text" /> </td> </tr> <tr style="background-color: #ffffff"> <td> <input type="button" value="Отправить" name="submitted" onClick="submite(Array('redactor_2'))" /> </td> </tr> </table> <script type="text/javascript"> getIFrameDocument("redactor_2").document.body.innerHTML = "asdadddsd"; </script> [js] function designInit(redactor_id) { // Определим Gecko-браузеры, т.к. они отличаются в своей работе от Оперы и IE var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1; // Получаем доступ к объектам window & document для ифрейма var obj = getIFrameDocument(redactor_id).document; if (!obj.designMode) alert("Визуальный режим редактирования не поддерживается Вашим браузером"); else obj.designMode = (isGecko) ? "on" : "On"; } function getIFrameDocument(redactor_id){ // if contentDocument exists, W3C compliant (Mozilla) if (document.getElementById(redactor_id).contentDocument) { ie = false; return document.getElementById(redactor_id).contentWindow; } else { // IE ie = true; return document.frames[redactor_id]; } } [/js]
Kreker IE все правильно пишет - на момент второго обращения к document.body его еще не существует. Попробуйте такой пример: [js]function run() { getIFrameDocument("redactor_1").document.body.innerHTML = "111"; getIFrameDocument("redactor_2").document.body.innerHTML = "222"; }[/js] и кнопочку: HTML: <input type="button" onclick="run()" value="run" /> Т.е. произвести вставку текста не в runtime а по клике на кнопке - все будет хорошо. Из этого делаем вывод, что вставку текста в любом случае придется делать по onload основного документа или отдельно для каждого фрейма. Идем дальше. В Gecko видимо есть такой баг (или фича) - если в src ифрейма находится нечно, явно не похожее на нормальный url (# как у вас или например javascript:void(0)), то объект document такого фрейма создается, но его body может просто напросто не отображаться (посмотрите ваши фреймы в firebug, наверняка второй body будет сереньким). Чтобы это поправить я лично заюзал старый добрый document.write Применительно к вашей функции это будет выглядеть примерно так: [js] function designInit(redactor_id) { // Определим Gecko-браузеры, т.к. они отличаются в своей работе от Оперы и IE var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1; // Получаем доступ к объектам window & document для ифрейма var obj = getIFrameDocument(redactor_id).document; if (!obj.designMode) alert("Визуальный режим редактирования не поддерживается Вашим браузером"); else obj.designMode = (isGecko) ? "on" : "On"; obj.write('<html><body></body></html>'); obj.close(); }[/js] На будущее - в Gecko (и кажется в некоторых версиях Оперы) есть еще один интересный баг: если каким-либо образом скрыть фрейм, содержащий документ с включенным designMode, то после его повторного отображения это свойство отключается.
Обращается только после отрисовки фрейма. Делал, в ИЕ начинает работать, в фаерфоксе - нет. Спасибо за ответ! После кучи попыток заставить работать (последний Ваш совет не пробовал), решил отказать от двух и более визуальных редакторов. Когда будет необходимость - редактор просто будет вызываться через pop-up и его результат будет вставляться в необходимое поле на странице.