Feel that I should have already tracked this. I need to create a custom plugin for CKEditor (I am using 4.3.1). To start, I used the manual found here ( http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1 ). I downloaded the code and put it in the ckeditor \ plugins folder. So now I have ckeditor \ plugins \ abbr. I'm not sure what I'm doing, but the button does not appear on the toolbar. The code is below. My questions are: where should I define the optional "abbr" plugin? I do this on my _Edit.cshtml page, where do I define stylesheetparser? Or put it in config.js? Given the setting below, should the button next to the source button not appear? Should I include it in config.js or will the plugin code take care of this?
I played a little, and it appears if I use the full toolbar, but not when I configure it.
config.js
CKEDITOR.editorConfig = function (config) { config.toolbar = 'MyToolbar'; config.forcePasteAsPlainText = true; //config.extraPlugins = 'abbr'; config.ignoreEmptyParagraph = 'true' config.toolbar_MyToolbar = [ { name: 'document', items: ['Preview', 'Print'] }, { name: 'clipboard', items: ['Cut', 'Copy', 'PasteText', '-', 'Undo', 'Redo'] }, { name: 'editing', items: ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt'] }, { name: 'basicstyles', items : [ 'Bold','Italic','Subscript','Superscript','-','RemoveFormat' ] }, '/', { name: 'insert', items: ['Table', 'SpecialChar'] }, { name: 'styles', items : [ 'Styles'] } , { name: 'source', items: ['Source', '-', 'abbr'] } ]; };
_Edit.cshtml
@Html.TextAreaFor(e => e.Narrative, 10, 10, null) <script type="text/javascript"> CKEDITOR.replace('Narrative', { extraPlugins: 'stylesheetparser,abbr', // Stylesheet for the contents. contentsCss: '@Href("~/content/" +@Model.CssFile )', stylesheetParser_skipSelectors: '', disableNativeSpellChecker: false, // Do not load the default Styles configuration. stylesSet: [], height: '600px', width: '100%' }); </script>
plugin.js
CKEDITOR.plugins.add( 'abbr', { // Register the icons. icons: 'abbr', // The plugin initialization logic goes inside this method. init: function( editor ) { // Define an editor command that opens our dialog. editor.addCommand( 'abbr', new CKEDITOR.dialogCommand( 'abbrDialog' ) ); // Create a toolbar button that executes the above command. editor.ui.addButton( 'Abbr', { // The text part of the button (if available) and tooptip. label: 'Insert Abbreviation', // The command to execute on click. command: 'abbr', // The button placement in the toolbar (toolbar group name). toolbar: 'source' }); // Register our dialog file. this.path is the plugin folder path. CKEDITOR.dialog.add( 'abbrDialog', this.path + 'dialogs/abbr.js' ); } });