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

原文地址：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、图片表情等，内容可自定义。

二、使用方法

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

<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