From 1275e68efa680e55fd29a377c9c58c59bb7f235e Mon Sep 17 00:00:00 2001 From: chai Date: Tue, 10 Jul 2018 22:01:22 +0800 Subject: =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../samples/old/dialog/assets/my_dialog.js | 48 ++++++ .../html/ckeditor/samples/old/dialog/dialog.html | 190 +++++++++++++++++++++ 2 files changed, 238 insertions(+) create mode 100644 cgi-bin/html/ckeditor/samples/old/dialog/assets/my_dialog.js create mode 100644 cgi-bin/html/ckeditor/samples/old/dialog/dialog.html (limited to 'cgi-bin/html/ckeditor/samples/old/dialog') diff --git a/cgi-bin/html/ckeditor/samples/old/dialog/assets/my_dialog.js b/cgi-bin/html/ckeditor/samples/old/dialog/assets/my_dialog.js new file mode 100644 index 0000000..33a6ee1 --- /dev/null +++ b/cgi-bin/html/ckeditor/samples/old/dialog/assets/my_dialog.js @@ -0,0 +1,48 @@ +/** + * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + +CKEDITOR.dialog.add( 'myDialog', function() { + return { + title: 'My Dialog', + minWidth: 400, + minHeight: 200, + contents: [ + { + id: 'tab1', + label: 'First Tab', + title: 'First Tab', + elements: [ + { + id: 'input1', + type: 'text', + label: 'Text Field' + }, + { + id: 'select1', + type: 'select', + label: 'Select Field', + items: [ + [ 'option1', 'value1' ], + [ 'option2', 'value2' ] + ] + } + ] + }, + { + id: 'tab2', + label: 'Second Tab', + title: 'Second Tab', + elements: [ + { + id: 'button1', + type: 'button', + label: 'Button Field' + } + ] + } + ] + }; +} ); + diff --git a/cgi-bin/html/ckeditor/samples/old/dialog/dialog.html b/cgi-bin/html/ckeditor/samples/old/dialog/dialog.html new file mode 100644 index 0000000..ec38bcf --- /dev/null +++ b/cgi-bin/html/ckeditor/samples/old/dialog/dialog.html @@ -0,0 +1,190 @@ + + + + + + Using API to Customize Dialog Windows — CKEditor Sample + + + + + + + + + +

+ CKEditor Samples » Using CKEditor Dialog API +

+
+ This sample is not maintained anymore. Check out the brand new samples in CKEditor SDK. +
+
+

+ This sample shows how to use the + CKEditor Dialog API + to customize CKEditor dialog windows without changing the original editor code. + The following customizations are being done in the example below: +

+

+ For details on how to create this setup check the source code of this sample page. +

+
+

A custom dialog is added to the editors using the pluginsLoaded event, from an external dialog definition file:

+
    +
  1. Creating a custom dialog window – "My Dialog" dialog window opened with the "My Dialog" toolbar button.
    2. +
  2. Creating a custom button – Add button to open the dialog with "My Dialog" toolbar button.
    3. +
+ + +

The below editor modify the dialog definition of the above added dialog using the dialogDefinition event:

+
    +
  1. Adding dialog tab – Add new tab "My Tab" to dialog window.
    2. +
  2. Removing a dialog window tab – Remove "Second Tab" page from the dialog window.
    3. +
  3. Adding dialog window fields – Add "My Custom Field" to the dialog window.
    4. +
  4. Removing dialog window field – Remove "Select Field" selection field from the dialog window.
    5. +
  5. Setting default values for dialog window fields – Set default value of "Text Field" text field.
    6. +
  6. Setup initial focus for dialog window – Put initial focus on "My Custom Field" text field.
    7. +
+ + + + + -- cgit v1.1-26-g67d0