Fredck: Minor code fixes.

2011-09-13T09:03:39Z

Minor code fixes.

Anna: Article contents added

2011-05-20T13:44:38Z

Article contents added

New page

{{#CUSTOMTITLE:Creating a CKEditor Plugin with a Custom Dialog Window}}
__TOC__
The aim of this tutorial is to demonstrate how to create a custom plugin dialog window that contains various types of fields.

We are going to develop a '''Simple Link plugin''' that can replace the more feature-rich default [[CKEditor_3.x/Users_Guide/Rich_Text/Links|Link]] feature of CKEditor with a simplified solution. The plugin dialog window will let the user insert a link through a customized dialog window that is opened after clicking a dedicated toolbar button.

The plugin will be named <code>'''simpleLink'''</code>.

== Plugin Files ==
Firstly, we will need to create the <code>simpleLink</code> folder inside the <code>plugins</code> directory of the CKEditor installation.

<note>Remember that for CKEditor the name of the plugin folder is important and has to be the same as the name of the plugin, otherwise the editor will not be able to recognize it.</note>

Inside the newly created <code>simpleLink</code> folder we are going to place the <code>plugin.js</code> file that will contain the plugin logic. Apart from that, since we will also need a toolbar icon for our plugin, we are going to add an <code>images</code> folder and subsequently place the <code>icon.png</code> file inside.

To sum up, we will need the following file structure for our plugin to work:
* <code>''ckeditor root''</code>
** <code>plugins</code>
*** <code>simpleLink</code>
**** <code>images</code>
***** <code>icon.png</code>
**** <code>plugin.js</code>

== Plugin Source Code ==
With the following structure ready, it is time to open the <code>plugin.js</code> file in a text editor and to start creating the source code of the plugin.
<source lang="javascript">
CKEDITOR.plugins.add( 'simpleLink',
{
init: function( editor )
{
// Plugin logic goes here...
}
} );
</source>
All CKEditor plugins are created by using the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.resourceManager.html#add CKEDITOR.plugins.add]</code> function. This function should contain the plugin name (<code>'simpleLink'</code>) and the plugin logic placed inside the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.pluginDefinition.html#init init]</code> function that is called upon the initialization of the editor instance.

=== Creating an Editor Command ===
We want our plugin to have a dialog window, so we need to define an editor command that opens a new dialog window. To do this, we will need to use the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#addCommand addCommand]</code> function opening the <code>simpleLinkDialog</code> window that we are going to define in a moment by using the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialogCommand.html CKEDITOR.dialogCommand]</code> function.
<source lang="javascript">
editor.addCommand( 'simpleLinkDialog', new CKEDITOR.dialogCommand( 'simpleLinkDialog' ) );
</source>

=== Creating a Toolbar Button ===
The plugin dialog window is to be opened by using a toolbar button. To this end, we need to define a button that will be associated with the dialog window. The <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.html#addButton CKEditor.ui.addButton]</code> function accepts a button name (<code>'SimpleLink'</code>) along with the definition of the tooltip text (<code>label</code>) and the button icon (<code>icon</code>). Note that <code>this.path</code> is the directory where the <code>plugin.js</code> file resides.

These parameters are responsible for the button presentation. To make the button actually work, we need to connect it to the plugin command name defined above by using the <code>command</code> parameter.
<source lang="javascript">
editor.ui.addButton( 'SimpleLink',
{
label: 'Insert a Link',
command: 'simpleLinkDialog',
icon: this.path + 'images/icon.png'
} );
</source>

=== CKEditor Initialization ===
It is now time to initialize a CKEditor instance that will use the Simple Link plugin along with its toolbar button.

To register the plugin with CKEditor, we have to add it to the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.extraPlugins extraPlugins]</code> list. We also need to enhance the toolbar definition and add the plugin button by using the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.toolbar toolbar]</code> parameter.

Open the page that will contain CKEditor in a text editor, and insert a CKEditor instance using the following toolbar and plugin configuration.
<source lang="javascript">
<script type="text/javascript">
//<![CDATA[
// Replace the <textarea id="editor1"> with a CKEditor instance using default configuration.
CKEDITOR.replace( 'editor1',
{
extraPlugins : 'simpleLink',
toolbar :
[
['Source', '-', 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink'],
['About','-','SimpleLink']
]
});
//]]>
</script>
</source>

After you load the page containing the above CKEditor instance you should be able to see the new plugin toolbar button along with its tooltip.

[[Image:simpleLink_button_added.png|center|frame|SimpleLink plugin button added to CKEditor toolbar]]

=== Plugin Dialog Window ===
Up till now, most of the actions that we performed were equivalent to what we did while creating the [[CKEditor_3.x/Developers_Guide/Customization/Plugins/Abbr_Plugin_Part_1|Abbreviation]] plugin. Here is, however, where the really interesting part begins. We will now move on to creating a custom dialog window along with its contents.

Clicking the button should open the <code>simpleLinkDialog</code> dialog window. First, however, we need to return to the Simple Link plugin source file and [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.dialogDefinition.html define the dialog window] by using the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html#.add CKEDITOR.dialog.add]</code> function. To see all dialog window definition elements, refer to [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.dialogDefinition.html CKEditor JavaScript API].

In our case we will give the dialog window a name (<code>'simpleLinkDialog'</code>) and use the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.dialogDefinition.html#title title]</code>, <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.dialogDefinition.html#minWidth minWidth]</code>, and <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.dialogDefinition.html#minHeight minHeight]</code> parameters to define its title and minimum dimensions, respectively.

<note>The name selected for the dialog window is the name that appears in the <code>addCommand</code> function above.
</note>

==== Dialog Window Tab ====
The dialog window should also contain some contents, so we will begin with adding a tab along with its label. In all CKEditor dialog windows the contents of a dialog window are defined iside the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.dialogDefinition.html#contents contents]</code> array. This array contains <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.contentDefinition.html CKEDITOR.dialog.contentDefinition]</code> objects that consititute the tabs (or "content pages") of a dialog window.

We will give our dialog window tab an <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.contentDefinition.html#id id]</code> and <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.contentDefinition.html#label label]</code>. Please note that since in our case the dialog window contains just one tab (or "page"), the tab's name (label) will not be visible. However, even though the <code>label</code> property is not required, it is a good practice to include it since it plays its role in accessibility support as it will be read aloud by screen readers.

Note that by default CKEditor also adds the standard '''OK''' and '''Cancel''' buttons. If you want to customize them (i.e. remove both or just one, add custom ones), you can use the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.html#buttons buttons]</code> array to add new <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.button.html button]</code> elements.

A dialog window tab created in this way should also contain some real content, like text fields, checkboxes, or drop-down lists. These will be added in the next step inside the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.contentDefinition.html#elements elements]</code> property.

In order to create the Simple Link plugin dialog window, add the following code in the <code>plugin.js</code> file below the plugin toolbar button definition.
<source lang="javascript">
CKEDITOR.dialog.add( 'simpleLinkDialog', function( editor )
{
return {
title : 'Link Properties',
minWidth : 400,
minHeight : 200,
contents :
[
{
id : 'general',
label : 'Settings',
elements :
[
// UI elements of the Settings tab.
]
}
],
};
} );
</source>
The result of this change can be seen immediately. Click the '''Insert a Link''' toolbar button in order to open the newly created (and so far empty) '''Link Properties''' dialog window.

[[Image:simpleLink_empty_tab.png|center|frame|A SimpleLink plugin dialog window with one tab added]]

==== Dialog Window Tab Elements ====
User interface elements that can be added to a dialog window tab are defined in the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.contentDefinition.html#elements elements]</code> parameter, which is an array of <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.uiElementDefinition.html CKEDITOR.dialog.uiElementDefinition]</code> objects.

Since we want to try a number of different types of dialog window UI elements, in this case the dialog window tab will consist of a larger textarea, smaller text field, a selection field (drop-down list), and a checkbox. We will also use HTML to create the tab description.

Each UI element is added inside the <code>elements</code> array, with the definition placed inside the curly braces (<code>{}</code>), separated from one another with a comma. The <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.uiElementDefinition.html#type type]</code> parameter is a required one and defines the type of the element.

===== UI Elements: HTML =====
The first UI element we are going to use is the HTML type. The <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.html.html html]</code> type allows you to define the contents of a dialog window page by using pure HTML code. The HTML code to be placed inside the page is entered in the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.html.html#constructor html]</code> parameter.

<source lang="javascript">
elements :
[
{
type : 'html',
html : 'This dialog window lets you create simple links for your website.'
}
]
</source>

After adding the above code to the plugin source, the '''Link Properties''' dialog window looks like this.

[[Image:simpleLink_tab_html.png|center|frame|HTML element added in the SimpleLink plugin dialog window]]

===== UI Elements: Textarea =====
The element to be placed underneath the description is the textarea element that will be obligatory to fill in. We will use it to add the text that is displayed in the document and points to the inserted link.

In order to create a textarea we will use the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.textarea.html textarea]</code> UI element type and assign it an <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.uiElementDefinition.html#id id]</code>. The textarea will also need a label that will describe its purpose and can be added using the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.labeledElement.html#constructor label]</code> parameter.

Since filling in the contents of the textarea will be obligatory, we will set the <code>required</code> parameter to <code>true</code> and inside the <code>validate</code> parameter add some simple validation that checks whether the field is empty. If it is, the validator will return an error message.

<source lang="javascript">
{
type : 'textarea',
id : 'contents',
label : 'Displayed Text',
validate : CKEDITOR.dialog.validate.notEmpty( 'The Displayed Text field cannot be empty.' ),
required : true
}
</source>

This is the appearance of the '''Link Properties''' dialog window after we apply the changes.

[[Image:simpleLink_tab_textarea.png|center|frame|Textarea element added in the SimpleLink plugin dialog window]]

The size of the textarea can obviously be customized. If you want to change the element's dimensions, use the <code>cols</code> amd <code>rows</code> parameters as defined in the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.textarea.html#constructor textarea]</code> constructor.

===== UI Elements: Text Field =====
Another UI element that we are going to use in the plugin is the text field (text input) element. We will use it to enter the Internet address of the linked page.

A text field lets you enter text into a single-line field and is meant for shorter entries. Its definition is very similar to the textarea — the main difference lies in the <code>type</code> parameter that is set to <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.textInput.html text]</code>.

The <code>id</code> and <code>label</code> parameters will be defined as done above. In our case this field is obligatory, so we will set its <code>required</code> parameter to <code>true</code>. The validation code inside the <code>validate</code> parameter will also be used to check whether the field was filled in. If it is empty, the validator will return an error message.

<source lang="javascript">
{
type : 'text',
id : 'url',
label : 'URL',
validate : CKEDITOR.dialog.validate.notEmpty( 'The link must have a URL.' ),
required : true
}
</source>

With the latest addition of the text field the '''Link Properties''' dialog window will look like this.

[[Image:simpleLink_tab_text.png|center|frame|Text field element added in the SimpleLink plugin dialog window]]

===== UI Elements: Selection Field =====
Another type of UI elements that we are going to try out is the selection field (drop-down list). In this case we will use it to allow the user to choose one of the pre-defined styles for the link text.

To create a selection field we need to set the <code>type</code> parameter of the element to <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.select.html select]</code>. As before, we will add the <code>id</code> and <code>label</code> parameters appropriate for this field. The items to be chosen from the selection list are defined inside the obligatory <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.select.html#constructor items]</code> array that contains the values along with their displayed text. The first item defined in the list will be used by default; you can also use the <code>default</code> parameter to change this setting.

<source lang="javascript">
{
type : 'select',
id : 'style',
label : 'Style',
items :
[
[ '<none>', '' ],
[ 'Bold', 'b' ],
[ 'Underline', 'u' ],
[ 'Italics', 'i' ]
]
}
</source>

After the selection field is added to the plugin dialog window and is expanded by the user, the style that was selected by default (the first one, if not defined otherwise) is highlighted.

[[Image:simpleLink_tab_select.png|center|frame|Selection field element added in the SimpleLink plugin dialog window]]

===== UI Elements: Checkbox =====
The final UI element to be added to the plugin dialog window is the checkbox. In this case the user will be able to select it if the link is to be opened in a new window.

In order to create a checkbox we need to set the <code>type</code> parameter of the element to <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.checkbox.html checkbox]</code>. As before, the field will also get a standard <code>id</code> and <code>label</code>. Since we want opening in a new page to be a default behavior, we will set the <code>default</code> parameter to <code>true</code> in order to have the checkbox selected when the plugin dialog window is opened.

<note>Please note that the <code>default</code> parameter needs to be placed in single quotes since it is a reserved JavaScript word.
</note>

<source lang="javascript">
{
type : 'checkbox',
id : 'newPage',
label : 'Opens in a new page',
'default' : true
}
</source>

The figure below shows the '''Link Properties''' dialog window complete with all the UI elements added above.

[[Image:simpleLink_tab_checkbox.png|center|frame|Checkbox element added in the SimpleLink plugin dialog window]]

=== Plugin Behavior ===
The plugin now ''looks'' good — the toolbar button is in place and the dialog window is complete with a couple of sample UI elements. There is, however, one problem: it does not really ''do'' anything.

We will start with creating the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.dialogDefinition.html#onOk onOk]</code> method that is invoked once the user accepts the changes introduced in the dialog window by clicking the '''OK''' button or pressing the ''Enter'' key on the keyboard. The method will be defined inside the <code>CKEDITOR.dialog.add</code> function, below the definition of dialog window contents.

<source lang="javascript">
onOk : function()
{
// The code that will be executed when the user accepts the changes.
}
</source>

We shall start the <code>onOk</code> function from creating a link element and a <code>data</code> object that will store the data entered in the dialog window fields. The link will be based on a standard HTML <code><a></code> element and as a new DOM element it will be created by using the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.document.html#createElement createElement]</code> function.

<source lang="javascript">
var dialog = this,
data = {},
link = editor.document.createElement( 'a' );
</source>

In order to populate the <code>data</code> object with the contents of the dialog window fields we will use the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html#commitContent commitContent]</code> function.

<source lang="javascript">
this.commitContent( data );
</source>

To make the <code>commitContent</code> function work we will however first need to define the commit functions themselves. In order to do that, we will have to revise the code of the dialog window UI elements again.

The commit functions will have to be added to all user input elements of the plugin dialog window — the textarea, the text field, the selection field, and the checkbox. In each case the functions need to get the value entered by the user by using the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.element.html#getValue getValue]</code> function and assign it to an appropriate attribute of the <code>data</code> object.

<source lang="javascript">
elements :
[
{
type : 'html',
html : 'This dialog window lets you create simple links for your website.'
},
{
type : 'textarea',
id : 'contents',
label : 'Displayed Text',
validate : CKEDITOR.dialog.validate.notEmpty( 'The Displayed Text field cannot be empty.' ),
required : true,
commit : function( data )
{
data.contents = this.getValue();
}
},
{
type : 'text',
id : 'url',
label : 'URL',
validate : CKEDITOR.dialog.validate.notEmpty( 'The link must have a URL.' ),
required : true,
commit : function( data )
{
data.url = this.getValue();
}
},
{
type : 'select',
id : 'style',
label : 'Style',
items :
[
[ '<none>', '' ],
[ 'Bold', 'b' ],
[ 'Underline', 'u' ],
[ 'Italics', 'i' ]
],
commit : function( data )
{
data.style = this.getValue();
}
},
{
type : 'checkbox',
id : 'newPage',
label : 'Opens in a new page',
'default' : true,
commit : function( data )
{
data.newPage = this.getValue();
}
}
]
</source>

We now have the values entered in the plugin dialog window in the <code>data</code> object. It is time to return to the <code>onOk</code> function and start building the contents of the <code>link</code> variable that contains the <code><a></code> element.

The URL of the linked page will be added to the <code><a></code> element by using the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.element.html#setAttribute setAttribute]</code> function to update the <code>href</code> attribute of the <code>link</code> object with the contents of the <code>url</code> attribute of the <code>data</code> object.

<source lang="javascript">
link.setAttribute( 'href', data.url );
</source>

If the checkbox setting the link to open in a new page (<code>newPage</code>) was selected, we also need to set the <code>target</code> attribute of the link to <code>_blank</code> by using the <code>setAttribute</code> function again.

<source lang="javascript">
if ( data.newPage )
link.setAttribute( 'target', '_blank' );
</source>

If the user decided to apply one of the styles from the drop-down list to the link, we have to add this setting to the link element. We will use a JavaScript <code>switch</code> statement to define the style setting based on the user's choice and use the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.element.html#setStyle setStyle]</code> function to add an appropriate CSS stylesheet rule to the inline <code>style</code> attribute of the <code>link</code> element.

<source lang="javascript">
switch( data.style )
{
case 'b' :
link.setStyle( 'font-weight', 'bold' );
break;
case 'u' :
link.setStyle( 'text-decoration', 'underline' );
break;
case 'i' :
link.setStyle( 'font-style', 'italic' );
break;
}
</source>

We now need to insert the '''Displayed Text''' data (<code>contents</code>) into the link, in between the <code><a></code> and <code></a></code> tags. In order to achieve this we will use the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.element.html#setHtml setHtml]</code> function.

<source lang="javascript">
link.setHtml( data.contents );
</source>

Finally, the link object has to be inserted into the document, at the position of the cursor. We will use the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#insertElement insertElement]</code> function for that.
<source lang="javascript">
editor.insertElement( link );
</source>

== Full Source Code ==
To see the full contents of the <code>plugin.js</code> file, <hide target="simpleLink_full">click here</hide>.

<note>You can also [[Media:simpleLink.zip|download the whole plugin folder]] inluding the icon and the fully commented source code.
</note>

<div id="simpleLink_full">
<source lang="javascript">
CKEDITOR.plugins.add( 'simpleLink',
{
init: function( editor )
{
editor.addCommand( 'simpleLinkDialog', new CKEDITOR.dialogCommand( 'simpleLinkDialog' ) );

editor.ui.addButton( 'SimpleLink',
{
label: 'Insert a Link',
command: 'simpleLinkDialog',
icon: this.path + 'images/icon.png'
} );

CKEDITOR.dialog.add( 'simpleLinkDialog', function( editor )
{
return {
title : 'Link Properties',
minWidth : 400,
minHeight : 200,
contents :
[
{
id : 'general',
label : 'Settings',
elements :
[
{
type : 'html',
html : 'This dialog window lets you create simple links for your website.'
},
{
type : 'textarea',
id : 'contents',
label : 'Displayed Text',
validate : CKEDITOR.dialog.validate.notEmpty( 'The Displayed Text field cannot be empty.' ),
required : true,
commit : function( data )
{
data.contents = this.getValue();
}
},
{
type : 'text',
id : 'url',
label : 'URL',
validate : CKEDITOR.dialog.validate.notEmpty( 'The link must have a URL.' ),
required : true,
commit : function( data )
{
data.url = this.getValue();
}
},
{
type : 'select',
id : 'style',
label : 'Style',
items :
[
[ '<none>', '' ],
[ 'Bold', 'b' ],
[ 'Underline', 'u' ],
[ 'Italics', 'i' ]
],
commit : function( data )
{
data.style = this.getValue();
}
},
{
type : 'checkbox',
id : 'newPage',
label : 'Opens in a new page',
'default' : true,
commit : function( data )
{
data.newPage = this.getValue();
}
}
]
}
],
onOk : function()
{
var dialog = this,
data = {},
link = editor.document.createElement( 'a' );
this.commitContent( data );

link.setAttribute( 'href', data.url );

if ( data.newPage )
link.setAttribute( 'target', '_blank' );

switch( data.style )
{
case 'b' :
link.setStyle( 'font-weight', 'bold' );
break;
case 'u' :
link.setStyle( 'text-decoration', 'underline' );
break;
case 'i' :
link.setStyle( 'font-style', 'italic' );
break;
}

link.setHtml( data.contents );

editor.insertElement( link );
}
};
} );
}
} );
</source>
</div>

== Working Example ==
The plugin code is now ready. When you click the '''Insert Link''' toolbar button, the custom '''Link Properties''' dialog window will open. Fill in the obligatory '''Displayed Text''' and '''URL''' fields, and click the '''OK''' button. The checkbox configuring the link to open in a new window is checked by default, but you can uncheck it. You can also change the link style by choosing one of the options from the drop-down list.

[[Image:simpleLink_example1.png|center|frame|Link added in the plugin dialog window]]

The newly added link will be inserted into the document and displayed with a style selected in the dialog window.

[[Image:simpleLink_example2.png|center|frame|Link added to the document]]

If you switched to '''Source''' view, you could see all the information from the plugin dialog window added as link contents and attributes.

[[Image:simpleLink_example3.png|center|frame|Link element shown in the Source view]]

== Further Enhancements ==
The SimpleLink plugin is now able to add a new link element to the document by using a custom and simplified dialog window, but does not make it possible to edit an already existing element by using the plugin dialog window. For tips on how to implement this feature along with the context menu support check the [[CKEditor 3.x/Tutorials/Abbr_Plugin_Part_2|Creating a Simple CKEditor Plugin, Part 2 ]] tutorial.

@@ Line 32: / Line 32: @@
 		// Plugin logic goes here...
+	}
-} );
+});
 </source>
 All CKEditor plugins are created by using the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.resourceManager.html#add CKEDITOR.plugins.add]</code> function. This function should contain the plugin name (<code>'simpleLink'</code>) and the plugin logic placed inside the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.pluginDefinition.html#init init]</code> function that is called upon the initialization of the editor instance.
@@ Line 52: / Line 52: @@
 	command: 'simpleLinkDialog',
 	icon: this.path + 'images/icon.png'
-} );
+});
 </source>
@@ Line 63: / Line 63: @@
 <source lang="javascript">
 <script type="text/javascript">
-//<![CDATA[
 	// Replace the <textarea id="editor1"> with a CKEditor instance using default configuration.
 	CKEDITOR.replace( 'editor1',
@@ Line 74: / Line 74: @@
+			]
 		});
-//]]>
 </script>
 </source>
@@ Line 121: / Line 121: @@
+				]
+			}
-		],
 	};
-} );
+});
 </source>
 The result of this change can be seen immediately. Click the '''Insert a Link''' toolbar button in order to open the newly created (and so far empty) '''Link Properties''' dialog window.
@@ Line 500: / Line 500: @@
+				}
 			};
-		} );
+		});
+	}
-} );
+});
 </source>
 </div>

CKEditor 3.x/Tutorials/SimpleLink Plugin Part 1 - Revision history

Fredck: Minor code fixes.

Anna: Article contents added