Форум АНТИЧАТ - Смайлы в поле ввода

Форум АНТИЧАТ (https://forum.antichat.xyz/index.php)

- PHP, PERL, MySQL, JavaScript (https://forum.antichat.xyz/forumdisplay.php?f=37)

- - Смайлы в поле ввода (https://forum.antichat.xyz/showthread.php?t=124125)

Смайлы в поле ввода

ребят, дело такое - хочу сделать так чтобы при вставке смайлов во время написания сообщения в поле ввода появлялся не код смайла, как например тут, а отображалась именно его картинка, в javascript я не особо силен, но полагаю что это делается с помощью
execCommand("InsertImage",false,theImage);
заколебался гуглить чтобы найти чтото полезное, есть куча готовых редакторов, но там куча еще всяких примочек, а надо только смайлы, да и хочется самому это все понять, поэтому прошу вас помочь мне в этом деле

Здесь вместо кода смайлика используется аббревиатура скобочек и символов "; )" и работает по аналогии с кодом.

не ну то как тут сделано я прекрасно знаю, да это и не сложно реализовать - дело нескольких минут, у меня проблема в том что я хочу вместо скобочек и прочих символов в поле ввода видеть сам смайл

Цитата:

Сообщение от Rednoise

Если хочешь видеть картинку в текстовом поле, то это сущий гемор. Где-то в инете были реализации текстовых редакторов полностью на JS, там сплошные макароны кода
Проще флешку сделать и припрекить на сайт как текстовое поле

да их дофига этих редакторов, я их ковырял ковырял, понял что для отображения используется <iframe> и execCommand("InsertImage",false,theImage); но как самому сделать так и не врубил, тут уже началось чисто упорство типа "спать не лягу пока не допинаю" или "ссать хочу но есть идея..." - просто хочу разобраться в этом деле

Ну для ифрейма делается как обычная картинка и работаешь как с отдельным html документом типа

Код:

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
в исходном коде текстареа, в яваскрипте как то задействован ифрейм, п.с. смайлов там нет просто нажми на добавить картику, введи юрл и она появится - суть то таже, она в поле ввода

Код:

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;

    }

атач ифрейма

ну да а это

Код:

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

    }

сама вставка картинки

токо там дофига чо еще есть и я упорно пытаюсь разобрать это все на куски