转载

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

简要教程

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

查看演示 下载插件

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

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

安装

可以使用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+的相关文件

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/emojione/1.5.2/assets/sprites/emojione.sprites.css">                 <link rel="stylesheet" href="to/path/css/emojionearea.min.css"> <script type="text/javascript" src="to/path/js/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/1.5.2/lib/js/emojione.min.js"></script> <script type="text/javascript" src="to/path/js/emojionearea.min.js"></script>

基本使用

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

<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());   });

emojionearea.js所见即所得文本编辑器插件的github地址为： https://github.com/mervick/emojionearea

来源：jQuery之家

原文 http://www.html5cn.org/article-9440-1.html

正文到此结束