OwO是一款可爱且实用的js表情符号插件。OwO表情符号插件可以在文本域或输入框中输入表情符号,它支持颜文字、Emoji、图片等,支持移动端,表情数据从一个可以自定义的json接口读取。
安装
可以使用npm来安装OwO表情符号插件。
$ npm install owo --save
使用方法
使用该表情符号插件需要在页面中引入OwO.min.css和OwO.min.js文件。
<link rel="stylesheet" href="OwO.min.css"> <script src="OwO.min.js"></script>
HTML结构
你可以使用<textarea>
元素或<input>
元素作为目标元素,使用一个<div>
元素作为表情符号的容器。
<!-- 目标元素 --> <textarea class="OwO-textarea"></textarea> <!-- 表情符号容器 --> <div class="OwO"></div>
初始化插件
可以通过下面的方法来对OwO插件进行初始化。
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' });
配置参数
OwO插件的配置参数如下:
logo
:按钮上的文本,默认为"OωO表情"。container
:OwO表情符号的容器。target
:OwO表情符号的目标textarea或input元素。api
:OwO表情符号使用的json数据。position
:OwO表情符号body的位置。width
:OwO表情符号body的宽度。maxHeight
:OwO表情符号body的最大高度。
OwO表情符号插件的github地址为:https://github.com/DIYgod/OwO