Emojione 区域不显示表情符号窗格答案

【问题标题】：Emojione Area not displaying the emoji paneEmojione 区域不显示表情符号窗格
【发布时间】：2017-06-17 05:00:16
【问题描述】：

我正在使用Emojione Area JavaScript 插件。但是，我只显示文本区域，没有表情符号窗格。

这是我的 HTML 文件：

    <html>
    <head>
        <link rel="stylesheet" href="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.css">
        <script type="text/javascript" src="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <link rel="stylesheet" href="stylesheet.css">
    </head>
    <body>
        <script>
            $(document).ready(function() {
                $("#emojionearea1").emojioneArea({
                    pickerPosition: "left",
                    tonesStyle: "bullet"
                });
        </script>

        <div class="row">
            <div class="span6">
                <textarea id="emojionearea1">Default :smile:</textarea>
            </div>
        </div>
    </body>
</html>

【问题讨论】：

标签： javascript area emojione

【解决方案1】：

您的代码有两点需要修复：

您需要在 EmojioneArea 之前从 jQuery 导入 Javascript 文件
您的 Javascript 脚本未关闭函数 $(document).ready()

所以应该是：

<html>
<head>
    <link rel="stylesheet" href="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/mervick/emojionearea/master/dist/emojionearea.min.js"></script>
    <link rel="stylesheet" href="stylesheet.css">
</head>
<body>

<div class="row">
    <div class="span6">
        <textarea id="emojionearea1">Default :smile:</textarea>
    </div>
</div>

<script>
    $(document).ready(function() {
        $("#emojionearea1").emojioneArea({
            pickerPosition: "left",
            tonesStyle: "bullet"
        });
    })
</script>

</body>
</html>

Popup 将出现在右侧，因为 Left 不是属性 pickerPosition 的有效值。根据文档 (www.github.com/mervick/emojionearea)，唯一有效的值是 top、right 和 bottom。 top 是默认值

希望对你有帮助

最好的问候

【讨论】：

【解决方案2】：

无论位置设置如何，我都遇到了类似的问题，即 emojioneArea 面板不可见。我添加了属性inline: true，它就出现了。

<script>
$(document).ready(function() {
    $("#emojionearea1").emojioneArea({
        pickerPosition: "left",
        tonesStyle: "bullet",
        inline: true
    });
})

【讨论】：