Antichat снова доступен.
Форум Antichat (Античат) возвращается и снова открыт для пользователей.
Здесь обсуждаются безопасность, программирование, технологии и многое другое.
Сообщество снова собирается вместе.
Новый адрес: forum.antichat.xyz
 |
|
08.06.2009, 00:14
|
|
Новичок
Регистрация: 28.03.2007
Сообщений: 29
Провел на форуме:
62416
Репутация:
41
|
|
Смайлы в поле ввода
ребят, дело такое - хочу сделать так чтобы при вставке смайлов во время написания сообщения в поле ввода появлялся не код смайла, как например тут, а отображалась именно его картинка, в javascript я не особо силен, но полагаю что это делается с помощью
execCommand("InsertImage",false,theImage);
заколебался гуглить чтобы найти чтото полезное, есть куча готовых редакторов, но там куча еще всяких примочек, а надо только смайлы, да и хочется самому это все понять, поэтому прошу вас помочь мне в этом деле
|
|
|
08.06.2009, 00:20
|
|
Постоянный
Регистрация: 03.06.2009
Сообщений: 385
Провел на форуме:
3178262
Репутация:
389
|
|
Здесь вместо кода смайлика используется аббревиатура скобочек и символов "; )" и работает по аналогии с кодом.
|
|
|
|
08.06.2009, 00:29
|
|
Новичок
Регистрация: 28.03.2007
Сообщений: 29
Провел на форуме:
62416
Репутация:
41
|
|
не ну то как тут сделано я прекрасно знаю, да это и не сложно реализовать - дело нескольких минут, у меня проблема в том что я хочу вместо скобочек и прочих символов в поле ввода видеть сам смайл
|
|
|
|
08.06.2009, 00:32
|
|
Постоянный
Регистрация: 03.06.2009
Сообщений: 385
Провел на форуме:
3178262
Репутация:
389
|
|
Сообщение от Rednoise
не ну то как тут сделано я прекрасно знаю, да это и не сложно реализовать - дело нескольких минут, у меня проблема в том что я хочу вместо скобочек и прочих символов в поле ввода видеть сам смайл
Если хочешь видеть картинку в текстовом поле, то это сущий гемор. Где-то в инете были реализации текстовых редакторов полностью на JS, там сплошные макароны кода
Проще флешку сделать и припрекить на сайт как текстовое поле
Последний раз редактировалось FireFenix; 08.06.2009 в 00:36..
|
|
|
|
08.06.2009, 00:38
|
|
Новичок
Регистрация: 28.03.2007
Сообщений: 29
Провел на форуме:
62416
Репутация:
41
|
|
да их дофига этих редакторов, я их ковырял ковырял, понял что для отображения используется <iframe> и execCommand("InsertImage",false,theImage); но как самому сделать так и не врубил, тут уже началось чисто упорство типа "спать не лягу пока не допинаю" или "ссать хочу но есть идея..." - просто хочу разобраться в этом деле
|
|
|
|
08.06.2009, 00:47
|
|
Постоянный
Регистрация: 03.06.2009
Сообщений: 385
Провел на форуме:
3178262
Репутация:
389
|
|
Ну для ифрейма делается как обычная картинка и работаешь как с отдельным html документом типа
Код:
self.bottom.frames[1].document.getElementById('text').innerHTML += '<img src='картинко.джпг'>';
А вот в textarea там гемор. |
|
|
|
08.06.2009, 00:52
|
|
Новичок
Регистрация: 28.03.2007
Сообщений: 29
Провел на форуме:
62416
Репутация:
41
|
|
вот в том то и суть что как то к этому текстареа присобачивается ифрейм и смайлы там блин показываются
вот например http://batiste.dosimple.ch/blog/posts/2007-09-11-1/rich-text-editor-jquery.html
в исходном коде текстареа, в яваскрипте как то задействован ифрейм, п.с. смайлов там нет просто нажми на добавить картику, введи юрл и она появится - суть то таже, она в поле ввода
|
|
|
|
08.06.2009, 00:58
|
|
Постоянный
Регистрация: 03.06.2009
Сообщений: 385
Провел на форуме:
3178262
Репутация:
389
|
|
Код:
function enableDesignMode(textarea)
{
// need to be created this way
var iframe = document.createElement("iframe");
iframe.frameBorder=0;
iframe.frameMargin=0;
iframe.framePadding=0;
iframe.height=200;
if(textarea.attr('class'))
iframe.className = textarea.attr('class');
if(textarea.attr('id'))
iframe.id = textarea.attr('id');
if(textarea.attr('name'))
iframe.title = textarea.attr('name');
textarea.after(iframe);
var css = "";
if(css_url)
var css = "<link type='text/css' rel='stylesheet' href='"+css_url+"' />"
var content = textarea.val();
// Mozilla need this to display caret
if($.trim(content)=='')
content = '<br>';
var doc = "<html><head>"+css+"</head><body class='frameBody'>"+content+"</body></html>";
tryEnableDesignMode(iframe, doc, function() {
$("#toolbar-"+iframe.title).remove();
$(iframe).before(toolbar(iframe));
textarea.remove();
}
Код:
function tryEnableDesignMode(iframe, doc, callback)
{
try {
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(doc);
iframe.contentWindow.document.close();
} catch(error) {
console.log(error)
}
if (document.contentEditable) {
iframe.contentWindow.document.designMode = "On";
callback();
return true;
}
else if (document.designMode != null) {
try {
iframe.contentWindow.document.designMode = "on";
callback();
return true;
} catch (error) {
console.log(error)
}
}
setTimeout(function(){tryEnableDesignMode(iframe, doc, callback)}, 250);
return false;
}
атач ифрейма
Последний раз редактировалось FireFenix; 08.06.2009 в 01:01..
|
|
|
|
08.06.2009, 01:04
|
|
Новичок
Регистрация: 28.03.2007
Сообщений: 29
Провел на форуме:
62416
Репутация:
41
|
|
ну да а это
Код:
$('.image', tb).click(function(){
var p='smile.gif';
formatText(iframe, 'InsertImage', p);
return false; });
function formatText(iframe, command, option) {
iframe.contentWindow.focus();
try{
iframe.contentWindow.document.execCommand(command, false, option);
}catch(e){console.log(e)}
iframe.contentWindow.focus();
}
сама вставка картинки |
|
|
|
08.06.2009, 01:05
|
|
Новичок
Регистрация: 28.03.2007
Сообщений: 29
Провел на форуме:
62416
Репутация:
41
|
|
токо там дофига чо еще есть и я упорно пытаюсь разобрать это все на куски
|
|
|
|
|
|
|
|
Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
|
|
|
|
Похожие темы
Линейный вид
