
EmojiOne表情符号所见即所得的文本编辑器
EmojiOne是一款强大的表情符号插件。它提供了1600+个不同类别的表情图标,支持PNG格式和SVG格式。并且可以在客户端使用js来进行符号解析,也可以在服务器端使用PHP代码来进行符号解析,功能非常强大。
基本使用
最基本的使用方法是使用一个
<textarea id="example1"></textarea>
然后使用下面的方法来初始化文本编辑器。
<script type="text/javascript">
$(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
});
});
</script>
autoHideFilters属性表示自动隐藏表情符号选择区域。
使用div作为容器
你也可以使用<div>
元素作为容器。
<div id="example2">
......
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#example2").emojioneArea();
});
</script>
使用input作为容器
<input id="example3" value="......">
<script type="text/javascript">
$(document).ready(function() {
$("#example3").emojioneArea();
});
</script>
使用图片来代替sprite雪碧图
<textarea id="example4">
......
</textarea>
<script type="text/javascript">
$(document).ready(function() {
$("#example4").emojioneArea({
useSprite: false
});
});
</script>
其它布局方式
<textarea id="example5">
......
</textarea>
<script type="text/javascript">
$(document).ready(function() {
$("#example5").emojioneArea({
template: "<filters/><tabs/><editor/>"
});
});
</script>
API
var default_options = {
template : "<editor/><filters/><tabs/>",
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());
});