评论框图片表情输入工具分享
2017-09-19 20:26
344 查看
原文地址: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
初始化
如需查看具体使用情况,请移步至个人博客。
新增了几个初始化 OwO 对象时的参数,其次是修改了表情数据,表情图片全部请求阿里云 OSS。
默认参数值:
数据文件:http://itanken.oss-cn-hangzhou.aliyuncs.com/images/emimg/OwO.json
分享一个个人觉得比较好用的图片表情输入工具,用于在评论框中输入颜文字、图片表情或 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/down width: '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
相关文章推荐
- 【腾讯Bugly干货分享】舞动的表情包——浅析GIF格式图片的存储和压缩
- 如何去掉DedeCMS评论中的手形和表情图片
- 安卓 edittext禁止表情图片的输入
- 网页快照(图片)工具分享
- Android中实现Edittext中输入表情图片的方法
- 如何去掉DedeCMS评论中的手形和表情图片
- Android开发之使用Handler封装下载图片工具类(源代码分享)
- 安卓控件使用系列5:EditText输入表情图片
- 工具分享:图片水印工具(WaterMarker)
- 仿微博分享评论表情
- 工具方法:获取内容中的第一张图片(不包含表情)
- 分享一款不错多个图片上传工具
- android禁止EditText输入emoji表情图片
- 如何去掉DedeCMS评论中的手形和表情图片
- 分享两个超棒的帮助你生成占位图片(placeholder image)的在线工具
- JavaWeb 图片上传工具 ImageUtil工具类分享
- c#实现网页图片提取工具代码分享
- 分享两个转换webp格式图片的工具
- android禁止EditText输入emoji表情图片