在将 JSON 对象传递给 SCEditor 时无法正常工作

Question

我正在使用 SCEditor，我正在尝试根据此页面上指定的表情符号选项设置自己的自定义表情符号。

所以我这样称呼它：

$(document).ready(function() {
    $(".sceditor").sceditor({
        // Other options
        emoticons: $.getJSON('../../images/emoticons/default/emoticons.json'),
        emoticonsRoot: '../../images/emoticons/default/'
    });
})

然后在我emoticons.json文件中，我有这个：

{
    dropdown: {
        ':)': 'emoticons/smile.png',
        ':angel:': 'emoticons/angel.png',
        ':angry:': 'emoticons/angry.png'
    }
}

但是它不起作用。我已经检查了浏览器中的NET面板，并确认它正在获取.json文件，但是当我单击以在编辑器中打开笑脸窗口时，它是空白的（我看到的只是"更多"链接）。

我在这里做错了什么吗？

Answer 1

json 文件中文本上方显示的 json lint 无效。

尝试将其放入您的 json 文件中

{
    "dropdown": {
        ":)": "emoticons/smile.png",
        ":angel:": "emoticons/angel.png",
        ":angry:": "emoticons/angry.png"
    }
}

我在 php 中试过这个

$a = '{
    "dropdown": {
        ":)": "emoticons/smile.png",
        ":angel:": "emoticons/angel.png",
        ":angry:": "emoticons/angry.png"
    }
}' ;
print_r(json_decode($a));

输出

Array
(
    [dropdown] => Array
        (
            [:)] => emoticons/smile.png
            [:angel:] => emoticons/angel.png
            [:angry:] => emoticons/angry.png
        )
)

Answer 2

我已经通过您的链接尝试过。以下是我的代码：

$(function() {
        // Replace all textarea's
        // with SCEditor
        $("textarea").sceditor({
            plugins: "bbcode",
            style: "plugins/SCEditor/development/jquery.sceditor.default.css",
            emoticons: {
                // Emoticons to be included in the dropdown
                dropdown: {
                    ":)": "emoticons/smile.png",
                    ":angel:": "emoticons/angel.png"
                },
                // Emoticons to be included in the more section
                more: {
                    ":alien:": "emoticons/alien.png",
                    ":blink:": "emoticons/blink.png"
                },
                // Emoticons that are not shown in the dropdown but will still
                // be converted. Can be used for things like aliases
                hidden: {
                    ":aliasforalien:": "emoticons/alien.png",
                    ":aliasforblink:": "emoticons/blink.png"
                }
            },
            emoticonsRoot: "plugins/SCEditor/"
        });
    });

在此之上，您可能会知道为什么您的代码是错误的。来自jQuery.getJSON，$.getJSON返回JQXHR，而不是Json对象。因此，无法显示您的表情符号。

Answer 3

根据

WhiteWater 的回答，它不起作用的原因是因为它返回了一个JQXHR对象而不是一个JSON对象，所以我必须弄清楚如何让它返回一个JSON对象，同时编辑器加载不依赖于表情符号的存在。

因此，我们有以下解决方案，感谢jeremysawesome对这个问题的回答：

// create a variable to store the results
var emoticons = false;
$.getJSON('../../images/emoticons/default/emoticons.json')
.done(function(result){
    emoticons = result;
})
.always(function(){
    // always initialize the sceditor
    $('.my-selector').sceditor({emoticons: emoticons}); 
});

这将加载表情符号，但将始终加载 sceditor 实例，即使表情符号由于某种原因失败也是如此。