Add table plugin to primefaces editor

Question

I have searched for an answer to this question and found nothing usefull. Also I have followed this post http://forum.primefaces.org/viewtopic.php?f=3&t=20725. In the web application that I am working on I use the primefaces editor and I am trying to add a table plugin to this editor. Here is what I have done so far:

1. added the js file which contains the plugin to the app:

   <h:outputScript library="scripts" name="jquery_cleditor_table.js" />

2. added the table plugin in the scripts folder:

(function ($) {

// Define the table button
$.cleditor.buttons.table = {
    name: "table",
css: {"background": 'url("../img/table.gif") no-repeat scroll 0 0 transparent'},
    title: "Insereaza Tabel",
    command: "inserthtml",
    popupName: "table",
    popupClass: "cleditorPrompt",
    popupContent:
        '<label>Cols:<br /><input type="text" value="4" style="width:40px"></label>&nbsp;&nbsp;' +
        '<label>Rows:<br /><input type="text" value="4" style="width:40px"></label>' +
        '<br /><input type="button" value="Submit">',
    buttonClick: tableButtonClick
};

// Add the button to the default controls
$.cleditor.defaultOptions.controls = $.cleditor.defaultOptions.controls
    .replace("pastetext ", "pastetext table ");

// Table button click event handler
function tableButtonClick(e, data) {

    // Wire up the submit button click event handler
    $(data.popup).children(":button")
        .unbind("click")
        .bind("click", function (e) {

            // Get the editor
            var editor = data.editor;

            // Get the column and row count
            var $text = $(data.popup).find(":text"),
                cols = parseInt($text[0].value),
                rows = parseInt($text[1].value);

            // Build the html
            var html;
            if (cols > 0 && rows > 0) {
                html = "<table cellpadding=2 cellspacing=2 border=1>";
                for (y = 0; y < rows; y++) {
                    html += "<tr>";
                    for (x = 0; x < cols; x++)
                        html += "<td>" + x + "," + y + "</td>";
                    html += "</tr>";
                }
                html += "</table><br />";
            }

            // Insert the html
            if (html)
                editor.execCommand(data.command, html, null, data.button);

            // Reset the text, hide the popup and set focus
            $text.val("4");
            editor.hidePopups();
            editor.focus();

      });})(jQuery);

My gif image for the table is in the parent folder of the scripts in the img folder as seen in the url: "../img/table.gif". I am getting an error (on Browser log, Netbeans):

Uncaught TypeError: Cannot read property 'buttons' of undefined (11:23:18:096 | error, javascript)
at (anonymous function) (src/main/webapp/resources/scripts/jquery_cleditor_table.js:13:15)
at (anonymous function) (src/main/webapp/resources/scripts/jquery_cleditor_table.js:73:3)

My editor is customized so that certain buttons will appear on toolbar(bold italic underline strikethrough subscript superscript | font size style | color highlight removeformat | bullets numbering | outdent indent | alignleft center alignright justify | undo redo | cut copy paste pastetext). Anyway I don't think that this has something to do with the problem. I am using jsf2.2 and primefaces 5.1. Any help would be great.