Страниц (1): [1] |
|
Описание: пара вопросов |
Поиск в теме | Версия для печати |
awep |
Отправлено: 09 Ноября, 2008 - 08:45:53
|
Наш человек
Покинул форум
Сообщений всего: 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 все ок. Объясните, в чем дело? |
|
|
Furax |
Отправлено: 09 Ноября, 2008 - 10:21:29
|
Бледнотик
Покинул форум
Сообщений всего: 1472
Дата рег-ции: Март 2007
Откуда: Иркутск, Сибирь, СССР
Карма 32
|
awep
Жуткая мешанина кода... Бр-р-р!
Не вполне понял, зачем вообще нужен iФрейм, какие соображения мешают править всё в исходном документе.
У бэкспэйса, разумеется, тоже есть код клавиши, только обрабатывать надо не onKeyPress, а onKeyDown (кажется). Но кроме backspace есть ещё много операций, которые хорошо бы реализовать: перемещение стрелками по тексту, home, end, Ctrl+стрелки, Shift+стрелки, выделение мышью, копипаст и так далее. Всё это реализовать адекватно вряд ли получится, а если не реализовывать - ИМХО будет только хуже, чем просто поле ввода текста.
Как я бы посоветовал реализовать подобный интерфейс? Курсор всё время находится в поле ввода, скажем так, не слишком заметном (надо подобрать стили и прочее так, чтобы это поле ввода всё время находилось в отображаемой области окна (иначе возникнет прокрутка страницы при попытке ввода), но было чем-то загорожено - не бросалось в глаза. Попытки выделения текста мышью и с клавиатуры (Shift+...) отлавливаем, "выделенный" текст отмечаем в документе, а сами суём его в наше поле ввода и выделяем (input.focus(), input.select()) - это поможет корректно обработать и операции копирования, и вставки, и замещения, но вот, скажем, Оперское "Копировать в заметки/Вставить из заметок" всё же работать не будет, что ИМХО всё же неверно. |
|
|
Furax |
Отправлено: 09 Ноября, 2008 - 21:05:31
|
Бледнотик
Покинул форум
Сообщений всего: 1472
Дата рег-ции: Март 2007
Откуда: Иркутск, Сибирь, СССР
Карма 32
|
awep
Хм... То, что я в предыдущем сообщении пытался набросать, - это идея, которая крутится у меня уже давно, но до реализации которой всё никак руки не дойдут. Раз это кому-то ещё надо, кроме меня, на днях постораюсь посмотреть, что из этого получится, если что-то хорошее - поделюсь исходниками. |
|
|
awep |
Отправлено: 10 Ноября, 2008 - 14:11:59
|
Наш человек
Покинул форум
Сообщений всего: 304
Дата рег-ции: Дек. 2005
Откуда: Казань
Карма 6
|
Идея, которую я описал вначале, тоже витала у меня в мыслях давно.
Но слабые познания JavaScript всё-таки сыграли свою роль...
Короче говоря, я сделал, что хотел. Но пришлось совместить PHP и JavaScript.
Суть скрипта: у клиента запускается визвиг(стандартный iframe), + есть единственный скрипт для добавления смайликов, точнее картинок. Информация о смайликах хранится отдельно на серваке. При отправке формы скрипт помещает содержимое из редактора(вместе со всеми тегами) в скрытое поле. И именно содержимое скрытого поля отсылается серверному обработчику. Серверный скрипт находит все теги <img> и проверяет по имени файла, является ли эта картинка смайлом. Если да, то картинка заменяется на код смайла, если нет - на пустоту. Далее все теги вырезаются, а результирующее содержимое фильтруется от всяких гадостей. В итоге получаем именно такое сообщение, какое оно было бы, если бы мы использовали обычную textarea и вставку смайликов кодами. Далее всё уже будет по стандартному сценарию.
Если нужно - выложу примерный исходник. Проверил в IE6, Opera 9.62, Safari, Mozilla Firefox, Google Chrome - везде работает нормально. |
|
|
|
Поиск в теме | Версия для печати |
Страниц (1): [1] |
Сейчас эту тему просматривают: 2 (гостей: 2, зарегистрированных: 0, скрытых: 0) |
« JavaScript » |
Все гости форума могут просматривать этот раздел. Только администраторы и модераторы могут создавать новые темы в этом разделе. Только администраторы и модераторы могут отвечать на сообщения в этом разделе.
|
|
|