Question

我正在努力让笑脸工作，所以我要发布完整的问题，也许有人知道更好的解决方案。我有这个聊天系统，你可以点击一个笑脸，它的价值会传递给<textarea>，就像Google视频群聊一样。值是“smile_n”，其中20> n>我将它存储在数据库中，并且我有PHP代码在从SQL解析数据时负责显示正确的<img src="smile_n">标记，但是当我选择一个笑脸时，它会在其中写入“smile_n”。 <textarea>。有办法改变这个吗？

以下是我将表情符号放入<textarea>元素的方法：

$(".smilepick").click(function(){
 $('#chatty').val($('#chatty').val()+(' ')+$(this).attr('href')+(' '));
  var el = $("#chatty").get(0);
  var elemLen = el.value.length;
  el.selectionStart = elemLen;
  el.selectionEnd = elemLen;
  el.focus();
});

我可以以某种方式将“smile_n”单词解析为图像，但保留插入数据库“smile_n”的值，以便PHP代码不会失败吗？

Answer 1

如果你可以使用具有contenteditable的div，你可以从这样的事情开始：

<强> HTML

<div id="editable" contenteditable="true">
Everything contained within this div is editable in browsers that support.
</div>

<强> Jquery的

var smile_ha_img = '<img src="http://placehold.it/16x16"/>';

$('#editable').keyup(function() {
    $(this).html(function(i, v) {
        return v.replace('smile-ha', smile_ha_img);   
    });
});

它会用给定的图像取代每一个笑脸。

在此处尝试：http://jsfiddle.net/tb8vQ/1/在第4小组的段落中输入smile-ha。

然后你可以像往常一样将div的内容复制到隐藏的textarea中，然后由你的表单发送。

待办事项

你必须优先考虑它，以便检查和更换微笑。
在函数用html替换字符串后，carret位置放在字符串的开头（至少在我的浏览器中）。 Stackoverflow中有很多关于如何解决这个问题的答案。
如果用户没有自己输入笑脸代码，则此处使用的键盘触发器对您的系统没有用。但是，您可以在用户选择表情符号后立即更改您的功能。

另一种方法 有一些WYSIWYG编辑器允许您选择要为用户提供的功能。所以也许你可以找到一个你可以隐藏所有选项但是表情符号。

将图像传递给textarea

1 个答案: