可集成EmojiOne表情符号的所见即所得的文本编辑器 |其他|下载

简要教程

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

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

emojionearea所见即所得的文本编辑器

安装

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

基本使用

最基本的使用方法是使用一个</code>来作为文本编辑器。</p> <pre class="brush:html"> <textarea id="example1">

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


                                  
                
                autoHideFilters属性表示自动隐藏表情符号选择区域。
                  使用div作为容器
                你也可以使用
元素作为容器。
                
......
                 
                
                                  
                
                  使用input作为容器
                                
                
                                
                
                  使用图片来代替sprite雪碧图
                ......
            
                
                                
                
                  其它布局方式
                ......
            
                
                                
                
                 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());
  });                  
                
                emojionearea.js所见即所得文本编辑器插件的github地址为：https://github.com/mervick/emojionearea