|
Customizing CKEditor
By default, the CKEditor includes large
number of editor options. See the image above. Most of the time, we will not
require all the above options to do our styling. We can customize the CKEditor
like we do in previous versions.
1. Customizing the editor inline in the webpage through replace
function
By default, the editor includes 2
toolbar sets, Full and Basic. To set Basic toolbar,
<script
type="text/javascript">
CKEDITOR.replace('TextBox1',
{toolbar:'Basic'});
</script>
Or, you can set your own toolbar set
inline like below,
<script
type="text/javascript">
var config = {
toolbar:
[
['Bold',
'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link',
'Unlink'],
['UIColor'],
'/',
['Styles',
'Format', 'Font', 'FontSize']
]
};
CKEDITOR.replace('TextBox1',
config);
</script>
2. Customizing the editor through config.js.
Browse to the config.js file in
ckeditor folder. You can set some default setting here. Refer below,
CKEDITOR.editorConfig = function( config
)
{
// Define changes to default
configuration here. For example:
// config.language =
'fr';
// config.uiColor =
'#AADC6E';
};
To include your own toolbarset, add
your own customized toolbar definition here. Refer below,
CKEDITOR.editorConfig = function( config
)
{
// Define changes to default
configuration here. For example:
// config.language =
'fr';
// config.uiColor =
'#AADC6E';
config.toolbar_CodeDigestTool
=
[
['Bold', 'Italic', 'Underline',
'Strike', '-', 'Subscript', 'Superscript'],
['NumberedList', 'BulletedList', '-',
'Outdent', 'Indent', 'Blockquote'],
['JustifyLeft', 'JustifyCenter',
'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink',
'Anchor'],
['Image', 'Flash', 'Table',
'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
'/',
['Styles', 'Format', 'Font',
'FontSize'],
['TextColor', 'BGColor'],
['Maximize', 'ShowBlocks', '-',
'About']
];
};
In the above code, your new toolbar
name will be “CodeDigestTool”(The word after “_”)
<script
type="text/javascript">
CKEDITOR.replace('TextBox1',
{toolbar:'CodeDigestTool'});
</script>
Refer here
to know all the config options.
Editing config.js means you are
changing the default ckeditor files. To prevent this, we can customize the
ckeditor using an external config file and keep the default ckeditor files
intact. To apply the external config file,
CKEDITOR.replace( ' TextBox1',
{
customConfig :
'/Custom/CodeDigest_config.js'
});
CodeDigest_config.js can have your
custom config settings.
Refer here
to know about all available editor options.
Fetching the Text from
CKEditor
Since, it is an ASP.Net textbox control
it can be accessed by regular Text property. By default, ASP.Net will not allow
HTML inputs to be posted to server in order to prevent the cross site scripting
attach. You will get the following error,
A potentially dangerous Request.Form
value was detected from the client (TextBox1="").
You need to set ValidateRequest="false"
in the Page directive to prevent this error.
To fetch the text from
javascript,
function GetText() {
alert(CKEDITOR.instances.TextBox1.getData());
}
OR
function GetText() {
alert(CKEDITOR.instances["TextBox1"].getData());
}
Refer here
to know more above editor
instance.
Upload Images with CKeditor
To upload image and emebed it from CKeditor, please refer,
Upload Images and Integrate with CKeditor in Asp.Net
Working with Events
By default, CKEditor exposes number of
events that can be hooked from the clientside. Refer the events section here.
Syntax
CKEDITOR.instances["TextBox1"].on("eventname", event
method);
Example
CKEDITOR.instances["TextBox1"].on("instanceReady",
InstanceReadyEvent);
function InstanceReadyEvent()
{
this.document.on("keyup",
function() {
// var editor =
CKEDITOR.instances.TextBox1;
var editor =
CKEDITOR.instances["TextBox1"];
//Your code Goes
here
var tex =
editor.getData();
});
}
The above event attaches an onkeyup
event on the editor.
|