ребят, дело такое - хочу сделать так чтобы при вставке смайлов во время написания сообщения в поле ввода появлялся не код смайла, как например тут, а отображалась именно его картинка, в javascript я не особо силен, но полагаю что это делается с помощью execCommand("InsertImage",false,theImage); заколебался гуглить чтобы найти чтото полезное, есть куча готовых редакторов, но там куча еще всяких примочек, а надо только смайлы, да и хочется самому это все понять, поэтому прошу вас помочь мне в этом деле
Здесь вместо кода смайлика используется аббревиатура скобочек и символов "; )" и работает по аналогии с кодом.
не ну то как тут сделано я прекрасно знаю, да это и не сложно реализовать - дело нескольких минут, у меня проблема в том что я хочу вместо скобочек и прочих символов в поле ввода видеть сам смайл
Если хочешь видеть картинку в текстовом поле, то это сущий гемор. Где-то в инете были реализации текстовых редакторов полностью на JS, там сплошные макароны кода Проще флешку сделать и припрекить на сайт как текстовое поле
да их дофига этих редакторов, я их ковырял ковырял, понял что для отображения используется <iframe> и execCommand("InsertImage",false,theImage); но как самому сделать так и не врубил, тут уже началось чисто упорство типа "спать не лягу пока не допинаю" или "ссать хочу но есть идея..." - просто хочу разобраться в этом деле
Ну для ифрейма делается как обычная картинка и работаешь как с отдельным html документом типа Code: self.bottom.frames[1].document.getElementById('text').innerHTML += '<img src='картинко.джпг'>'; А вот в textarea там гемор.
вот в том то и суть что как то к этому текстареа присобачивается ифрейм и смайлы там блин показываются вот например http://batiste.dosimple.ch/blog/posts/2007-09-11-1/rich-text-editor-jquery.html в исходном коде текстареа, в яваскрипте как то задействован ифрейм, п.с. смайлов там нет просто нажми на добавить картику, введи юрл и она появится - суть то таже, она в поле ввода
Code: 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(); } Code: 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; } атач ифрейма
ну да а это Code: $('.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(); } сама вставка картинки
PHP: //создаём 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('InsertImage', 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
+10, сенкс огромное, седня попожже буду ковырять дальше, чуть что отпишусь, пЫсЫ: поспал 4 часа проснулся оттого что эти смайлы приснились ггг))))
Как продолжение темы... Вот попался на харде. Нашёл редактор на JS - TinyMCE Редактор на вики Офф сайт редактора откуда можно посмотреть как работает и скачать этот редактор
Sharky, да вот и суть то в том что ненужны все эти примочки, надо только смайлы и ппц, щя я чо наковыряю выложу код, появились идеи...
Я согласен с товарищем "FireFenix" !!!!!! Ваши идеи не дадут нужного результата , так как они бы-ли-бы уже реализованы , единственное что вам поможет это сделать на flash + as3 , все остальное бесмысленая трата времени !!!! Но на flashe это тоже не так просто !
malik555, да мне не главное чтото сделать по своему, прикрутить готовый скрипт не сложно, а вот понять всю суть его работы можно только когда сам сделаешь подобное, пусть и методом тыка, мне просто хочется разобраться и понять это все
разберешси приведи полный простенький пример твоего поля ввода, хоть это чисто извращенство но интересненько. JS сила!
Gar|k, да приводить то особо нечего, просто есть текстареа в который происходит набор сообщения, ну как я полагаю его надо допустим при загрузке ДОМа заменять на <input type="hidden" name="textarea" /> а вместо него подставлять <iframe></iframe> и во время ввода данных их копию заносить в скрытый текстареа, при этом в ифрейм вставлять картинку смайла а в текстареа заносить лишь его код
