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á..
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>
Tento web jsem zakládal na střední, v roce 2008. Je zde hlavně archiv mé tvorby.
Aktuální věci publikuji kvůli úspoře času na Twitter.
Honza
"Člověk má tři cesty, jak moudře jednat. Nejprve přemýšlením, to je ta nejušlechtilejší cesta. Druhá cesta vede napodobováním, ta je cestou nejlehčí, a třetí cesta, zkušenosti, je tou nejtvrdší."