Strict Standards: Resource ID#18 used as offset, casting to integer (18) in /home/tvoyweb/domains/tvoyweb.ru/public_html/forums/include/fm.class.php on line 401

Strict Standards: Resource ID#23 used as offset, casting to integer (23) in /home/tvoyweb/domains/tvoyweb.ru/public_html/forums/include/fm.class.php on line 401

Strict Standards: Resource ID#25 used as offset, casting to integer (25) in /home/tvoyweb/domains/tvoyweb.ru/public_html/forums/include/fm.class.php on line 401

Strict Standards: Resource ID#26 used as offset, casting to integer (26) in /home/tvoyweb/domains/tvoyweb.ru/public_html/forums/include/fm.class.php on line 401
ТвойWeb :: Аналог WYSIWYG
ТвойWeb ТвойWeb
Качественный Европейский хостинг
Форум для чайников
 Чат на форуме      Помощь      Поиск      Пользователи


 Страниц (1): [1] 

> Описание: пара вопросов
awep
Отправлено: 09 Ноября, 2008 - 08:45:53
Post Id



Наш человек


Покинул форум
Сообщений всего: 304
Дата рег-ции: Дек. 2005  
Откуда: Казань

Карма 6




На сайте есть раздел а-ля гостевая книга, с возможностью добавлени записей пользователями. Сделал простейшим способом добавлние смайликов(кодами типа ":)" и тп).
Теперь хочу сделать большее: аналог WYSIWYG редактора. То есть юзер будет видеть, как будет выглядеть сообщение. Конкретно хочу так сделать именно из-за смайликов.
Единственное нормальное решение, которое мне пришло в голову, такое: юзер будет писать сообщение во фрейме(для wysiwyg привычно), а исходный текст сообщения будет записываться в скрытый инпут. Причем в исходном тексте смайлики будут в виде кодов, а не html-кода изображений - так удобнее.
Но столкнулся с проблемой: я не знаю, как реализовать стирание символов и смайликов. Т.е. если пользователь нажмет backspace, исходник у меня не изменится.
Очень прошу помочь!!!
Исходники на текущий момент:
CODE:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<div id="content">
<script language="JavaScript">
var frameid = 'frameId';// для удобства

// Выводим в HTML-поток iframe
document.write("<iframe scrolling='no' frameborder='no' src='#' id='" + frameid + "' name='" + frameid + "' style='border: 1px solid #000000;'></iframe><br/>");
// Определим Gecko-браузеры, т.к. они отличаются в своей работе от Оперы и IE
var isGecko = navigator.userAgent.toLowerCase().indexOf("gecko") != -1;
// Получаем доступ к объектам window & document для ифрейма
var iframe = (isGecko) ? document.getElementById(frameid) : frames[frameid];
var iWin = (isGecko) ? iframe.contentWindow : iframe.window;
var iDoc = (isGecko) ? iframe.contentDocument : iframe.document;

// содержимое фрейма
iHTML = "<html><head>\n";
iHTML += "<body>текст</body>";
iHTML += "</html>";
// записываем
iDoc.open();
iDoc.write(iHTML);
iDoc.close();

// включение визуального режима
if (!iDoc.designMode) alert("Визуальный режим редактирования не поддерживается Вашим браузером");
else iDoc.designMode = (isGecko) ? "on" : "On";


// обработка нажатий
if (document.all && !window.opera)
{
document.getElementById(frameid).contentWindow.document.attachEvent("onkeypress", add);
}
else
{
document.getElementById(frameid).contentWindow.document.addEventListener("keypress", add, true);
}

// добавление символа
function add(event)
{
var keynum;
var keychar;
if(event)
{
keynum = event.keyCode;
}
else if(event.which)
{
keynum = event.which;
}
keychar = String.fromCharCode(keynum);
document.getElementById('source').value+= keychar;
}

// добавление смайлика
function addSmile(sm_code, sm_image)
{
html = ' <img src="' + sm_image + '" /> ';
// из Rich Text Editor'а
if (document.all)
{
var oRng = document.getElementById(frameid).contentWindow.document.selection.createRange();
oRng.pasteHTML(html);
oRng.collapse(false);
oRng.select();
}
else
{
document.getElementById(frameid).contentWindow.document.execCommand('insertHTML', false, html);
}

// добавляем в исходник
var src = document.getElementById('source');
src.value+= ' ' + sm_code + ' ';

iWin.focus();// чтобы сразу продолжить чепятать
}
</script>
<img src="smile.gif" onclick="addSmile(':)', 'smile.gif')" /><br />
исходник:<br />
<textarea id="source" name="source"></textarea>
</div>
</body>
</html>
Большая часть кода стырена из разных визвигов и статей. Потому как JavaScript я знаю только немного.
И еще одна проблема: данный скрипт не работает в Firefox, конкретно не может нормально сделать из фрейма редактируемую часть. В Opera, IE6, Google Chrome и Safari все ок. Объясните, в чем дело?
 
 Top
Furax
Отправлено: 09 Ноября, 2008 - 10:21:29
Post Id



Бледнотик


Покинул форум
Сообщений всего: 1472
Дата рег-ции: Март 2007  
Откуда: Иркутск, Сибирь, СССР

Карма 32




awep
Жуткая мешанина кода... Бр-р-р!

Не вполне понял, зачем вообще нужен iФрейм, какие соображения мешают править всё в исходном документе.

У бэкспэйса, разумеется, тоже есть код клавиши, только обрабатывать надо не onKeyPress, а onKeyDown (кажется). Но кроме backspace есть ещё много операций, которые хорошо бы реализовать: перемещение стрелками по тексту, home, end, Ctrl+стрелки, Shift+стрелки, выделение мышью, копипаст и так далее. Всё это реализовать адекватно вряд ли получится, а если не реализовывать - ИМХО будет только хуже, чем просто поле ввода текста.

Как я бы посоветовал реализовать подобный интерфейс? Курсор всё время находится в поле ввода, скажем так, не слишком заметном (надо подобрать стили и прочее так, чтобы это поле ввода всё время находилось в отображаемой области окна (иначе возникнет прокрутка страницы при попытке ввода), но было чем-то загорожено - не бросалось в глаза. Попытки выделения текста мышью и с клавиатуры (Shift+...) отлавливаем, "выделенный" текст отмечаем в документе, а сами суём его в наше поле ввода и выделяем (input.focus(), input.select()) - это поможет корректно обработать и операции копирования, и вставки, и замещения, но вот, скажем, Оперское "Копировать в заметки/Вставить из заметок" всё же работать не будет, что ИМХО всё же неверно.
 
 Top
awep
Отправлено: 09 Ноября, 2008 - 10:52:34
Post Id



Наш человек


Покинул форум
Сообщений всего: 304
Дата рег-ции: Дек. 2005  
Откуда: Казань

Карма 6




чувак, я тебя не понял, но ты достучался до моего сердца %)

не понятен мне твой способ...4 раза перечитал...
не мог бы показать всё на конкретном примере(коде)?

вообще есть идея делать код не "на лету", а конкретно при отсылке формы. Сделать парсер, который будет регулярным выражением заменять в готовом коде картинки на коды смайликов. Ибо больше там ничего быть и не должно.

за страшный код не пинайте - я ж говорю, javascript для меня - темный лес...
 
 Top
Furax
Отправлено: 09 Ноября, 2008 - 21:05:31
Post Id



Бледнотик


Покинул форум
Сообщений всего: 1472
Дата рег-ции: Март 2007  
Откуда: Иркутск, Сибирь, СССР

Карма 32




awep
Хм... То, что я в предыдущем сообщении пытался набросать, - это идея, которая крутится у меня уже давно, но до реализации которой всё никак руки не дойдут. Раз это кому-то ещё надо, кроме меня, на днях постораюсь посмотреть, что из этого получится, если что-то хорошее - поделюсь исходниками.
 
 Top
awep
Отправлено: 10 Ноября, 2008 - 14:11:59
Post Id



Наш человек


Покинул форум
Сообщений всего: 304
Дата рег-ции: Дек. 2005  
Откуда: Казань

Карма 6




Идея, которую я описал вначале, тоже витала у меня в мыслях давно.
Но слабые познания JavaScript всё-таки сыграли свою роль...

Короче говоря, я сделал, что хотел. Но пришлось совместить PHP и JavaScript.
Суть скрипта: у клиента запускается визвиг(стандартный iframe), + есть единственный скрипт для добавления смайликов, точнее картинок. Информация о смайликах хранится отдельно на серваке. При отправке формы скрипт помещает содержимое из редактора(вместе со всеми тегами) в скрытое поле. И именно содержимое скрытого поля отсылается серверному обработчику. Серверный скрипт находит все теги <img> и проверяет по имени файла, является ли эта картинка смайлом. Если да, то картинка заменяется на код смайла, если нет - на пустоту. Далее все теги вырезаются, а результирующее содержимое фильтруется от всяких гадостей. В итоге получаем именно такое сообщение, какое оно было бы, если бы мы использовали обычную textarea и вставку смайликов кодами. Далее всё уже будет по стандартному сценарию.

Если нужно - выложу примерный исходник. Проверил в IE6, Opera 9.62, Safari, Mozilla Firefox, Google Chrome - везде работает нормально.
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 4 (гостей: 4, зарегистрированных: 0, скрытых: 0)
« JavaScript »


Все гости форума могут просматривать этот раздел.
Только администраторы и модераторы могут создавать новые темы в этом разделе.
Только администраторы и модераторы могут отвечать на сообщения в этом разделе.



Форум на AlfaSpace.NET


Powered by ExBB
ExBB FM 1.0 RC1 by TvoyWeb.ru
InvisionExBB Style converted by Markus®

[Script Execution time: 0.0398]     [ Gzipped ]



Notice: ob_end_flush(): failed to send buffer of ob_gzhandler (1) in /home/tvoyweb/domains/tvoyweb.ru/public_html/forums/include/page_tail.php on line 33