CKEditor plugin: plugin snadno a rychle aneb tlačítko pro vložení html

Dlouho jsem hledal, jak vložit do CKEditoru v módu WYSIWYG nějaký html kód (typicky odkaz na nějaký článek s popisem, na což jsem si udělal bookmarklet).

Popisů, jak vytvořit plugin, je hodně, ale jsou dost zdlouhavé - CKEditor Plugin Development, Creating a Simple CKEditor Plugin. Sám jsem se s tím pral přes dvě hodiny, a proto jsem sepsal tento stručný článek, který ukazuje, jak jednoduchý plugin vypadá a jak se přidá.. 

Vložení html - plugin

Na vložení html jsem si nakonec napsal jednoduchý plugin, zde je obsah souboru ckeditor/plugins/pastehtml/plugin.js:

/**
 * @license Copyright (c) 2013 JanKoWeb
 */

/**
 * @fileOverview Paste HTML Plugin
 */
// tato cast kodu pridava muj plugin do pluginu editoru
CKEDITOR.plugins.add( 'pastehtml',
{
	init: function( editor )
	{
		{
        var pluginName = 'pastehtml';
        // registrace prikazu pastehtml
        editor.addCommand(pluginName, CKEDITOR.plugins.pastehtml);
        // pridani tlacitka, nutno jeste rucne pridat do toolbaru
        editor.ui.addButton('PasteHtml',
            {
                label: 'Paste HTML',
                command: pluginName,
				icon: this.path + 'createlink.gif'
            });
    }
	}
} );
// vlastni funkce pluginu - vyuzil jsem javascriptoveho prikazu prompt (dialog), protoze vytvoreni dialogu je jinak na muj vkus zdlouhave
CKEDITOR.plugins.pastehtml = {
	exec: function( editor ) {
                // muj vlastni kod - dialog, kam uzivatel vlozi sve HTML a odentruje
		editor.insertHtml(prompt('HTML:',''));
	},
};

Potom stačí plugin aktivovat, pro zajímavost přikládám celé mé nastavení ckeditoru, které vkládám přímo do html:

 <script type="text/javascript">
              CKEDITOR.replace( 'cltext',
                {
                    fullPage : false, // pridat tag html do zdroje?
                    extraPlugins : 'syntaxhighlight,pastehtml', //AKTIVACE EXTERNICH PLUGINU
                    entities: false, // prevadet specialni znaky na entity?
                    contentsCss: "/etc/janko.css", // styl obsahu formulare
                    height: 600
                });
				
                CKEDITOR.config.toolbar_Full =
                    [
                    { name: 'tools',   items : [ 'Source','ShowBlocks','Maximize']},
                    { name: 'clipboards', items : ['Undo','Redo' ] },
                    { name: 'styles',      items : [ 'Styles' ] },
                    { name: 'paragraph',   items : [ 'NumberedList','BulletedList','-','Blockquote','-','JustifyCenter','PasteFromWord','RemoveFormat' ] },
                    { name: 'links',       items : [ 'Link','Unlink','Anchor','PasteHtml' ] }, //PASTE HTML TLACITKO
                    { name: 'insert',      items : [ 'Code','Image','Table'] },
                ];
                CKEDITOR.config.disableNativeSpellChecker = false;                                    
                CKEDITOR.config.forcePasteAsPlainText = true;         
                CKEDITOR.config.removePlugins = 'elementspath';
                				   
                CKEDITOR.config.keystrokes = 
                    [
					/*[CKEDITOR.CTRL + 86 /V/,  'pastetext' ], */
                    [ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ],
                    [ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ],

                    [ CKEDITOR.CTRL + 72 /*H*/, 'link' ],

                    [ CKEDITOR.CTRL + 66 /*B*/, 'bold' ],
                    [ CKEDITOR.CTRL + 73 /*I*/, 'italic' ],
                    [ CKEDITOR.CTRL + 85 /*U*/, 'underline' ],

                    [ CKEDITOR.CTRL + 43 /*43*/ /*1*/, 'h1' ],
                    [ CKEDITOR.CTRL + 236 /*2*/, 'H2' ],
                    [ CKEDITOR.CTRL + 154 /*3*/, 'heading-h3' ],
                    

                    [ CKEDITOR.CTRL + 83 /*S*/, 'save' ],
                ];
</script>