Теперь хочу сделать большее: аналог WYSIWYG редактора. То есть юзер будет видеть, как будет выглядеть сообщение. Конкретно хочу так сделать именно из-за смайликов.
Единственное нормальное решение, которое мне пришло в голову, такое: юзер будет писать сообщение во фрейме(для wysiwyg привычно), а исходный текст сообщения будет записываться в скрытый инпут. Причем в исходном тексте смайлики будут в виде кодов, а не html-кода изображений - так удобнее.
Но столкнулся с проблемой: я не знаю, как реализовать стирание символов и смайликов. Т.е. если пользователь нажмет backspace, исходник у меня не изменится.
Очень прошу помочь!!!
Исходники на текущий момент:
CODE:
Большая часть кода стырена из разных визвигов и статей. Потому как JavaScript я знаю только немного.<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>
<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>
И еще одна проблема: данный скрипт не работает в Firefox, конкретно не может нормально сделать из фрейма редактируемую часть. В Opera, IE6, Google Chrome и Safari все ок. Объясните, в чем дело?