mycolorway / simditor-emoji

a emoji plugin for Simditor

Simditor Emoji

Simditor 的官方扩展，为工具栏提高按钮，在内容中插入 Emoji 图片。

###如何使用

在 Simditor 的基础上额外引用 simditor-emoji 的脚本和样式

<link rel="stylesheet" type="text/css" href="/assets/stylesheets/simditor-emoji.css" />
<script src="/assets/javascripts/simditor-emoji.js"></script>

配置

new Simditor({
	textarea: textareaElement,
	...,
	toolbar: [..., 'emoji'],
	emoji: {
		imagePath: 'images/emoji/'
	}
})

###参数

imagePath (Type: String)

emoji 图片的路径，相对或者绝对路径都可以

默认值: 'images/emoji/'

images (Type: Array)

按钮菜单中提供哪些 emoji 图片供用户选择

默认值: [ 'smile.png' 'smiley.png' 'laughing.png' 'blush.png' 'heart_eyes.png' 'smirk.png' 'flushed.png' 'grin.png' 'wink.png' 'kissing_closed_eyes.png' 'stuck_out_tongue_winking_eye.png' 'stuck_out_tongue.png' 'sleeping.png' 'worried.png' 'expressionless.png' 'sweat_smile.png' 'cold_sweat.png' 'joy.png' 'sob.png' 'angry.png' 'mask.png' 'scream.png' 'sunglasses.png' 'heart.png' 'broken_heart.png' 'star.png' 'anger.png' 'exclamation.png' 'question.png' 'zzz.png' 'thumbsup.png' 'thumbsdown.png' 'ok_hand.png' 'punch.png' 'v.png' 'clap.png' 'muscle.png' 'pray.png' 'skull.png' 'trollface.png' ]

simditor-emoji's Issues

toolbar添加'emoji'后直接没有工具栏了

var editor = new Simditor({
            textarea: $('#editor'),
            toolbar: ['emoji', 'bold', 'italic', 'underline', 'color', '|', 'ol', 'blockquote', 'code', '|', 'link', 'image', '|'],
            emoji: {
                imagePath: 'static/images/emoji/'
            }
        });

去掉'emoji时'显示完好

多个实例的时候，不能同时使用

用了两个实例，当一个可以用的时候，另外一个点击之后菜单无法出现。

想問一下 在rails 專案當中可以使用嗎?

Simditor 版本2.3.6

我把rails專案

在public 資料夾 新增 一個資料夾 assets 然後將simditor-emoji 裡面的檔案全部丟進去

接著

首頁layout

  <title>test</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <link rel="stylesheet" type="text/css" href="/assets/styles/simditor-prettyemoji.css" />
  <script src ="/assets/lib/simditor-prettyemoji.js"></script>

text_area使用

<%= f.text_area :body, :rows =>7, :cols => 50, :id => "editor",message:'內容不可以為空白以及少於20個字', placeholder: "填寫內文" %>

<script type="text/javascript">
      $(function() {
     Simditor.locale = 'en-US';

      var editor = new Simditor({
        textarea: $('#editor'),
        markdown: true,
        toolbar: ['emoji', 'title', 'bold', 'italic', 'underline', 'strikethrough', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment', '|', 'markdown'],
        emoji: {
                    autoClose: true,
                    imagePath: 'images/emoji/',                    
                    categories: ["face","fashion","animal","food","travel","time","work","font","tool","other"]
                }   

      });
    });
</script>

如果刪掉 toolbar: ['emoji', ....] 當中的 'emoji' 原本的Simditor是正常

不知道有沒有人試過該如何使用？？

如果编辑器没有获取到焦点，点击toolbar上的emoji按钮没反应。

RT

表情显示的大小是否可以控制

看上去太小了，有点变形

请问可否在react项目中引用该扩展

你好，我在react项目中使用了 Simaditor,但没有办法引用其扩展，请问该扩展是否可以在react项目中使用？

没有分页

如果表情多了。应该加个分页的功能

你好，能否支持上传视频，音频等多媒体资源呢？

表情排列太紧凑了，建议把li的左右padding值设大点

Simditor video

Hi,

Thanks for the fantastic work.

Simditor is a great editor however, still does not support inserting videos. Please can someone fixes the following code for the simditor video?

https://github.com/huchangjun825/simditor-video-1

在编辑器中显示的表情是长条形的

styles/simditor-emoji.css 文件中的第31行：padding: 0 3px; 改为：padding: 0; 即可。

在编辑器中显示的表情是比较长条形的，我通过检查元素修改padding大小，在编辑器和显示页面表情的显示效果都一样了。

请求更新npm源

npm上还是2.1.0

Medium severity vulnerability affecting this repo

Hi there,

We noticed that your repo has a medium severity vulnerability:

• Cross-site Scripting (XSS)
• Affected package: jquery <3.0.0-beta1 >2.2.0 || <2.2.0 >1.12.3 || <1.12.0 >=1.4.0

Here is the test report for this repo.
If you’d like to fix this vulnerability, Snyk lets you generate a pull request that recommends the best upgrade path - there’s a link to fix this vulnerability on the test report.

Stay secure :-)
Snyk Community

toolbar 焦点问题

有时候写着写着不小心点一下别处，toolbar就立马在没有任何提示的情况下失焦，小白用户很难发现作者的初衷，反而会觉得程序不好用，动不动就失去反应。 我觉得大家可以尝试下面这两种方法改善一下。
1.点击toolbar后focus body (实现方法见#code1)
2.失去焦点后toolbar颜色变淡作为提示。

code1

编辑simdltor.js

1. 搜索 Button.prototype.needFocus = true;
   搜到后把 true 改为 false
2. 搜索 this.el.on('mousedown', function(e) {
   搜到后在下面加 $(".simditor-body").focus();