Ckeditor with kcfinder

Posted: April 23, 2012 in PHP

1) Download kcfinder, edit config.php

'disabled' => false,
'uploadURL' => "../upload/kcfinder",

2) Download ckeditor, edit config.js

Here kcfinder and ckeditor both are placed at root of website.

CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.filebrowserBrowseUrl = SITE_URL+'kcfinder/browse.php?type=files';
config.filebrowserImageBrowseUrl = SITE_URL+'kcfinder/browse.php?type=files';//images
config.filebrowserFlashBrowseUrl = SITE_URL+'kcfinder/browse.php?type=flash';
config.filebrowserUploadUrl = SITE_URL+'kcfinder/upload.php?type=files';
config.filebrowserImageUploadUrl = SITE_URL+'kcfinder/upload.php?type=images';
config.filebrowserFlashUploadUrl = SITE_URL+'kcfinder/upload.php?type=flash';
};

CKEDITOR.on('instanceReady', function (ev) {

// Ends self closing tags the HTML4 way, like <br>.
ev.editor.dataProcessor.htmlFilter.addRules(
{
elements:
{
$: function (element) {
// Output dimensions of images as width and height
if (element.name == 'img') {
var style = element.attributes.style;

if (style) {
// Get the width from the style.
var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style),
width = match && match[1];

// Get the height from the style.
match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
var height = match && match[1];

// Get the float from the style.
match = /(?:^|\s)float\s*:\s*(\w+)/i.exec(style);
var float = match && match[1];

if (width) {
element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
element.attributes.width = width;
}

if (height) {
element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
element.attributes.height = height;
}
if (float) {
element.attributes.style = element.attributes.style.replace(/(?:^|\s)float\s*:\s*(\w+)/i, '');
element.attributes.align = float;
}

}
}



if (!element.attributes.style)
delete element.attributes.style;

return element;
}
}
});
});

3) Use it in textarea

<!-- ################# ckeditor start ############### -->
<script type="text/javascript" src="<?=SITE_URL?>ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="<?=SITE_URL?>ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
$(function()
{
var config = {
enterMode : 2,
toolbar : 'Basic'
};
if($('.small_editor').length)
$('.small_editor').ckeditor(config);
});
$(function()
{
var config = {
enterMode : 2,
toolbar : [
['Source','Save','Preview'],
['Cut','Copy','Paste','PasteText','PasteFromWord','Print', 'SpellChecker', 'Scayt'],
['Find','Replace','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']
]
};
if($('.big_editor').length)
$('.big_editor').ckeditor(config);
});
$(function()
{
var config = {
enterMode : 2,
toolbar : 'Full'
};
if($('.full_editor').length)
{
$('.full_editor').ckeditor(config);
}

});
</script>
<!-- ################# ckeditor end ############### -->
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s