CKEditor

by John Grivas

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>
<textarea id="editor1">Test</textarea>

JavaScript

//CKEDITOR.replace('editor1');

CKEDITOR.plugins.add('tokens', {
    requires: ['richcombo'], //, 'styles' ],
    init: function (editor) {
        var rebuildList = CKEDITOR.tools.bind(buildList, this);
        rebuildList(editor);
        $(editor).bind('rebuildList', rebuildList);
    
    }
});

CKEDITOR.replace('editor1', {
    toolbar: [
        ['tokens', 'Styles', 'Format', 'Bold', 'Italic'],
        ['Undo', 'Redo']
    ],
    extraPlugins: 'tokens'
});

var buildList = function (editor) {
    var config = editor.config,
        lang = editor.lang.format;

    // Gets the list of tags from the settings.
    var tags = []; //new Array();
    //this.add('value', 'drop_text', 'drop_label');
    tags[0] = ["[contact_name]", "Name", "Name"];
    tags[1] = ["[contact_email]", "email", "email"];
    tags[2] = ["[contact_user_name]", "User name", "User name"];
    editor.ui.addRichCombo('tokens', {
        label: "Insert tokens",
        title: "Insert tokens",
        voiceLabel: "Insert tokens",
        className: 'cke_format',
        multiSelect: false,

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

        init: function () {
            this.startGroup("Tokens");
            //this.add('value', 'drop_text', 'drop_label');
            for (var this_tag in tags) {
                this.add(tags[this_tag][0], tags[this_tag][1], tags[this_tag][2]);
            }
        },

        onClick: function (value) {
            editor.focus();
            editor.fire('saveSnapshot');
            editor.insertHtml(value);
            editor.fire('saveSnapshot');
        }
    });
    alert('ok');
}

////////////////////////////////////////////////////////////////////////////////
var buildList3 = function (editor) {
    var config = editor.config,
        lang = editor.lang.format;

    // Gets the list of tags from the settings.
    var tags = []; //new...