Dynamically bind dropdown in CKEditor (FCK Editor)

Dynamically bind drop down in CKEditor (FCK Editor)


Get dropdown data from database in CkEditor

First of alldownload and implement CkEditor then install strinstert plugin ( neeed to dowanload all dependent plugins)

or use CkEditor builder (Add to my editor button) and select strinstert plugin
http://ckeditor.com/addon/strinsert


Open ckeditor> plugins>strinsert>plugins.js file

replace it with below file

/**
 * @license Copyright © 2013 Stuart Sillitoe <stuart@vericode.co.uk>
 * This work is mine, and yours. You can modify it as you wish.
 *
 * Stuart Sillitoe
 * stuartsillitoe.co.uk
 *
 */
CKEDITOR.plugins.add('strinsert',
{
    requires: ['richcombo'],
    init: function (editor) {
        var response = getddlData();
        var responseArr = response.split(",");
        alert(responseArr.length);
        //  array of strings to choose from that'll be inserted into the editor
        var strings = [];
        //strings.push(['@@FAQ::displayList()@@', 'FAQs', 'FAQs']);
        //strings.push(['@@Glossary::displayList()@@', 'Glossary', 'Glossary']);
        //strings.push(['@@CareerCourse::displayList()@@', 'Career Courses', 'Career Courses']);
        //strings.push(['@@CareerProfile::displayList()@@', 'Career Profiles', 'Career Profiles']);
        //BY Pankaj Sharma (3 responses being filed :  'drop down Value', drop down Text, Title)
        for (i = 0; i < responseArr.length; i++) {
            strings.push([responseArr[i], responseArr[i + 1], responseArr[i + 2]]);
            i = i + 2;
        }
        // add the menu to the editor
        editor.ui.addRichCombo('strinsert',
{
   label: 'add bookmarks',
   title: 'add bookmarks',
   voiceLabel: 'add bookmarks',
   className: 'cke_format',
   multiSelect: false,
   panel:
{
   css: [editor.config.contentsCss, CKEDITOR.skin.getPath('editor')],
   voiceLabel: editor.lang.panelVoiceLabel
},
   init: function () {
       this.startGroup("Insert Bookmark");
       for (var i in strings) {
           this.add(strings[i][0], strings[i][1], strings[i][2]);
       }
   },
   onClick: function (value) {
       editor.focus();
       editor.fire('saveSnapshot');
       editor.insertHtml(value);
       editor.fire('saveSnapshot');
   }
});
    }
});
function getddlData() {
    var ajaxResponse;
    $.ajax({
        type: "POST",
        url: 'TextEditor.aspx/GetBookMarkData', // AJAX call to fecth dropdown data
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false,
        cache: false,
        // Text file name
        success: function (response) {
            //    //alert(data.d);    // or do some other data processing
            //   //return data.d;
            ajaxResponse = response;
        }
    });
    return ajaxResponse.d;
}
//$(function () {
//    getddlData();  // calling ajax function on page load
//});

Now add webmethod in your C# code behind

     [WebMethod]
        public static string GetBookMarkData()
        {
            //string bookmarkData = "'@@Test@@','TestOne','TestOne'";
            /// BY Pankaj Sharma (3 responses dropdown values being filed :  'drop down Value', drop down Text, Title)
            /// Need DB data in , seprated list  Formate:  @@Test@@,TestOne, TestOne,  @@Test2@@,Test2,Test2
            string sbookmarkData = "@@Test_Name@@, Test Name, Test Name,     @@Test_Add@@, Test Add, Test Add,    @@Test_City@@, Test City, Test City,     @@Test_Phone@@, Test Phone, Test Phone";
            return sbookmarkData;
        }