评论框图片表情输入工具分享

原文地址：https://hacpai.com/article/1490443590644

分享一个个人觉得比较好用的图片表情输入工具，用于在评论框中输入颜文字、图片表情或 Emoji。前段时间发现于博客 AnotherHome。

原项目地址：https://github.com/DIYgod/OwO
预览：http://diygod.github.io/OwO/demo/

由于原项目输入的图片是标签模式的，而 Solo 提交评论后会过滤掉 HTML 标签，所以我修改成了可以通过参数配置是使用 Markdown 格式还是默认的 HTML 标签模式。

修改版地址：https://github.com/iTanken/FrontProjects/tree/master/OwO
预览：http://git.itanken.cn/OwO/

一、功能预览

切换 Tab 选择输入颜文字、Emoji、图片表情等，内容可自定义。

二、使用方法

导入样式表
在页面评论框附近添加一个 div
导入 JavaScript
初始化

<link rel="stylesheet" href="OwO.min.css">
<div class="OwO"><div>
<script src="OwO.min.js"></script>
<script>
var OwO_demo = new OwO({logo: 'OωO表情', // 按钮内容container: document.getElementsByClassName('OwO')[0], // 按钮div元素target: document.getElementsByClassName('OwO-textarea')[0], // 评论框api: './OwO.json', // 表情数据position: 'down', // 输入层相对于按钮的方向，可选 up/downwidth: '100%', // 输入层宽度maxHeight: '250px' // 输入层最大高度
});
</script>

三、实际应用

如需查看具体使用情况，请移步至个人博客。

四、修改内容

新增了几个初始化 OwO 对象时的参数，其次是修改了表情数据，表情图片全部请求阿里云 OSS。

默认参数值：

    const defaultOption = {logo: 'OωO表情',container: document.getElementsByClassName('OwO')[0],target: document.getElementsByTagName('textarea')[0],position: 'down',width: '100%',maxHeight: '250px',useMarkdown: false, // 是否使用 Markdown 图片格式appendContent: '', // 按钮后面的提示内容usedSize: 'h_200' // 表情图片样式参数，详见阿里云 OSS。"h_200" 表示高度统一为 200 };

五、修改版初始化参数

    var OwO_demo = new OwO({logo: 'OωO表情',container: document.getElementsByClassName('OwO')[0],target: document.getElementsByClassName('OwO-textarea')[0],api: '/js/lib/OwO/OwO.js',position: 'up',width: '100%',maxHeight: '250px',useMarkdown: true,appendContent:'<code> 推荐使用OωO表情来更生动形象的表达自己的感情！</code>',usedSize: 'h_150'});

数据文件：http://itanken.oss-cn-hangzhou.aliyuncs.com/images/emimg/OwO.json

评论框图片表情输入工具分享相关推荐

java使用微信表情代码_iOS高仿微信表情输入功能代码分享
最近项目需求,要实现一个类似微信的的表情输入,于是把微信的表情扒拉出来,实现了一把.可以从这里下载源码.看起来表情输入没有多少东西,不外乎就是用NSTextAttachment来实现图文混排,结果在实 ...
vue 实现评论区表情输入
一.背景实现评论区可输入中文,字母,数字,符号及表情的输入(表情为ios系统表情) 表情的输入,由两种方式实现,一是通过输入unicode编码如'\ud83c\udf36',二是,通过选择表情输入, ...
不甘心只做输入工具，搜狗输入法上线AI助手，提供智能服务
8月19日搜狗输入法上线了新功能--智能汪仔,在输入法中引入了AI助手,这是搜狗输入法继今年5月推出"语音变声功能"后又一个AI落地产品. 有了智能汪仔AI助手的加持后,搜狗输入法 ...
重启服务器之home下文件全没,小白宝典——树莓派实用工具分享(大神绕路)
原标题:小白宝典--树莓派实用工具分享(大神绕路) 工欲善其事,必先利其器. 很多人的树莓派是不是安装好系统之后,就闲置起来了? 其实树莓派就像是我们平常所用的PC一样,除了基础的硬件之外,真正能够使 ...
Ajax Interceptor工具分享
一.是什么? 是一款chrome浏览器插件,可拦截请求并作出修改二.为什么? 1.直接改数据库,麻烦,需知道表关系,可能涉及到多表,线上的表还不能随便改 2.mock数据方便.定位问题快,容易重现问 ...
mysql emoy表情_GitHub - PandaQAQ/PandaEmoView: emoji gif 表情图文混排，仿微信表情输入...
该库具有以下特点: 支持 emoji 表情图片支持 gif 动态表情输入显示支持单张贴图表情(与微信收藏表情一致) 支持题图表情库的添加删除效果图: 快速使用引入库 compile 'com. ...
快速拷贝文件经验及工具分享 - 天缘博客
快速拷贝文件经验及工具分享 - 天缘博客快速拷贝文件经验及工具分享 2010年06月28 | 分类: 软件应用 | 7 条评论 | 标签: 磁盘管理本文介绍如何加速拷贝文件经验及两款快速拷贝工具, ...
卡巴可以用的激活工具分享大家需要的拿去
卡巴可以用的激活工具分享大家需要的拿去欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器所展示的欢迎页.如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇 ...
怎么修改原图片的尺寸？图片尺寸在线修改工具分享
平时经常会遇到图片尺寸过大导致无法上传的问题,其实可以通过图片尺寸修改(https://www.yasuotu.com/size)来解决,下面给大家分享一款图片尺寸在线修改工具,打开浏览器即可改图片大 ...