PDA

Просмотр полной версии : Смайлы в поле ввода

Rednoise
08.06.2009, 00:14
ребят, дело такое - хочу сделать так чтобы при вставке смайлов во время написания сообщения в поле ввода появлялся не код смайла, как например тут, а отображалась именно его картинка, в javascript я не особо силен, но полагаю что это делается с помощью
execCommand("InsertImage",false,theImage);
заколебался гуглить чтобы найти чтото полезное, есть куча готовых редакторов, но там куча еще всяких примочек, а надо только смайлы, да и хочется самому это все понять, поэтому прошу вас помочь мне в этом деле
FireFenix
08.06.2009, 00:20
Здесь вместо кода смайлика используется аббревиатура скобочек и символов "; )" и работает по аналогии с кодом.
Rednoise
08.06.2009, 00:29
не ну то как тут сделано я прекрасно знаю, да это и не сложно реализовать - дело нескольких минут, у меня проблема в том что я хочу вместо скобочек и прочих символов в поле ввода видеть сам смайл
FireFenix
08.06.2009, 00:32
не ну то как тут сделано я прекрасно знаю, да это и не сложно реализовать - дело нескольких минут, у меня проблема в том что я хочу вместо скобочек и прочих символов в поле ввода видеть сам смайл
Если хочешь видеть картинку в текстовом поле, то это сущий гемор. Где-то в инете были реализации текстовых редакторов полностью на JS, там сплошные макароны кода
Проще флешку сделать и припрекить на сайт как текстовое поле
Rednoise
08.06.2009, 00:38
да их дофига этих редакторов, я их ковырял ковырял, понял что для отображения используется <iframe> и execCommand("InsertImage",false,theImage); но как самому сделать так и не врубил, тут уже началось чисто упорство типа "спать не лягу пока не допинаю" или "ссать хочу но есть идея..." - просто хочу разобраться в этом деле
FireFenix
08.06.2009, 00:47
Ну для ифрейма делается как обычная картинка и работаешь как с отдельным html документом типа
self.bottom.frames[1].document.getElementById('text').innerHTML += '<img src='картинко.джпг'>';
А вот в textarea там гемор.
Rednoise
08.06.2009, 00:52
вот в том то и суть что как то к этому текстареа присобачивается ифрейм и смайлы там блин показываются
вот например http://batiste.dosimple.ch/blog/posts/2007-09-11-1/rich-text-editor-jquery.html
в исходном коде текстареа, в яваскрипте как то задействован ифрейм, п.с. смайлов там нет просто нажми на добавить картику, введи юрл и она появится - суть то таже, она в поле ввода
FireFenix
08.06.2009, 00:58
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;
}

атач ифрейма
Rednoise
08.06.2009, 01:04
ну да а это


$('.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();
}


сама вставка картинки
Rednoise
08.06.2009, 01:05
токо там дофига чо еще есть и я упорно пытаюсь разобрать это все на куски
FireFenix
08.06.2009, 01:22
токо там дофига чо еще есть и я упорно пытаюсь разобрать это все на куски


//создаём iframe
var iframe = document.createElement("iframe");
//определяем его параметры
iframe.frameBorder=0;
iframe.frameMargin=0;
iframe.framePadding=0;
iframe.height=200;
//определяем класс uframe
if(textarea.attr('class'))
iframe.className = textarea.attr('class');
//определяем id iframe
if(textarea.attr('id'))
iframe.id = textarea.attr('id');
//определяем имя iframe
if(textarea.attr('name'))
iframe.title = textarea.attr('name');
//присоединяем iframe к textarea
textarea.after(iframe);

//определяем контект iframe
var css = "<link type='text/css' rel='stylesheet' href='"+css_url+"' />";
var content = textarea.val();
var doc = "<html><head>"+css+"</head><body class='frameBody'>"+content+"</body></html>";
//заносим контент в iframe
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(doc);
iframe.contentWindow.document.close();
//Выставляем режим редактирования объектов
if (document.contentEditable)
{
iframe.contentWindow.document.designMode = "On";
}

//атачим картинку в iframe
iframe.contentWindow.document.execCommand('InsertI mage', false, 'я_картинко.джпг');


http://msdn.microsoft.com/ru-ru/library/ms536419(en-us,VS.85).aspx
http://fastcoder.org/articles/?aid=172
http://fastcoder.org/articles/?aid=204
Rednoise
08.06.2009, 05:32
+10, сенкс огромное, седня попожже буду ковырять дальше, чуть что отпишусь, пЫсЫ: поспал 4 часа проснулся оттого что эти смайлы приснились ггг))))
Sharky
08.06.2009, 10:12
используй fckeditor :) много возможностей и легко можно прикрутить куда угодно)
FireFenix
08.06.2009, 22:57
Как продолжение темы...
Вот попался на харде. Нашёл редактор на JS - TinyMCE

Редактор на вики (http://ru.wikipedia.org/wiki/TinyMCE)

Офф сайт редактора (http://tinymce.moxiecode.com/) откуда можно посмотреть как работает и скачать этот редактор
Rednoise
09.06.2009, 09:56
Sharky, да вот и суть то в том что ненужны все эти примочки, надо только смайлы и ппц, щя я чо наковыряю выложу код, появились идеи...
malik555
09.06.2009, 18:33
Я согласен с товарищем "FireFenix" !!!!!!

Ваши идеи не дадут нужного результата , так как они бы-ли-бы уже реализованы , единственное что вам поможет это сделать на flash + as3 , все остальное бесмысленая трата времени !!!!

Но на flashe это тоже не так просто !
Rednoise
09.06.2009, 19:35
malik555, да мне не главное чтото сделать по своему, прикрутить готовый скрипт не сложно, а вот понять всю суть его работы можно только когда сам сделаешь подобное, пусть и методом тыка, мне просто хочется разобраться и понять это все
Gar|k
09.06.2009, 20:40
разберешси приведи полный простенький пример твоего поля ввода, хоть это чисто извращенство но интересненько.

JS сила!
malik555
09.06.2009, 21:21
malik555, да мне не главное чтото сделать по своему, прикрутить готовый скрипт не сложно, а вот понять всю суть его работы можно только когда сам сделаешь подобное, пусть и методом тыка, мне просто хочется разобраться и понять это все


На as3 я знаю как это сделать но тоже довольнно сложно , на js я думаю принцып такойже !
Rednoise
09.06.2009, 22:11
Gar|k, да приводить то особо нечего, просто есть текстареа в который происходит набор сообщения, ну как я полагаю его надо допустим при загрузке ДОМа заменять на <input type="hidden" name="textarea" /> а вместо него подставлять <iframe></iframe> и во время ввода данных их копию заносить в скрытый текстареа, при этом в ифрейм вставлять картинку смайла а в текстареа заносить лишь его код
Rednoise
09.06.2009, 22:28
вот токо догнать не могу как содержимое ифрейма достать блин
Rednoise
09.06.2009, 22:33
Оо доперло

iframe.contentWindow.document.getElementsByTagName ("body")[0].innerHTML

содержимое поля iframe
FireFenix
09.06.2009, 22:40
Оо доперло

iframe.contentWindow.document.getElementsByTagName ("body")[0].innerHTML

содержимое поля iframe

iframe.document.body.innerHTML лучше
Rednoise
09.06.2009, 22:46
щя попробую
Rednoise
09.06.2009, 22:48
не канает, так все содержимое между <body> </body> выбирается
Rednoise
10.06.2009, 00:37
итак к чему я пришел Ггг (прошу строго не судить)
на странице составляем форму

<form action="" method="post">
<-- поле куда будут заноситься данные -->
<input type="hidden" class="edit_able" name="msg" value="&nbsp;" /><br />
<input type="submit" value="Добавить" />
<-- поле для смайлов -->
<div class="smiles"></div>

теперь сам js


$(document).ready(function()
{

if($('.edit_able').length)
{
var input = $('.edit_able');
// создаем iframe
var iframe = document.createElement("iframe");
// даем ему оформление
iframe.className = 'edit_able';
// вставляем его на страницу
input.after(iframe);
var doc = "<body class='frameBody'>"+input.val()+"</body>";
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(doc);
iframe.contentWindow.document.close();
// включаем редактирование
iframe.contentWindow.document.designMode = "On";

// добавляем на страницу смайлы
var smiles = [')','(','8','atlet','ban','be','blin','bomba'];
var smiles_box='';
for(i=0;i<8;i++) smiles_box += '<img src="img/smiles/'+smiles[i]+'.gif" class="smile" alt=""> ';
$('.smiles').html(smiles_box);
// и теперь при клике на смайл вставляем его в iframe
$('.smile').click(function()
{
iframe.contentWindow.document.execCommand('InsertI mage', false, $(this).attr('src'));
})

// теперь 2 раза в секунду заносим содержимое iframe в наше скрытое поле
//смайлы попадают туда ввиде кода
setInterval(function()
{
$('.edit_able').val(iframe.contentWindow.document. getElementsByTagName("body")[0].innerHTML);
},500);
}

});

ну вот вобщем то до чего я докопалсо гг, опера и мозилла воспринимают все адекватно а ослик ИЕ событие клика на картинку не воспринимает...
FireFenix
10.06.2009, 01:06
// теперь 2 раза в секунду заносим содержимое iframe в наше скрытое поле
//смайлы попадают туда ввиде кода
setInterval(function()
{
$('.edit_able').val(iframe.contentWindow.document. getElementsByTagName("body")[0].innerHTML);
},500);


Зачем тут использовать Таймер? Добавляй сразу при изменении контента во фрейме
Rednoise
10.06.2009, 01:13
ну я просто не стал заморачиваться с обработкой нажатий клавиш и т.д. + я незнаю как определить копипаст
FireFenix
10.06.2009, 02:32
ну я просто не стал заморачиваться с обработкой нажатий клавиш и т.д. + я незнаю как определить копипаст

Просто убери интервал


... Код ...

// и теперь при клике на смайл вставляем его в iframe
$('.smile').click(function()
{
iframe.contentWindow.document.execCommand('InsertI mage', false, $(this).attr('src'));
})

//смайлы попадают туда ввиде кода
$('.edit_able').val(iframe.contentWindow.document. getElementsByTagName("body")[0].innerHTML);


Сразу будет обновляется при занесении картинки
Rednoise
10.06.2009, 05:33
FireFenix, угу счас, ну во первых чтоб уж при клике обновлялось то надо внести эту строку кода в саму функцию клика, а во вторых - как же текст который также будет вводиться? не проблема - отслеживать keydown keypress keyup, остается копипаст - как его отследить?
FireFenix
10.06.2009, 08:49
FireFenix, угу счас, ну во первых чтоб уж при клике обновлялось то надо внести эту строку кода в саму функцию клика, а во вторых - как же текст который также будет вводиться? не проблема - отслеживать keydown keypress keyup, остается копипаст - как его отследить?


<script language="Javascript">

function update()
{
$('.edit_able').val(iframe.contentWindow.document. getElementsByTagName("body")[0].innerHTML);
}

</script>

<textarea id="text" name="text" size="20" rows="10" onChange="javascript:update();">я текстo</textarea>
Rednoise
10.06.2009, 11:05
отличная идея, над терь это к iframe прицепить как то
Rednoise
11.06.2009, 19:46
такс еще вопрос - как в iframe при редактировании текста уменьшить межстрочный интервал?
FireFenix
11.06.2009, 20:38
как вариант заменять все теги/символы, или перекодировать в хтмл (& = &amp; > = &gt; и т.д.), или то и то :)
Для кодирования у пхп есть функция htmlspecialchars()
Rednoise
11.06.2009, 21:10
да я не в том смысле - при вводе текста нажимаешь перенос строки и курсор делает прыжок через одну т.е. так

текст

продолжение

а надо так

текст
продолжение


я про визуальное восприятие говорю
Rednoise
11.06.2009, 23:47
и еше - при истечении лимита вводимых символов - как запретить дальнейший ввод?? с текстареа это не проблема сделать, а вот с ифреймом?
FireFenix
11.06.2009, 23:54
Останавливай событие при нажатии, если длина больше заданного
Rednoise
12.06.2009, 00:26
пример можешь привести? конкретно для ифрейма
FireFenix
12.06.2009, 10:52
<script language="javascript">

function check()
{
var event = (window.event ? window.event : null);
var element = document.getElementById('text');

if (element.value.length > 10)
{
event.cancelBubble = true;

if (event.cancelable)
{
event.preventDefault();
event.stopPropagation();
}

alert('Превышено количество символов');
}
}

</script>

<textarea id="text" name="text" size="200" rows="10" onKeyPress="javascript:check();"></textarea>