textarea и смайлы (ТЗ)
Необходим скрипт для вставки картинок и смайлов в textarea
1. Мне необходим безопасный код. 2. Должна быть отправка данных без перезагруки страницы (POST). 3. Возможность добавлять изображения. 4. Возможность удалять выбранное сообщение из базы данных. 5. Смайлики должны открываться плиткой при клике на иконку смайл, как в ICQ к примеру. Так же при клике на иконку изображения. Две иконки должны быть рядом. 6. Возможность редактировать свое сообщение. У меня имеются коды, часть из данных пунктов я сам могу написать. Но так как я плохо знаком с JavaScript, то мне необходим человек который напишет данные пункты. Может ТЗ увеличится, мы все с Вами обсудим. Скайпы отправляйте пожалуйста в ПМ, по скайпу более детально обговорим, скроки и сколько будет стоить работа. |
Salvat,
вы в курсе что в textarea нельзя вставить ничего кроме текста? |
рони, можно, коды имеются. Вот один из примеров.
<?php
if($_POST) {
echo '<pre>';
print_r($_POST);
echo '</pre>';
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.boxedit {
display: none;
}
.editor {
width: 500px;
height: 300px;
border: 1px solid #ccc;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
var edt = '<div class="smiles"><img sml=":-*" src="smile/1.gif"><img sml=":)" src="smile/2.gif"><img sml=":(" src="smile/3.gif"></div><div class="editor" contenteditable="true"></div><textarea></textarea>';
$(function() {
$('span[data-msg]').click(function() {
var p = $(this.parentNode);
if(!p.next('.boxedit').length) {
$('<div class="boxedit">').insertAfter(p)
.append(edt)
.find('textarea').attr('name', 'comment['+$(this).data('msg')+']').hide()
.end()
.find('.smiles').on('click', 'img', function() {
document.execCommand('insertHTML', false, ' <img sml="'+this.getAttribute('sml')+'" src="'+this.src+'"> ');
$('.editor').focus()
})
.end()
.slideDown(300)
.find('.editor')[0].oninput = function() {
$(this).closest('form')
.find('textarea')
.val(this.innerHTML
.replace(/ /g,' ') //заменить неразрывное пространство
.replace(/<br>/g, '\n') //заменить html-перевод строки
.replace(/<img[^>]+>/g, function(i) { //смайлы
//заменить на мнемонику
//хотя могут быть нежелательные последствия
//что можно наблюдать например в Скайп, и в этом сообщении
//но можно воспользоваться ВВ-тегом
//а изображения смайлов могут иметь различные атрибуты
//которые можно обрабатывать здесь и подставляя их в ВВ
return i.match(/sml="([^"]+)"/)[1]
}))
}
}
})
});
</script>
</head>
<body>
<form autocomplete="off" method="post">
<p>text <span data-msg="123">Add comment</span></p>
<br><br><button>Send</button>
</form>
</body>
</html>
Это мне человек писал с форума под ником laimas, мы с ним это ТЗ обсуждали в ПМ. Я скидывал скайп для связи, т.к. редко на форуме бываю, но человек так и не вышел на связь. Поэтому и пришлось создать в соответствующем разделе объявление. |
Salvat,
ок, но это никак не отменяет, сообщение во 2 посте. |
рони,
Хорошо, рассмотрю любую альтернативу реализации первого поста. |
Цитата:
А в рони, можно, коды имеются. Вот один из примеров., это не вставка в textarea смайликов и прочего кода. |
laimas,
Мне от Вас ничего не приходило, я не обвиняю Вас, а пояснил ситуацию которая сложилась. Сейчас вижу что Вы добавились, продолжим в скайпе. |
| Часовой пояс GMT +3, время: 06:59. |