I might be making a dumb "noob" mistake, but I can't find a code reference for the jQuery adaptor to help me with what I'm trying to do. I want to use jQuery to call/create the editor, but add a custom dialog like is shown in the sample "api_dialog". I've combined the two files, more or less, and I feel like it should work but I'm hitting roadblocks with the addCommand method. Below is my code:
<script type="text/javascript"> CKEDITOR.on( 'dialogDefinition', function( ev ) { var dialogName = ev.data.name; var dialogDefinition = ev.data.definition; if ( dialogName == 'link' ) { var infoTab = dialogDefinition.getContents( 'info' ); infoTab.add({ type : 'text', label : 'My Custom Field', id : 'customField', 'default' : 'Sample!', validate : function() { if ( /\d/.test( this.getValue() ) ) return 'My Custom Field must not contain digits'; } }); infoTab.remove( 'linkType' ); infoTab.remove( 'browse' ); var urlField = infoTab.get( 'url' ); urlField['default'] = 'www.example.com'; dialogDefinition.removeContents( 'target' ); dialogDefinition.addContents({ id : 'customTab', label : 'My Tab', accessKey : 'M', elements : [ { id : 'myField1', type : 'text', label : 'My Text Field' }, { id : 'myField2', type : 'text', label : 'Another Text Field' } ] }); dialogDefinition.onFocus = function() { var urlField = this.getContentElement( 'info', 'url' ); urlField.select(); }; } }); $(function() { var config = { toolbar: [ ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', '-', 'MyButton'], ['UIColor'] ] }; var editor = $('.jquery_ckeditor').ckeditor(config); editor.on( 'pluginsLoaded', function( ev ) { if ( !CKEDITOR.dialog.exists( 'myDialog' ) ) { var href = document.location.href.split( '/' ); href.pop(); href.push( 'api_dialog', 'my_dialog.js' ); href = href.join( '/' ); CKEDITOR.dialog.add( 'myDialog', href ); } }); editor.addCommand( 'myDialogCmd', new CKEDITOR.dialogCommand( 'myDialog' ) ); editor.ui.addButton( 'MyButton', { label : 'My Dialog', command : 'myDialogCmd' } ); }); </script> </head> <body> <form action="sample_posteddata.php" method="post"> <textarea class="jquery_ckeditor" cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea> <input type="submit" value="Submit" /> </form> </body>
Re: Custom Dialog with jQuery?