Форум АНТИЧАТ

Форум АНТИЧАТ (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)

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
Цитата:
Сообщение от Rednoise
не ну то как тут сделано я прекрасно знаю, да это и не сложно реализовать - дело нескольких минут, у меня проблема в том что я хочу вместо скобочек и прочих символов в поле ввода видеть сам смайл
Если хочешь видеть картинку в текстовом поле, то это сущий гемор. Где-то в инете были реализации текстовых редакторов полностью на 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
Цитата:
Сообщение от Rednoise
токо там дофига чо еще есть и я упорно пытаюсь разобрать это все на куски
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

Rednoise 08.06.2009 05:32
+10, сенкс огромное, седня попожже буду ковырять дальше, чуть что отпишусь, пЫсЫ: поспал 4 часа проснулся оттого что эти смайлы приснились ггг))))

Sharky 08.06.2009 10:12
используй fckeditor :) много возможностей и легко можно прикрутить куда угодно)

FireFenix 08.06.2009 22:57
Как продолжение темы...
Вот попался на харде. Нашёл редактор на JS - TinyMCE

Редактор на вики

Офф сайт редактора откуда можно посмотреть как работает и скачать этот редактор

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
Цитата:
Сообщение от Rednoise
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
Цитата:
Сообщение от Rednoise
Оо доперло

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
итак к чему я пришел Ггг (прошу строго не судить)
на странице составляем форму

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

PHP код:
$(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('InsertImage', 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
Цитата:
Сообщение от Rednoise
PHP код:
        // теперь 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
Цитата:
Сообщение от Rednoise
ну я просто не стал заморачиваться с обработкой нажатий клавиш и т.д. + я незнаю как определить копипаст
Просто убери интервал

PHP код:
... Код ...

// и теперь при клике на смайл вставляем его в 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
Цитата:
Сообщение от Rednoise
FireFenix, угу счас, ну во первых чтоб уж при клике обновлялось то надо внести эту строку кода в саму функцию клика, а во вторых - как же текст который также будет вводиться? не проблема - отслеживать keydown keypress keyup, остается копипаст - как его отследить?
Код HTML:
<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
PHP код:
<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> 


Время: 15:13