分享一个个人觉得比较好用的图片表情输入工具,用于在评论框中输入颜文字、图片表情或 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
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于