傳遞給SCEditor時無法使JSON對象正常工作

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文件上面的文本無效。

嘗試將其放在您的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實例，即使表情由於某種原因失敗。