html集成表情,可集成EmojiOne表情符号的所见即所得的文本编辑器

emojionearea.js是一款可集成EmojiOne表情符号的所见即所得的jQuery文本编辑器插件。emojionearea.js允许你将任何的HTML元素转换为WYSIWYG文本编辑器，并且它能够在编辑器中使用Emojione图标。

EmojiOne是一款强大的表情符号插件。它提供了1600+个不同类别的表情图标，支持PNG格式和SVG格式。并且可以在客户端使用js来进行符号解析，也可以在服务器端使用PHP代码来进行符号解析，功能非常强大。

安装

可以使用bower、npm或composer来安装该文本编辑器插件。

bower install emojionearea

npm install emojionearea

composer require mervick/emojionearea

使用方法

使用该WYSIWYG文本编辑器插件需要在页面中引入emojionearea.min.css和jquery1.8.2+、emojionearea.min.js文件。例外要使用表情符号需要引入EmojiOne1.5+的相关文件

基本使用

最基本的使用方法是使用一个来作为文本编辑器。

然后使用下面的方法来初始化文本编辑器。

$(document).ready(function() {

// define emojione location (optional, see more at https://github.com/Ranks/emojione)

// emojione.imagePathPNG = '../vendor/emojione/emojione/assets/png/';

$("#example1").emojioneArea({

// options

autoHideFilters: true

});

});

autoHideFilters属性表示自动隐藏表情符号选择区域。

使用div作为容器

你也可以使用

元素作为容器。

......

$(document).ready(function() {

$("#example2").emojioneArea();

});

使用input作为容器

$(document).ready(function() {

$("#example3").emojioneArea();

});

使用图片来代替sprite雪碧图

......

$(document).ready(function() {

$("#example4").emojioneArea({

useSprite: false

});

});

其它布局方式

......

$(document).ready(function() {

$("#example5").emojioneArea({

template: ""

});

});

API

var default_options = {

template : "",

dir : "ltr",

spellcheck : false,

autocomplete : "off",

autocorrect : "off",

autocapitalize : "off",

placeholder : null,

container : null,

hideSource : true,

autoHideFilters : false,

useSprite : true,

filters: {

// see in source file

}

};

.on(events, handler);

// - events

// Type: String

// One or more space-separated event types and optional namespaces

// - handler

// Type: Function(jQuery Element, Event eventObject [, Anything extraParameter ] [, ... ] )

// A function to execute when the event is triggered.

.off(events[, handler]);

// - events

// Type: String

// One or more space-separated event types and optional namespaces

// - handler

// Type: Function(jQuery Element, Event eventObject [, Anything extraParameter ] [, ... ] )

// A handler function previously attached for the event(s)

// built-in events:

// "mousedown", "mouseup", "click", "keyup", "keydown",

// "filter.click", "emojibtn.click", "arrowLeft.click", "arrowRight.click",

// "focus", "blur", "paste", "resize", "change"

.setText(str);

// - str

// Type: String

// Set text

.getText();

// Get text

// Usage methods, example:

var el = $("selector").emojioneArea();

el[0].emojioneArea.on("emojibtn.click", function(btn) {

console.log(btn.html());

});