diygod / owo

:lollipop: Lovely Emoticon and Emoji Keyboard for input

OωO

Lovely Emoticon and Emoji Keyboard for textarea or input

Introduction

Demo

Screenshot

Install

$ npm install owo --save

Usage

HTML

<link rel="stylesheet" href="OwO.min.css">
<!-- ... -->
<div class="OwO"></div>
<!-- ... -->
<script src="OwO.min.js"></script>

JS

var OwO_demo = new OwO({
    logo: 'OωO表情',
    container: document.getElementsByClassName('OwO')[0],
    target: document.getElementsByClassName('OwO-textarea')[0],
    api: './OwO.json',
    position: 'down',
    width: '100%',
    maxHeight: '250px'
});

Options

{
    logo: 'OωO表情',                                               // OwO button text, default: `OωO表情`
    container: document.getElementsByClassName('OwO')[0],         // OwO container, default: `document.getElementsByClassName('OwO')[0]`
    target: document.getElementsByClassName('OwO-textarea')[0],   // OwO target input or textarea, default: `document.getElementsByTagName('textarea')[0]`
    api: './OwO.json',                                            // OwO Emoticon data api, default: `https://api.anotherhome.net/OwO/OwO.json`
    position: 'down',                                             // OwO body position, default: `down`
    width: '100%',                                                // OwO body width, default: `100%`
    maxHeight: '250px'                                            // OwO body max-height, default: `250px`
}

Work with module bundler

var OwO = require('owo');
var OwO_demo = new OwO({
    // ...
});

Data API

Provide emoticon data for OwO.

Example

Run in development

$ npm install
$ npm run dev

Make a release

$ npm install
$ npm run build

LICENSE

MIT © DIYgod

owo's Issues

表情面板不支持div输入框

像<div contenteditable="true"><div> 这种输入框就没法插入表情。作者能支持一下吗？

HTML entities will be encoded

Such as >_<, it will be >_< in textarea.

InstantClick如何使用本项目

InstantClick如何使用本项目，我放入InstantClick.on的时候提示OwO不是构造函数

指定class有问题

采用 js编写container: document.getElementsByClassName('')[0]的方式指定按钮，css和js会无效；只有原始地添加OwO在按钮class里面才有效。