Custom Dialog with jQuery?

   <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">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
      <input type="submit" value="Submit" />
   </form>
</body>
Fri, 06/29/2012 - 21:31
scriptmonkey
Joined: 29/06/2012
Posts: 2
Re: Custom Dialog with jQuery?

nevermind, I just opted to use the non-jquery way to define it and it worked fine.