Having trouble getting JSON object to work when passed to SCEditor

Question

I am using SCEditor and I am trying to set my own custom emoticons according to the emoticons option specified on this page.

So I called it like so:

$(document).ready(function() {

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

})

Then in my emoticons.json file I have this:

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

However it is not working. I have checked the NET panel in my browser and I have confirmed it is fetching the .json file fine, however when I click to open the smiley window in the editor it is blank (all I see is the "more" link).

Am I doing something wrong here?

Answer 1

Json lint show above text in json file is invalid.

Try putting this in your json file

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

I tried this in php

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

Output

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

)

Answer 2

I have tried by your link. The follows is my code:

$(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/"
        });
    });

Above this, you may kown why your code is wrong. Accross from jQuery.getJSON, $.getJSON returns JQXHR,not a Json object. So, It is not possible to show your emoticons.

Answer 3

As per WhiteWater's answer the reason it wasn't working was because it was returning a JQXHR object and not a JSON object, so I had to work out how to get it to return a JSON object whilst the editor loading not being dependent on the emoticons existence.

So we have the solution below with credit to jeremysawesome for his answer to this question:

// 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}); 
});

This will load the emoticons but will always load the sceditor instance, even if the emoticons fail for some reason.