CKEditor

by Dhiraj Bodicherla

HTML

<script src="http://ckeditor.com/apps/ckeditor/4.0/ckeditor.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<h3>CKEditor 4:</h3>

<label>
    <input type="checkbox" name="one" value="one" checked="checked" />one</label>
<label>
    <input type="checkbox" name="two" value="two" checked="checked" />two</label>
<label>
    <input type="checkbox" name="three" value="three" />three</label>
<label>
    <input type="checkbox" name="four" value="four" />four</label>
<textarea id="editor1">Test</textarea>
<input type="button" id="reinit_editor" value="reinit editor" />

JavaScript

var merge_fields = ["one", "two", "three", "four"];

var buildListHasRunOnce = 0;

var buildList = function () {
    console.log("buildList");
    if (buildListHasRunOnce == 1) {
        console.log("remove ul");
        // Remove the old unordered list from the dom.
        // This is just to cleanup the old list within the iframe
        $(this._.panel._.iframe.$).contents().find("ul").remove();
        // reset list
        this._.items = {};
        this._.list._.items = {};
    }

    for (var i in merge_fields) {
        var item = merge_fields[i];
        var cb = $("input[name='" + item + "']");
        if (cb.is(":checked")) {
            this.add(item, "<span class='mergefield listitem'>" + item + "</span>", item);
        }
    }

    if (buildListHasRunOnce == 1) {
        console.log("this._.committed = 0");
        // Force CKEditor to commit the html it generates through this.add
        this._.committed = 0; // We have to set to false in order to trigger a complete commit()
        this.commit();
    }

    buildListHasRunOnce = 1;
};

$(':checkbox').change(function () {
    myinstance.fire('updateList');
});

CKEDITOR.plugins.add('merge', {
    requires: ['richcombo'], //, 'styles' ],
    init: function (editor) {
        var config = editor.config,
            lang = editor.lang.format,
            self = this;

        editor.ui.addRichCombo('Merge', {
            label: "Merge",
            title: "mergefields",
            id: 'mergefields',
            className: 'cke_format',
            multiSelect: false,

            panel: {
                css: [config.contentsCss, CKEDITOR.getUrl(editor.skinPath + 'editor.css')],
                voiceLabel: lang.panelVoiceLabel
            },

            init: function () {
                console.log("init()");
                this.buildList();
                var self = this;
                editor.on("updateList", function () {
                    self.buildList();
                });
           ...