demo例子:

HTML文本内容:

<template>
<div id="publish">
<!-- 发布内容输入框,利用Html5的新属性contenteditable,实现可编辑文本 ,会自动将插入的IMG标签解析-->
<div class="publish_container">
<p contenteditable="true" id="input_conta"></p>
</div> <!-- 表情和发送-->
<div class="face_container">
<!-- 表情Icon,点击触发事件,动态生成表情并显示 -->
<span @click=make_face() class="make_face"><i class="icon-emoji" ></i></span>
<span class="make_img" @click="add_img()"><i class="icon-Pictuer"></i></span>
<span class="send" @click=send()>发送</span>
<span class="send"><input type="checkbox" name="top" id="top" value="top">本条置顶</span>
<!-- 表情容器 ,包裹生成的表情,绑定点击表情事件-->
<div id="face" @click=choice_face($event)></div>
</div>
</div> </template>

js文本内容:

<script>

export default {
data () {
return {
id:this.$route.query.id,
top:"",
}
},
methods:{
make_face:function(){
$("div#face").show(); //显示表情容器
if($("div#face>img").length==0){ //动态生成表情,如果现在没有表情则生成
for(var i=1;i<=75;i++){ //根据表情文件数量决定循环次数,这里为75个表情
$("div#face").append('<img src="/static/arclist/'+i+'.gif">'); //为表情容器里添加IMG标签,并赋予src值,路径为表情文件所在路径
}
}
},// 选择表情并插入到输入框
choice_face:function(e){
if(e.target.nodeName=="IMG"){
var choice=e.target;
var cEle = choice.cloneNode(true); //深度复制,复制节点下面所有的子节点 ,直接将整个表情的IMG标签复制,并添加到发布框的<p></p>里面
$("p#input_conta").append(cEle);
}
},
// 发送信息给后台
send:function(){
// 发送留言
var text=$("#input_conta").html(); //获得发布框的文本内容,表情会以整个img标签文本显示
console.log(text);
$("#input_conta").html(""); //清除发布框的文本内容
$("div#face").hide(); //隐藏表情选择// 上传图片并发送给后台
var out_this=this;
$("#addTextForm").ajaxSubmit({
url: url+"/index/text/add",
type: "post",
data: {'i_text':text,
},
success: function (data) {
console.info(data);
}
});
}
}, }
</script>

评论发布信息可插入QQ表情的更多相关文章

  1. WordPress文章中插入qq表情

    看见一些博客中使用了QQ表情,这个效果还是很不错的,可以让文章看起来更爽,那么这个是怎么实现的呢? 下面我就来说说方法. 工具:QQ表情包,下载地址:http://yunpan.cn/cLw6UhwB ...

  2. EditView插入qq表情,可删除表情或文字

    代码如下: 代码如下: package com.push.notif; import java.lang.reflect.Field; import java.util.Random; import ...

  3. 亲手用模块化方式写一个jquery QQ表情插件。

    在回复或是评论的时候,很多时间都需要有回复表情的功能,然后而需要插入QQ表情可以是最常见的. 插件也写多很多个了,这次写插件就下了一个决定.就是使用模块化来开发. 最后在我的源代码中有这样子一段: v ...

  4. Delphi QQ表情的实现

    Delphi QQ表情的实现 QQ表情描述 蓝框 提示信息 鼠标在这个表情上面 这个表情才动 可以增加表情 表情打包 单击这个表情插入表情 关闭本窗体   主要使用Webbrowsr来实现的   -- ...

  5. 利用php做出简单的发布信息和回复功能

    题目要求 1.建一个pinglun的数据库,自己建表2.完成一个简单的发布信息回复功能3.布局可以随便,主要是功能要实现4.注意回复是可以回复每一条的评论5.评论回复功能类似于qq空间的发布信息和回复 ...

  6. 一款基于jQuery的QQ表情插件

    我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您 ...

  7. 腾讯QQ表情为什么如此成功呢

    本人为原创作品:e良师益友 ,转载是并且注明 e良师益友网导读:腾讯开发的QQ表情功能给中国人的聊天增添一抹幽默,很多时候图片表情比话语更好的表达我们的意思,翻开你的聊天记录就会发现夹杂这很多不同的表 ...

  8. 经典qq表情插件(html+nodejs应用)

    由于目前在接触聊天室项目,接到一个需求实现一个类似QQ表情.在网上找了一款jquery经典表情插件.下面介绍一个用法: HTML: 首先在html页面的head中引入jQuery库文件和QQ表情插件j ...

  9. Ext扩展的QQ表情选择面板

    Ext扩展的QQ表情选择面板 define(function () { EmoteChooser = function(cfg){ this.width=340; this.height=112; t ...

随机推荐

  1. 前端MVC Vue2学习总结(六)——axios与跨域HTTP请求、Lodash工具库

    一.axios Vue更新到2.0之后宣告不再对vue-resource更新,推荐使用axios,axios是一个用于客户端与服务器通信的组件,axios 是一个基于Promise 用于浏览器和 no ...

  2. NOI 2005维护数列

    题目描述 请写一个程序,要求维护一个数列,支持以下 6 种操作:(请注意,格式栏 中的下划线‘ _ ’表示实际输入文件中的空格) 输入输出格式 输入格式: 输入文件的第 1 行包含两个数 N 和 M, ...

  3. 第一本的java 的小总结

    1.Java常见的注释有哪些,语法是怎样的? 1)单行注释用//表示,编译器看到//会忽略该行//后的所文本  2)多行注释/* */表示,编译器看到/*时会搜索接下来的*/,忽略掉/* */之间的文 ...

  4. PE解析器的编写(一)——总体说明

    之前自己学习了PE文件的格式,后来自己写了个PE文件的解析器,这段时间工作上刚好要用到它,老板需要能查看某个exe中加载的dll的一个工具,我在使用之前自己写的这个东西的时候,发现很多东西都忘记了,所 ...

  5. dulicate symbol for architecture i386 或者其他什么CPU架构 比如i386

    昨天群里有个哥们遇到和么一个问题 , 错误的大概意思呢,就是 重复定义了  一个名字. 解决办法,只能修改名字啊. 而且,错误信息 也很明确的 支出了 重复定义的类文件名字PassGuardViewC ...

  6. 采用集成的Windows验证和使用Sql Server身份验证进行数据库的登录

    采用集成的Windows验证和使用Sql Server身份验证进行数据库的登录 1.集成的Windows身份验证语法范例 1 string constr = "server=.;databa ...

  7. Redis进阶实践之二如何在Linux系统上安装安装Redis

    一.引言      上一篇文章写了"如何安装VMware Pro虚拟机"和在虚拟机上安装Linux操作系统.那是第一步,有了Linux操作系统,我们才可以在该系统上安装Redis. ...

  8. IdentityServer Topics(3)- 定义客户端

    客户端代表可以从您的身份服务器请求令牌的应用程序. 细节有所不同,但您通常为客户端定义以下常用设置: 一个唯一的客户端ID 一个密钥,如果需要 允许与令牌服务的交互(称为授权类型) 身份或访问令牌被发 ...

  9. AOP---jdk动态代理的思考

    引出问题:动态代理中是谁调用了invoke方法 为了更好的说明情况,我先写一个动态代理类 a.Person类 public interface Person { public void eating( ...

  10. 云计算之路-阿里云上:docker swarm 集群故障与异常

    在上次遭遇 docker swarm 集群故障后,我们将 docker 由 17.10.0-ce 升级为最新稳定版 docker 17.12.0-ce . 前天晚上22:00之后集群中的2个节点突然出 ...