├── LICENSE.md ├── README.md ├── tutorial-abbr-1 └── abbr │ ├── LICENSE.md │ ├── dialogs │ └── abbr.js │ ├── icons │ └── abbr.png │ ├── plugin.js │ └── samples │ └── abbr.html ├── tutorial-abbr-2 └── abbr │ ├── LICENSE.md │ ├── dialogs │ └── abbr.js │ ├── icons │ └── abbr.png │ ├── plugin.js │ └── samples │ └── abbr.html ├── tutorial-abbr-acf └── abbr │ ├── LICENSE.md │ ├── dialogs │ └── abbr.js │ ├── icons │ └── abbr.png │ ├── plugin.js │ └── samples │ └── abbr.html ├── tutorial-simplebox-1 └── simplebox │ ├── LICENSE.md │ ├── icons │ └── simplebox.png │ ├── plugin.js │ └── samples │ ├── contents.css │ └── simplebox.html ├── tutorial-simplebox-2 └── simplebox │ ├── LICENSE.md │ ├── dialogs │ └── simplebox.js │ ├── icons │ └── simplebox.png │ ├── plugin.js │ └── samples │ ├── contents.css │ └── simplebox.html └── tutorial-timestamp └── timestamp ├── LICENSE.md ├── icons └── timestamp.png ├── plugin.js └── samples └── timestamp.html /LICENSE.md: -------------------------------------------------------------------------------- 1 | Software License Agreement 2 | ========================== 3 | 4 | Copyright (c) 2014, CKSource - Frederico Knabben. All rights reserved. 5 | 6 | All sample plugins are licensed under the terms of the MIT License (see Appendix A): 7 | 8 | http://en.wikipedia.org/wiki/MIT_License 9 | 10 | Trademarks 11 | ---------- 12 | 13 | CKEditor is a trademark of CKSource - Frederico Knabben. All other brand 14 | and product names are trademarks, registered trademarks or service 15 | marks of their respective holders. 16 | 17 | --- 18 | 19 | Appendix A: The MIT License 20 | --------------------------- 21 | 22 | The MIT License (MIT) 23 | 24 | Copyright (c) 2014, CKSource - Frederico Knabben 25 | 26 | Permission is hereby granted, free of charge, to any person obtaining a copy 27 | of this software and associated documentation files (the "Software"), to deal 28 | in the Software without restriction, including without limitation the rights 29 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 30 | copies of the Software, and to permit persons to whom the Software is 31 | furnished to do so, subject to the following conditions: 32 | 33 | The above copyright notice and this permission notice shall be included in 34 | all copies or substantial portions of the Software. 35 | 36 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 37 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 38 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 39 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 40 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 41 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 42 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Code samples for CKEditor documentation 2 | ===================== 3 | 4 | This repository contains ready-to-use code samples created for the [CKEditor documentation](http://docs.ckeditor.com). 5 | 6 | In order to see a sample in action, copy its source to the CKEditor `plugins` directory. 7 | 8 | 1. Download a CKEditor package. Note that for development purposes it is recommended to download the source version. You can do this by downloading [your own CKEditor build](http://ckeditor.com/builder) (note the sample's requirements) and checking the "Source (Big N’Slow)" option at the bottom. You can also clone the [CKEditor development repository](https://github.com/ckeditor/ckeditor-dev) and proceed from there. 9 | 10 | 2. Copy the plugin directory which you can find in every sample to the `plugins` directory in the installed CKEditor package. 11 | 12 | For example: 13 | 14 | # Clone the CKEditor development repository and this repository with samples. 15 | git clone https://github.com/ckeditor/ckeditor-dev.git 16 | git clone https://github.com/ckeditor/ckeditor-docs-samples.git 17 | 18 | # Checkout the latest stable branch (equals to latest release available on http://ckeditor.com/download). 19 | cd ckeditor-dev 20 | git co stable 21 | cd .. 22 | 23 | # Enter one of samples directory. 24 | cd ckeditor-docs-samples/tutorial-simplebox-1/ 25 | 26 | # Copy plugin directory to CKEditor directory. 27 | cp -R simplebox/ ../../ckeditor-dev/plugins/ 28 | 29 | Now open the plugin sample in your browser. The URL will look like: 30 | 31 | http:////plugins/simplebox/samples/simplebox.html 32 | 33 | For example: 34 | http://localhost/ckeditor-dev/plugins/simplebox/samples/simplebox.html 35 | 36 | License 37 | ------- 38 | For license details see: [LICENSE.md](https://github.com/ckeditor/ckeditor-docs-samples/blob/master/LICENSE.md). 39 | -------------------------------------------------------------------------------- /tutorial-abbr-1/abbr/LICENSE.md: -------------------------------------------------------------------------------- 1 | Software License Agreement 2 | ========================== 3 | 4 | Copyright (c) 2014, CKSource - Frederico Knabben. All rights reserved. 5 | 6 | All sample plugins are licensed under the terms of the MIT License (see Appendix A): 7 | 8 | http://en.wikipedia.org/wiki/MIT_License 9 | 10 | Trademarks 11 | ---------- 12 | 13 | CKEditor is a trademark of CKSource - Frederico Knabben. All other brand 14 | and product names are trademarks, registered trademarks or service 15 | marks of their respective holders. 16 | 17 | --- 18 | 19 | Appendix A: The MIT License 20 | --------------------------- 21 | 22 | The MIT License (MIT) 23 | 24 | Copyright (c) 2014, CKSource - Frederico Knabben 25 | 26 | Permission is hereby granted, free of charge, to any person obtaining a copy 27 | of this software and associated documentation files (the "Software"), to deal 28 | in the Software without restriction, including without limitation the rights 29 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 30 | copies of the Software, and to permit persons to whom the Software is 31 | furnished to do so, subject to the following conditions: 32 | 33 | The above copyright notice and this permission notice shall be included in 34 | all copies or substantial portions of the Software. 35 | 36 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 37 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 38 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 39 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 40 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 41 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 42 | THE SOFTWARE. -------------------------------------------------------------------------------- /tutorial-abbr-1/abbr/dialogs/abbr.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2014, CKSource - Frederico Knabben. All rights reserved. 3 | * Licensed under the terms of the MIT License (see LICENSE.md). 4 | * 5 | * The abbr plugin dialog window definition. 6 | * 7 | * Created out of the CKEditor Plugin SDK: 8 | * http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1 9 | */ 10 | 11 | // Our dialog definition. 12 | CKEDITOR.dialog.add( 'abbrDialog', function( editor ) { 13 | return { 14 | 15 | // Basic properties of the dialog window: title, minimum size. 16 | title: 'Abbreviation Properties', 17 | minWidth: 400, 18 | minHeight: 200, 19 | 20 | // Dialog window content definition. 21 | contents: [ 22 | { 23 | // Definition of the Basic Settings dialog tab (page). 24 | id: 'tab-basic', 25 | label: 'Basic Settings', 26 | 27 | // The tab content. 28 | elements: [ 29 | { 30 | // Text input field for the abbreviation text. 31 | type: 'text', 32 | id: 'abbr', 33 | label: 'Abbreviation', 34 | 35 | // Validation checking whether the field is not empty. 36 | validate: CKEDITOR.dialog.validate.notEmpty( "Abbreviation field cannot be empty." ) 37 | }, 38 | { 39 | // Text input field for the abbreviation title (explanation). 40 | type: 'text', 41 | id: 'title', 42 | label: 'Explanation', 43 | validate: CKEDITOR.dialog.validate.notEmpty( "Explanation field cannot be empty." ) 44 | } 45 | ] 46 | }, 47 | 48 | // Definition of the Advanced Settings dialog tab (page). 49 | { 50 | id: 'tab-adv', 51 | label: 'Advanced Settings', 52 | elements: [ 53 | { 54 | // Another text field for the abbr element id. 55 | type: 'text', 56 | id: 'id', 57 | label: 'Id' 58 | } 59 | ] 60 | } 61 | ], 62 | 63 | // This method is invoked once a user clicks the OK button, confirming the dialog. 64 | onOk: function() { 65 | 66 | // The context of this function is the dialog object itself. 67 | // http://docs.ckeditor.com/#!/api/CKEDITOR.dialog 68 | var dialog = this; 69 | 70 | // Create a new element. 71 | var abbr = editor.document.createElement( 'abbr' ); 72 | 73 | // Set element attribute and text by getting the defined field values. 74 | abbr.setAttribute( 'title', dialog.getValueOf( 'tab-basic', 'title' ) ); 75 | abbr.setText( dialog.getValueOf( 'tab-basic', 'abbr' ) ); 76 | 77 | // Now get yet another field value from the Advanced Settings tab. 78 | var id = dialog.getValueOf( 'tab-adv', 'id' ); 79 | if ( id ) 80 | abbr.setAttribute( 'id', id ); 81 | 82 | // Finally, insert the element into the editor at the caret position. 83 | editor.insertElement( abbr ); 84 | } 85 | }; 86 | }); 87 | -------------------------------------------------------------------------------- /tutorial-abbr-1/abbr/icons/abbr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abbasikov/ckeditor-docs-samples/7b9d99a71bb6204cf43cb9c73b071aa44e793a95/tutorial-abbr-1/abbr/icons/abbr.png -------------------------------------------------------------------------------- /tutorial-abbr-1/abbr/plugin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2014, CKSource - Frederico Knabben. All rights reserved. 3 | * Licensed under the terms of the MIT License (see LICENSE.md). 4 | * 5 | * Basic sample plugin inserting abbreviation elements into the CKEditor editing area. 6 | * 7 | * Created out of the CKEditor Plugin SDK: 8 | * http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1 9 | */ 10 | 11 | // Register the plugin within the editor. 12 | CKEDITOR.plugins.add( 'abbr', { 13 | 14 | // Register the icons. 15 | icons: 'abbr', 16 | 17 | // The plugin initialization logic goes inside this method. 18 | init: function( editor ) { 19 | 20 | // Define an editor command that opens our dialog window. 21 | editor.addCommand( 'abbr', new CKEDITOR.dialogCommand( 'abbrDialog' ) ); 22 | 23 | // Create a toolbar button that executes the above command. 24 | editor.ui.addButton( 'Abbr', { 25 | 26 | // The text part of the button (if available) and the tooltip. 27 | label: 'Insert Abbreviation', 28 | 29 | // The command to execute on click. 30 | command: 'abbr', 31 | 32 | // The button placement in the toolbar (toolbar group name). 33 | toolbar: 'insert' 34 | }); 35 | 36 | // Register our dialog file -- this.path is the plugin folder path. 37 | CKEDITOR.dialog.add( 'abbrDialog', this.path + 'dialogs/abbr.js' ); 38 | } 39 | }); 40 | -------------------------------------------------------------------------------- /tutorial-abbr-1/abbr/samples/abbr.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | Tutorial — Abbreviation Plugin, Part 1 9 | 10 | 11 | 12 | 13 | 14 |

15 | CKEditor Tutorial — Abbreviation Plugin, Part 1 16 |

17 | 18 |

19 | This sample demonstrates the Abbreviation plugin that was created in the 20 | first installment of 21 | of the CKEditor plugin tutorial series. 22 |

23 | 24 |

25 | The custom Abbreviation plugin created in the tutorial lets the users insert abbreviations into their documents. 26 | The abbreviations use the <abbr> HTML element and are added through a dialog window that is 27 | opened after clicking the dedicated Insert Abbreviation () toolbar button available in the editor instance below. 28 |

29 | 30 |

31 | Note: This version of the Abbreviation plugin is able to add a new <abbr> element to the document, 32 | but it does not make it possible to edit an already existing element. For this feature along with the context menu support check 33 | the second part of the tutorial. 34 |

35 | 36 | 39 | 40 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /tutorial-abbr-2/abbr/LICENSE.md: -------------------------------------------------------------------------------- 1 | Software License Agreement 2 | ========================== 3 | 4 | Copyright (c) 2014, CKSource - Frederico Knabben. All rights reserved. 5 | 6 | All sample plugins are licensed under the terms of the MIT License (see Appendix A): 7 | 8 | http://en.wikipedia.org/wiki/MIT_License 9 | 10 | Trademarks 11 | ---------- 12 | 13 | CKEditor is a trademark of CKSource - Frederico Knabben. All other brand 14 | and product names are trademarks, registered trademarks or service 15 | marks of their respective holders. 16 | 17 | --- 18 | 19 | Appendix A: The MIT License 20 | --------------------------- 21 | 22 | The MIT License (MIT) 23 | 24 | Copyright (c) 2014, CKSource - Frederico Knabben 25 | 26 | Permission is hereby granted, free of charge, to any person obtaining a copy 27 | of this software and associated documentation files (the "Software"), to deal 28 | in the Software without restriction, including without limitation the rights 29 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 30 | copies of the Software, and to permit persons to whom the Software is 31 | furnished to do so, subject to the following conditions: 32 | 33 | The above copyright notice and this permission notice shall be included in 34 | all copies or substantial portions of the Software. 35 | 36 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 37 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 38 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 39 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 40 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 41 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 42 | THE SOFTWARE. -------------------------------------------------------------------------------- /tutorial-abbr-2/abbr/dialogs/abbr.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2014, CKSource - Frederico Knabben. All rights reserved. 3 | * Licensed under the terms of the MIT License (see LICENSE.md). 4 | * 5 | * The abbr plugin dialog window definition. 6 | * 7 | * Created out of the CKEditor Plugin SDK: 8 | * http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1 9 | */ 10 | 11 | // Our dialog definition. 12 | CKEDITOR.dialog.add( 'abbrDialog', function( editor ) { 13 | return { 14 | 15 | // Basic properties of the dialog window: title, minimum size. 16 | title: 'Abbreviation Properties', 17 | minWidth: 400, 18 | minHeight: 200, 19 | 20 | // Dialog window content definition. 21 | contents: [ 22 | { 23 | // Definition of the Basic Settings dialog tab (page). 24 | id: 'tab-basic', 25 | label: 'Basic Settings', 26 | 27 | // The tab content. 28 | elements: [ 29 | { 30 | // Text input field for the abbreviation text. 31 | type: 'text', 32 | id: 'abbr', 33 | label: 'Abbreviation', 34 | 35 | // Validation checking whether the field is not empty. 36 | validate: CKEDITOR.dialog.validate.notEmpty( "Abbreviation field cannot be empty." ), 37 | 38 | // Called by the main setupContent method call on dialog initialization. 39 | setup: function( element ) { 40 | this.setValue( element.getText() ); 41 | }, 42 | 43 | // Called by the main commitContent method call on dialog confirmation. 44 | commit: function( element ) { 45 | element.setText( this.getValue() ); 46 | } 47 | }, 48 | { 49 | // Text input field for the abbreviation title (explanation). 50 | type: 'text', 51 | id: 'title', 52 | label: 'Explanation', 53 | validate: CKEDITOR.dialog.validate.notEmpty( "Explanation field cannot be empty." ), 54 | 55 | // Called by the main setupContent method call on dialog initialization. 56 | setup: function( element ) { 57 | this.setValue( element.getAttribute( "title" ) ); 58 | }, 59 | 60 | // Called by the main commitContent method call on dialog confirmation. 61 | commit: function( element ) { 62 | element.setAttribute( "title", this.getValue() ); 63 | } 64 | } 65 | ] 66 | }, 67 | 68 | // Definition of the Advanced Settings dialog tab (page). 69 | { 70 | id: 'tab-adv', 71 | label: 'Advanced Settings', 72 | elements: [ 73 | { 74 | // Another text field for the abbr element id. 75 | type: 'text', 76 | id: 'id', 77 | label: 'Id', 78 | 79 | // Called by the main setupContent method call on dialog initialization. 80 | setup: function( element ) { 81 | this.setValue( element.getAttribute( "id" ) ); 82 | }, 83 | 84 | // Called by the main commitContent method call on dialog confirmation. 85 | commit: function ( element ) { 86 | var id = this.getValue(); 87 | if ( id ) 88 | element.setAttribute( 'id', id ); 89 | else if ( !this.insertMode ) 90 | element.removeAttribute( 'id' ); 91 | } 92 | } 93 | ] 94 | } 95 | ], 96 | 97 | // Invoked when the dialog is loaded. 98 | onShow: function() { 99 | 100 | // Get the selection from the editor. 101 | var selection = editor.getSelection(); 102 | 103 | // Get the element at the start of the selection. 104 | var element = selection.getStartElement(); 105 | 106 | // Get the element closest to the selection, if it exists. 107 | if ( element ) 108 | element = element.getAscendant( 'abbr', true ); 109 | 110 | // Create a new element if it does not exist. 111 | if ( !element || element.getName() != 'abbr' ) { 112 | element = editor.document.createElement( 'abbr' ); 113 | 114 | // Flag the insertion mode for later use. 115 | this.insertMode = true; 116 | } 117 | else 118 | this.insertMode = false; 119 | 120 | // Store the reference to the element in an internal property, for later use. 121 | this.element = element; 122 | 123 | // Invoke the setup methods of all dialog window elements, so they can load the element attributes. 124 | if ( !this.insertMode ) 125 | this.setupContent( this.element ); 126 | }, 127 | 128 | // This method is invoked once a user clicks the OK button, confirming the dialog. 129 | onOk: function() { 130 | 131 | // The context of this function is the dialog object itself. 132 | // http://docs.ckeditor.com/#!/api/CKEDITOR.dialog 133 | var dialog = this; 134 | 135 | // Create a new element. 136 | var abbr = this.element; 137 | 138 | // Invoke the commit methods of all dialog window elements, so the element gets modified. 139 | this.commitContent( abbr ); 140 | 141 | // Finally, if in insert mode, insert the element into the editor at the caret position. 142 | if ( this.insertMode ) 143 | editor.insertElement( abbr ); 144 | } 145 | }; 146 | }); 147 | -------------------------------------------------------------------------------- /tutorial-abbr-2/abbr/icons/abbr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abbasikov/ckeditor-docs-samples/7b9d99a71bb6204cf43cb9c73b071aa44e793a95/tutorial-abbr-2/abbr/icons/abbr.png -------------------------------------------------------------------------------- /tutorial-abbr-2/abbr/plugin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2014, CKSource - Frederico Knabben. All rights reserved. 3 | * Licensed under the terms of the MIT License (see LICENSE.md). 4 | * 5 | * Basic sample plugin inserting abbreviation elements into the CKEditor editing area. 6 | * 7 | * Created out of the CKEditor Plugin SDK: 8 | * http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1 9 | */ 10 | 11 | // Register the plugin within the editor. 12 | CKEDITOR.plugins.add( 'abbr', { 13 | 14 | // Register the icons. 15 | icons: 'abbr', 16 | 17 | // The plugin initialization logic goes inside this method. 18 | init: function( editor ) { 19 | 20 | // Define an editor command that opens our dialog window. 21 | editor.addCommand( 'abbr', new CKEDITOR.dialogCommand( 'abbrDialog' ) ); 22 | 23 | // Create a toolbar button that executes the above command. 24 | editor.ui.addButton( 'Abbr', { 25 | 26 | // The text part of the button (if available) and the tooltip. 27 | label: 'Insert Abbreviation', 28 | 29 | // The command to execute on click. 30 | command: 'abbr', 31 | 32 | // The button placement in the toolbar (toolbar group name). 33 | toolbar: 'insert' 34 | }); 35 | 36 | if ( editor.contextMenu ) { 37 | 38 | // Add a context menu group with the Edit Abbreviation item. 39 | editor.addMenuGroup( 'abbrGroup' ); 40 | editor.addMenuItem( 'abbrItem', { 41 | label: 'Edit Abbreviation', 42 | icon: this.path + 'icons/abbr.png', 43 | command: 'abbr', 44 | group: 'abbrGroup' 45 | }); 46 | 47 | editor.contextMenu.addListener( function( element ) { 48 | if ( element.getAscendant( 'abbr', true ) ) { 49 | return { abbrItem: CKEDITOR.TRISTATE_OFF }; 50 | } 51 | }); 52 | } 53 | 54 | // Register our dialog file -- this.path is the plugin folder path. 55 | CKEDITOR.dialog.add( 'abbrDialog', this.path + 'dialogs/abbr.js' ); 56 | } 57 | }); 58 | -------------------------------------------------------------------------------- /tutorial-abbr-2/abbr/samples/abbr.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | Tutorial — Abbreviation Plugin, Part 2 9 | 10 | 11 | 12 | 13 | 14 |

15 | CKEditor Tutorial — Abbreviation Plugin, Part 2 16 |

17 | 18 |

19 | This sample demonstrates the Abbreviation plugin that was created in the 20 | second installment of 21 | of the CKEditor plugin tutorial series. 22 |

23 | 24 |

25 | The custom Abbreviation plugin created in the tutorial lets the users insert abbreviations into their documents. 26 | The abbreviations use the <abbr> HTML element and are added and edited through a dialog window 27 | that is opened after clicking the dedicated Insert Abbreviation () 28 | toolbar button available in the editor instance below. 29 |

30 | 31 |

32 | Note: This version of the Abbreviation plugin was built upon the source code created in the 33 | first part of the plugin tutorial and was 34 | extended with context menu support as well as the possibility to edit a previously inserted element. 35 |

36 | 37 | 40 | 41 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /tutorial-abbr-acf/abbr/LICENSE.md: -------------------------------------------------------------------------------- 1 | Software License Agreement 2 | ========================== 3 | 4 | Copyright (c) 2014, CKSource - Frederico Knabben. All rights reserved. 5 | 6 | All sample plugins are licensed under the terms of the MIT License (see Appendix A): 7 | 8 | http://en.wikipedia.org/wiki/MIT_License 9 | 10 | Trademarks 11 | ---------- 12 | 13 | CKEditor is a trademark of CKSource - Frederico Knabben. All other brand 14 | and product names are trademarks, registered trademarks or service 15 | marks of their respective holders. 16 | 17 | --- 18 | 19 | Appendix A: The MIT License 20 | --------------------------- 21 | 22 | The MIT License (MIT) 23 | 24 | Copyright (c) 2014, CKSource - Frederico Knabben 25 | 26 | Permission is hereby granted, free of charge, to any person obtaining a copy 27 | of this software and associated documentation files (the "Software"), to deal 28 | in the Software without restriction, including without limitation the rights 29 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 30 | copies of the Software, and to permit persons to whom the Software is 31 | furnished to do so, subject to the following conditions: 32 | 33 | The above copyright notice and this permission notice shall be included in 34 | all copies or substantial portions of the Software. 35 | 36 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 37 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 38 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 39 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 40 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 41 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 42 | THE SOFTWARE. -------------------------------------------------------------------------------- /tutorial-abbr-acf/abbr/dialogs/abbr.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2014, CKSource - Frederico Knabben. All rights reserved. 3 | * Licensed under the terms of the MIT License (see LICENSE.md). 4 | * 5 | * The abbr plugin dialog window definition. 6 | * 7 | * Created out of the CKEditor Plugin SDK: 8 | * http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1 9 | */ 10 | 11 | // Our dialog definition. 12 | CKEDITOR.dialog.add( 'abbrDialog', function( editor ) { 13 | return { 14 | 15 | // Basic properties of the dialog window: title, minimum size. 16 | title: 'Abbreviation Properties', 17 | minWidth: 400, 18 | minHeight: 200, 19 | 20 | // Dialog window content definition. 21 | contents: [ 22 | { 23 | // Definition of the Basic Settings dialog tab (page). 24 | id: 'tab-basic', 25 | label: 'Basic Settings', 26 | 27 | // The tab content. 28 | elements: [ 29 | { 30 | // Text input field for the abbreviation text. 31 | type: 'text', 32 | id: 'abbr', 33 | label: 'Abbreviation', 34 | 35 | // Validation checking whether the field is not empty. 36 | validate: CKEDITOR.dialog.validate.notEmpty( "Abbreviation field cannot be empty." ), 37 | 38 | // Called by the main setupContent method call on dialog initialization. 39 | setup: function( element ) { 40 | this.setValue( element.getText() ); 41 | }, 42 | 43 | // Called by the main commitContent method call on dialog confirmation. 44 | commit: function( element ) { 45 | element.setText( this.getValue() ); 46 | } 47 | }, 48 | { 49 | // Text input field for the abbreviation title (explanation). 50 | type: 'text', 51 | id: 'title', 52 | label: 'Explanation', 53 | 54 | // Require the title attribute to be enabled. 55 | requiredContent: 'abbr[title]', 56 | validate: CKEDITOR.dialog.validate.notEmpty( "Explanation field cannot be empty." ), 57 | 58 | // Called by the main setupContent method call on dialog initialization. 59 | setup: function( element ) { 60 | this.setValue( element.getAttribute( "title" ) ); 61 | }, 62 | 63 | // Called by the main commitContent method call on dialog confirmation. 64 | commit: function( element ) { 65 | element.setAttribute( "title", this.getValue() ); 66 | } 67 | } 68 | ] 69 | }, 70 | 71 | // Definition of the Advanced Settings dialog tab (page). 72 | { 73 | id: 'tab-adv', 74 | label: 'Advanced Settings', 75 | 76 | // Require the id attribute to be enabled. 77 | requiredContent: 'abbr[id]', 78 | elements: [ 79 | { 80 | // Another text field for the abbr element id. 81 | type: 'text', 82 | id: 'id', 83 | label: 'Id', 84 | 85 | // Called by the main setupContent method call on dialog initialization. 86 | setup: function( element ) { 87 | this.setValue( element.getAttribute( "id" ) ); 88 | }, 89 | 90 | // Called by the main commitContent method call on dialog confirmation. 91 | commit: function ( element ) { 92 | var id = this.getValue(); 93 | if ( id ) 94 | element.setAttribute( 'id', id ); 95 | else if ( !this.insertMode ) 96 | element.removeAttribute( 'id' ); 97 | } 98 | } 99 | ] 100 | } 101 | ], 102 | 103 | // Invoked when the dialog is loaded. 104 | onShow: function() { 105 | 106 | // Get the selection from the editor. 107 | var selection = editor.getSelection(); 108 | 109 | // Get the element at the start of the selection. 110 | var element = selection.getStartElement(); 111 | 112 | // Get the element closest to the selection, if it exists. 113 | if ( element ) 114 | element = element.getAscendant( 'abbr', true ); 115 | 116 | // Create a new element if it does not exist. 117 | if ( !element || element.getName() != 'abbr' ) { 118 | element = editor.document.createElement( 'abbr' ); 119 | 120 | // Flag the insertion mode for later use. 121 | this.insertMode = true; 122 | } 123 | else 124 | this.insertMode = false; 125 | 126 | // Store the reference to the element in an internal property, for later use. 127 | this.element = element; 128 | 129 | // Invoke the setup methods of all dialog window elements, so they can load the element attributes. 130 | if ( !this.insertMode ) 131 | this.setupContent( this.element ); 132 | }, 133 | 134 | // This method is invoked once a user clicks the OK button, confirming the dialog. 135 | onOk: function() { 136 | 137 | // The context of this function is the dialog object itself. 138 | // http://docs.ckeditor.com/#!/api/CKEDITOR.dialog 139 | var dialog = this; 140 | 141 | // Create a new element. 142 | var abbr = this.element; 143 | 144 | // Invoke the commit methods of all dialog window elements, so the element gets modified. 145 | this.commitContent( abbr ); 146 | 147 | // Finally, if in insert mode, insert the element into the editor at the caret position. 148 | if ( this.insertMode ) 149 | editor.insertElement( abbr ); 150 | } 151 | }; 152 | }); 153 | -------------------------------------------------------------------------------- /tutorial-abbr-acf/abbr/icons/abbr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abbasikov/ckeditor-docs-samples/7b9d99a71bb6204cf43cb9c73b071aa44e793a95/tutorial-abbr-acf/abbr/icons/abbr.png -------------------------------------------------------------------------------- /tutorial-abbr-acf/abbr/plugin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2014, CKSource - Frederico Knabben. All rights reserved. 3 | * Licensed under the terms of the MIT License (see LICENSE.md). 4 | * 5 | * Basic sample plugin inserting abbreviation elements into the CKEditor editing area. 6 | * 7 | * Created out of the CKEditor Plugin SDK: 8 | * http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1 9 | */ 10 | 11 | // Register the plugin within the editor. 12 | CKEDITOR.plugins.add( 'abbr', { 13 | 14 | // Register the icons. 15 | icons: 'abbr', 16 | 17 | // The plugin initialization logic goes inside this method. 18 | init: function( editor ) { 19 | 20 | // Define an editor command that opens our dialog window. 21 | editor.addCommand( 'abbr', new CKEDITOR.dialogCommand( 'abbrDialog', { 22 | 23 | // Allow the abbr tag with an optional title attribute. 24 | allowedContent: 'abbr[title,id]', 25 | 26 | // Require the abbr tag to be allowed for the feature to work. 27 | requiredContent: 'abbr', 28 | 29 | // Prefer abbr over acronym. Transform acronym elements into abbr elements. 30 | contentForms: [ 31 | 'abbr', 32 | 'acronym' 33 | ] 34 | } ) ); 35 | 36 | // Create a toolbar button that executes the above command. 37 | editor.ui.addButton( 'Abbr', { 38 | 39 | // The text part of the button (if available) and the tooltip. 40 | label: 'Insert Abbreviation', 41 | 42 | // The command to execute on click. 43 | command: 'abbr', 44 | 45 | // The button placement in the toolbar (toolbar group name). 46 | toolbar: 'insert' 47 | }); 48 | 49 | if ( editor.contextMenu ) { 50 | 51 | // Add a context menu group with the Edit Abbreviation item. 52 | editor.addMenuGroup( 'abbrGroup' ); 53 | editor.addMenuItem( 'abbrItem', { 54 | label: 'Edit Abbreviation', 55 | icon: this.path + 'icons/abbr.png', 56 | command: 'abbr', 57 | group: 'abbrGroup' 58 | }); 59 | 60 | editor.contextMenu.addListener( function( element ) { 61 | if ( element.getAscendant( 'abbr', true ) ) { 62 | return { abbrItem: CKEDITOR.TRISTATE_OFF }; 63 | } 64 | }); 65 | } 66 | 67 | // Register our dialog file -- this.path is the plugin folder path. 68 | CKEDITOR.dialog.add( 'abbrDialog', this.path + 'dialogs/abbr.js' ); 69 | } 70 | }); 71 | -------------------------------------------------------------------------------- /tutorial-abbr-acf/abbr/samples/abbr.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | Tutorial — ACF Integration with the Abbreviation Plugin 9 | 10 | 11 | 12 | 13 | 14 |

15 | CKEditor Tutorial — ACF Integration with the Abbreviation Plugin 16 |

17 | 18 |

19 | This sample demonstrates the integration of Advanced Content Filter (ACF) 20 | with a custom Abbreviation plugin, as explained in the 21 | Integrating Plugins with Advanced Content Filter 22 | article. 23 |

24 | 25 |

26 | Advanced Content Filter (ACF) is a CKEditor core feature that filters incoming HTML content by transforming and deleting disallowed elements, attributes, classes and styles. The introduction of content filtering have impacted the plugin development process and slightly changed the data processing model of CKEditor. With ACF plugins can take control over the content available in the editor and adaptively adjust the user interface when allowed content changes. 27 |

28 | 29 |

30 | The custom Abbreviation plugin created in the tutorials lets the users insert abbreviations into their documents. 31 | The abbreviations use the <abbr> HTML element and its attributes, so content filtering rules needed 32 | to be adjusted to allow these elements. 33 |

34 | 35 |

36 | Note: Advanced Content Filter was introduced in CKEditor 4.1. 37 |

38 | 39 | 42 | 43 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /tutorial-simplebox-1/simplebox/LICENSE.md: -------------------------------------------------------------------------------- 1 | Software License Agreement 2 | ========================== 3 | 4 | Copyright (c) 2014, CKSource - Frederico Knabben. All rights reserved. 5 | 6 | All sample plugins are licensed under the terms of the MIT License (see Appendix A): 7 | 8 | http://en.wikipedia.org/wiki/MIT_License 9 | 10 | Trademarks 11 | ---------- 12 | 13 | CKEditor is a trademark of CKSource - Frederico Knabben. All other brand 14 | and product names are trademarks, registered trademarks or service 15 | marks of their respective holders. 16 | 17 | --- 18 | 19 | Appendix A: The MIT License 20 | --------------------------- 21 | 22 | The MIT License (MIT) 23 | 24 | Copyright (c) 2014, CKSource - Frederico Knabben 25 | 26 | Permission is hereby granted, free of charge, to any person obtaining a copy 27 | of this software and associated documentation files (the "Software"), to deal 28 | in the Software without restriction, including without limitation the rights 29 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 30 | copies of the Software, and to permit persons to whom the Software is 31 | furnished to do so, subject to the following conditions: 32 | 33 | The above copyright notice and this permission notice shall be included in 34 | all copies or substantial portions of the Software. 35 | 36 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 37 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 38 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 39 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 40 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 41 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 42 | THE SOFTWARE. -------------------------------------------------------------------------------- /tutorial-simplebox-1/simplebox/icons/simplebox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abbasikov/ckeditor-docs-samples/7b9d99a71bb6204cf43cb9c73b071aa44e793a95/tutorial-simplebox-1/simplebox/icons/simplebox.png -------------------------------------------------------------------------------- /tutorial-simplebox-1/simplebox/plugin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2014, CKSource - Frederico Knabben. All rights reserved. 3 | * Licensed under the terms of the MIT License (see LICENSE.md). 4 | * 5 | * Simple CKEditor Widget (Part 1). 6 | * 7 | * Created out of the CKEditor Widget SDK: 8 | * http://docs.ckeditor.com/#!/guide/widget_sdk_tutorial_1 9 | */ 10 | 11 | // Register the plugin within the editor. 12 | CKEDITOR.plugins.add( 'simplebox', { 13 | // This plugin requires the Widgets System defined in the 'widget' plugin. 14 | requires: 'widget', 15 | 16 | // Register the icon used for the toolbar button. It must be the same 17 | // as the name of the widget. 18 | icons: 'simplebox', 19 | 20 | // The plugin initialization logic goes inside this method. 21 | init: function( editor ) { 22 | // Register the simplebox widget. 23 | editor.widgets.add( 'simplebox', { 24 | // Allow all HTML elements and classes that this widget requires. 25 | // Read more about the Advanced Content Filter here: 26 | // * http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter 27 | // * http://docs.ckeditor.com/#!/guide/plugin_sdk_integration_with_acf 28 | allowedContent: 'div(!simplebox); div(!simplebox-content); h2(!simplebox-title)', 29 | 30 | // Minimum HTML which is required by this widget to work. 31 | requiredContent: 'div(simplebox)', 32 | 33 | // Define two nested editable areas. 34 | editables: { 35 | title: { 36 | // Define a CSS selector used for finding the element inside the widget element. 37 | selector: '.simplebox-title', 38 | // Define content allowed in this nested editable. Its content will be 39 | // filtered accordingly and the toolbar will be adjusted when this editable 40 | // is focused. 41 | allowedContent: 'br strong em' 42 | }, 43 | content: { 44 | selector: '.simplebox-content', 45 | allowedContent: 'p br ul ol li strong em' 46 | } 47 | }, 48 | 49 | // Define the template of a new Simple Box widget. 50 | // The template will be used when creating new instances of the Simple Box widget. 51 | template: 52 | '
' + 53 | '

Title

' + 54 | '

Content...

' + 55 | '
', 56 | 57 | // Define the label for a widget toolbar button which will be automatically 58 | // created by the Widgets System. This button will insert a new widget instance 59 | // created from the template defined above, or will edit selected widget 60 | // (see second part of this tutorial to learn about editing widgets). 61 | // 62 | // Note: In order to be able to translate your widget you should use the 63 | // editor.lang.simplebox.* property. A string was used directly here to simplify this tutorial. 64 | button: 'Create a simple box', 65 | 66 | // Check the elements that need to be converted to widgets. 67 | // 68 | // Note: The "element" argument is an instance of http://docs.ckeditor.com/#!/api/CKEDITOR.htmlParser.element 69 | // so it is not a real DOM element yet. This is caused by the fact that upcasting is performed 70 | // during data processing which is done on DOM represented by JavaScript objects. 71 | upcast: function( element ) { 72 | // Return "true" (that element needs to converted to a Simple Box widget) 73 | // for all
elements with a "simplebox" class. 74 | return element.name == 'div' && element.hasClass( 'simplebox' ); 75 | } 76 | } ); 77 | } 78 | } ); 79 | -------------------------------------------------------------------------------- /tutorial-simplebox-1/simplebox/samples/contents.css: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2014, CKSource - Frederico Knabben. All rights reserved. 3 | Licensed under the terms of the MIT License (see LICENSE.md). 4 | */ 5 | .simplebox { 6 | padding: 8px; 7 | margin: 10px; 8 | background: #eee; 9 | border-radius: 8px; 10 | border: 1px solid #ddd; 11 | box-shadow: 0 1px 1px #fff inset, 0 -1px 0px #ccc inset; 12 | } 13 | .simplebox-title, .simplebox-content { 14 | box-shadow: 0 1px 1px #ddd inset; 15 | border: 1px solid #cccccc; 16 | border-radius: 5px; 17 | background: #fff; 18 | } 19 | .simplebox-title { 20 | margin: 0 0 8px; 21 | padding: 5px 8px; 22 | } 23 | .simplebox-content { 24 | padding: 0 8px; 25 | } -------------------------------------------------------------------------------- /tutorial-simplebox-1/simplebox/samples/simplebox.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | Tutorial — Simple Box Widget, Part 1 9 | 10 | 11 | 12 | 13 | 14 |

15 | Tutorial — Simple Box Widget, part 1 16 |

17 | 18 | 49 | 50 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /tutorial-simplebox-2/simplebox/LICENSE.md: -------------------------------------------------------------------------------- 1 | Software License Agreement 2 | ========================== 3 | 4 | Copyright (c) 2014, CKSource - Frederico Knabben. All rights reserved. 5 | 6 | All sample plugins are licensed under the terms of the MIT License (see Appendix A): 7 | 8 | http://en.wikipedia.org/wiki/MIT_License 9 | 10 | Trademarks 11 | ---------- 12 | 13 | CKEditor is a trademark of CKSource - Frederico Knabben. All other brand 14 | and product names are trademarks, registered trademarks or service 15 | marks of their respective holders. 16 | 17 | --- 18 | 19 | Appendix A: The MIT License 20 | --------------------------- 21 | 22 | The MIT License (MIT) 23 | 24 | Copyright (c) 2014, CKSource - Frederico Knabben 25 | 26 | Permission is hereby granted, free of charge, to any person obtaining a copy 27 | of this software and associated documentation files (the "Software"), to deal 28 | in the Software without restriction, including without limitation the rights 29 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 30 | copies of the Software, and to permit persons to whom the Software is 31 | furnished to do so, subject to the following conditions: 32 | 33 | The above copyright notice and this permission notice shall be included in 34 | all copies or substantial portions of the Software. 35 | 36 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 37 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 38 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 39 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 40 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 41 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 42 | THE SOFTWARE. -------------------------------------------------------------------------------- /tutorial-simplebox-2/simplebox/dialogs/simplebox.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2014, CKSource - Frederico Knabben. All rights reserved. 3 | * Licensed under the terms of the MIT License (see LICENSE.md). 4 | */ 5 | 6 | // Note: This automatic widget to dialog window binding (the fact that every field is set up from the widget 7 | // and is committed to the widget) is only possible when the dialog is opened by the Widgets System 8 | // (i.e. the widgetDef.dialog property is set). 9 | // When you are opening the dialog window by yourself, you need to take care of this by yourself too. 10 | 11 | CKEDITOR.dialog.add( 'simplebox', function( editor ) { 12 | return { 13 | title: 'Edit Simple Box', 14 | minWidth: 200, 15 | minHeight: 100, 16 | contents: [ 17 | { 18 | id: 'info', 19 | elements: [ 20 | { 21 | id: 'align', 22 | type: 'select', 23 | label: 'Align', 24 | items: [ 25 | [ editor.lang.common.notSet, '' ], 26 | [ editor.lang.common.alignLeft, 'left' ], 27 | [ editor.lang.common.alignRight, 'right' ], 28 | [ editor.lang.common.alignCenter, 'center' ] 29 | ], 30 | // When setting up this field, set its value to the "align" value from widget data. 31 | // Note: Align values used in the widget need to be the same as those defined in the "items" array above. 32 | setup: function( widget ) { 33 | this.setValue( widget.data.align ); 34 | }, 35 | // When committing (saving) this field, set its value to the widget data. 36 | commit: function( widget ) { 37 | widget.setData( 'align', this.getValue() ); 38 | } 39 | }, 40 | { 41 | id: 'width', 42 | type: 'text', 43 | label: 'Width', 44 | width: '50px', 45 | setup: function( widget ) { 46 | this.setValue( widget.data.width ); 47 | }, 48 | commit: function( widget ) { 49 | widget.setData( 'width', this.getValue() ); 50 | } 51 | } 52 | ] 53 | } 54 | ] 55 | }; 56 | } ); -------------------------------------------------------------------------------- /tutorial-simplebox-2/simplebox/icons/simplebox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abbasikov/ckeditor-docs-samples/7b9d99a71bb6204cf43cb9c73b071aa44e793a95/tutorial-simplebox-2/simplebox/icons/simplebox.png -------------------------------------------------------------------------------- /tutorial-simplebox-2/simplebox/plugin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2014, CKSource - Frederico Knabben. All rights reserved. 3 | * Licensed under the terms of the MIT License (see LICENSE.md). 4 | * 5 | * Simple CKEditor Widget (Part 2). 6 | * 7 | * Created out of the CKEditor Widget SDK: 8 | * http://docs.ckeditor.com/#!/guide/widget_sdk_tutorial_2 9 | */ 10 | 11 | // Register the plugin within the editor. 12 | CKEDITOR.plugins.add( 'simplebox', { 13 | // This plugin requires the Widgets System defined in the 'widget' plugin. 14 | requires: 'widget', 15 | 16 | // Register the icon used for the toolbar button. It must be the same 17 | // as the name of the widget. 18 | icons: 'simplebox', 19 | 20 | // The plugin initialization logic goes inside this method. 21 | init: function( editor ) { 22 | // Register the editing dialog. 23 | CKEDITOR.dialog.add( 'simplebox', this.path + 'dialogs/simplebox.js' ); 24 | 25 | // Register the simplebox widget. 26 | editor.widgets.add( 'simplebox', { 27 | // Allow all HTML elements, classes, and styles that this widget requires. 28 | // Read more about the Advanced Content Filter here: 29 | // * http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter 30 | // * http://docs.ckeditor.com/#!/guide/plugin_sdk_integration_with_acf 31 | allowedContent: 32 | 'div(!simplebox,align-left,align-right,align-center){width};' + 33 | 'div(!simplebox-content); h2(!simplebox-title)', 34 | 35 | // Minimum HTML which is required by this widget to work. 36 | requiredContent: 'div(simplebox)', 37 | 38 | // Define two nested editable areas. 39 | editables: { 40 | title: { 41 | // Define CSS selector used for finding the element inside widget element. 42 | selector: '.simplebox-title', 43 | // Define content allowed in this nested editable. Its content will be 44 | // filtered accordingly and the toolbar will be adjusted when this editable 45 | // is focused. 46 | allowedContent: 'br strong em' 47 | }, 48 | content: { 49 | selector: '.simplebox-content', 50 | allowedContent: 'p br ul ol li strong em' 51 | } 52 | }, 53 | 54 | // Define the template of a new Simple Box widget. 55 | // The template will be used when creating new instances of the Simple Box widget. 56 | template: 57 | '
' + 58 | '

Title

' + 59 | '

Content...

' + 60 | '
', 61 | 62 | // Define the label for a widget toolbar button which will be automatically 63 | // created by the Widgets System. This button will insert a new widget instance 64 | // created from the template defined above, or will edit selected widget 65 | // (see second part of this tutorial to learn about editing widgets). 66 | // 67 | // Note: In order to be able to translate your widget you should use the 68 | // editor.lang.simplebox.* property. A string was used directly here to simplify this tutorial. 69 | button: 'Create a simple box', 70 | 71 | // Set the widget dialog window name. This enables the automatic widget-dialog binding. 72 | // This dialog window will be opened when creating a new widget or editing an existing one. 73 | dialog: 'simplebox', 74 | 75 | // Check the elements that need to be converted to widgets. 76 | // 77 | // Note: The "element" argument is an instance of http://docs.ckeditor.com/#!/api/CKEDITOR.htmlParser.element 78 | // so it is not a real DOM element yet. This is caused by the fact that upcasting is performed 79 | // during data processing which is done on DOM represented by JavaScript objects. 80 | upcast: function( element ) { 81 | // Return "true" (that element needs to converted to a Simple Box widget) 82 | // for all
elements with a "simplebox" class. 83 | return element.name == 'div' && element.hasClass( 'simplebox' ); 84 | }, 85 | 86 | // When a widget is being initialized, we need to read the data ("align" and "width") 87 | // from DOM and set it by using the widget.setData() method. 88 | // More code which needs to be executed when DOM is available may go here. 89 | init: function() { 90 | var width = this.element.getStyle( 'width' ); 91 | if ( width ) 92 | this.setData( 'width', width ); 93 | 94 | if ( this.element.hasClass( 'align-left' ) ) 95 | this.setData( 'align', 'left' ); 96 | if ( this.element.hasClass( 'align-right' ) ) 97 | this.setData( 'align', 'right' ); 98 | if ( this.element.hasClass( 'align-center' ) ) 99 | this.setData( 'align', 'center' ); 100 | }, 101 | 102 | // Listen on the widget#data event which is fired every time the widget data changes 103 | // and updates the widget's view. 104 | // Data may be changed by using the widget.setData() method, which we use in the 105 | // Simple Box dialog window. 106 | data: function() { 107 | // Check whether "width" widget data is set and remove or set "width" CSS style. 108 | // The style is set on widget main element (div.simplebox). 109 | if ( this.data.width == '' ) 110 | this.element.removeStyle( 'width' ); 111 | else 112 | this.element.setStyle( 'width', this.data.width ); 113 | 114 | // Brutally remove all align classes and set a new one if "align" widget data is set. 115 | this.element.removeClass( 'align-left' ); 116 | this.element.removeClass( 'align-right' ); 117 | this.element.removeClass( 'align-center' ); 118 | if ( this.data.align ) 119 | this.element.addClass( 'align-' + this.data.align ); 120 | } 121 | } ); 122 | } 123 | } ); 124 | -------------------------------------------------------------------------------- /tutorial-simplebox-2/simplebox/samples/contents.css: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright (c) 2014, CKSource - Frederico Knabben. All rights reserved. 3 | Licensed under the terms of the MIT License (see LICENSE.md). 4 | */ 5 | .simplebox { 6 | padding: 8px; 7 | margin: 10px; 8 | background: #eee; 9 | border-radius: 8px; 10 | border: 1px solid #ddd; 11 | box-shadow: 0 1px 1px #fff inset, 0 -1px 0px #ccc inset; 12 | } 13 | .simplebox-title, .simplebox-content { 14 | box-shadow: 0 1px 1px #ddd inset; 15 | border: 1px solid #cccccc; 16 | border-radius: 5px; 17 | background: #fff; 18 | } 19 | .simplebox-title { 20 | margin: 0 0 8px; 21 | padding: 5px 8px; 22 | } 23 | .simplebox-content { 24 | padding: 0 8px; 25 | } 26 | .simplebox.align-right { 27 | float: right; 28 | } 29 | .simplebox.align-left { 30 | float: left; 31 | } 32 | .simplebox.align-center { 33 | margin-left: auto; 34 | margin-right: auto; 35 | } -------------------------------------------------------------------------------- /tutorial-simplebox-2/simplebox/samples/simplebox.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | Tutorial — Simple Box Widget, part 2 9 | 10 | 11 | 12 | 13 | 14 |

15 | Tutorial — Simple Box Widget, part 2 16 |

17 | 18 | 49 | 50 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /tutorial-timestamp/timestamp/LICENSE.md: -------------------------------------------------------------------------------- 1 | Software License Agreement 2 | ========================== 3 | 4 | Copyright (c) 2014, CKSource - Frederico Knabben. All rights reserved. 5 | 6 | All sample plugins are licensed under the terms of the MIT License (see Appendix A): 7 | 8 | http://en.wikipedia.org/wiki/MIT_License 9 | 10 | Trademarks 11 | ---------- 12 | 13 | CKEditor is a trademark of CKSource - Frederico Knabben. All other brand 14 | and product names are trademarks, registered trademarks or service 15 | marks of their respective holders. 16 | 17 | --- 18 | 19 | Appendix A: The MIT License 20 | --------------------------- 21 | 22 | The MIT License (MIT) 23 | 24 | Copyright (c) 2014, CKSource - Frederico Knabben 25 | 26 | Permission is hereby granted, free of charge, to any person obtaining a copy 27 | of this software and associated documentation files (the "Software"), to deal 28 | in the Software without restriction, including without limitation the rights 29 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 30 | copies of the Software, and to permit persons to whom the Software is 31 | furnished to do so, subject to the following conditions: 32 | 33 | The above copyright notice and this permission notice shall be included in 34 | all copies or substantial portions of the Software. 35 | 36 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 37 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 38 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 39 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 40 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 41 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 42 | THE SOFTWARE. -------------------------------------------------------------------------------- /tutorial-timestamp/timestamp/icons/timestamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/abbasikov/ckeditor-docs-samples/7b9d99a71bb6204cf43cb9c73b071aa44e793a95/tutorial-timestamp/timestamp/icons/timestamp.png -------------------------------------------------------------------------------- /tutorial-timestamp/timestamp/plugin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2014, CKSource - Frederico Knabben. All rights reserved. 3 | * Licensed under the terms of the MIT License (see LICENSE.md). 4 | * 5 | * Basic sample plugin inserting current date and time into the CKEditor editing area. 6 | * 7 | * Created out of the CKEditor Plugin SDK: 8 | * http://docs.ckeditor.com/#!/guide/plugin_sdk_intro 9 | */ 10 | 11 | // Register the plugin within the editor. 12 | CKEDITOR.plugins.add( 'timestamp', { 13 | 14 | // Register the icons. They must match command names. 15 | icons: 'timestamp', 16 | 17 | // The plugin initialization logic goes inside this method. 18 | init: function( editor ) { 19 | 20 | // Define the editor command that inserts a timestamp. 21 | editor.addCommand( 'insertTimestamp', { 22 | 23 | // Define the function that will be fired when the command is executed. 24 | exec: function( editor ) { 25 | var now = new Date(); 26 | 27 | // Insert the timestamp into the document. 28 | editor.insertHtml( 'The current date and time is: ' + now.toString() + '' ); 29 | } 30 | }); 31 | 32 | // Create the toolbar button that executes the above command. 33 | editor.ui.addButton( 'Timestamp', { 34 | label: 'Insert Timestamp', 35 | command: 'insertTimestamp', 36 | toolbar: 'insert' 37 | }); 38 | } 39 | }); 40 | -------------------------------------------------------------------------------- /tutorial-timestamp/timestamp/samples/timestamp.html: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | Tutorial — Timestamp Plugin 9 | 10 | 11 | 12 | 13 | 14 |

15 | CKEditor Tutorial — Timestamp Plugin 16 |

17 | 18 |

19 | This sample demonstrates the Timestamp plugin that was built in the 20 | Creating a CKEditor Plugin in 20 Lines of Code 21 | tutorial from the Plugin SDK section of the CKEditor Developer's Guide. 22 |

23 | 24 |

25 | The custom Timestamp plugin created in the tutorial lets the users insert current date and time into the editing area of CKEditor 26 | at the caret position. This is an example of a most basic CKEditor plugin that you can create in 20 lines of code. 27 |

28 | 29 | 32 | 33 | 56 | 57 | 58 | 59 | --------------------------------------------------------------------------------