April 2013 – G3n1k's Blog

CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It’s a WYSIWYG editor that brings common word processor features directly to your web pages. Enhance your website experience with our community maintained editor.

the feature need from wysiwyg is file manager. file manager use to upload images or multimedia files, so user can use in web pages.

we can use KCFInder for file manager. why ?

Because KCFinder and CKEditor Build to Integrate

this show you how simple …

1. download the source from website

http://ckeditor.com/download

http://kcfinder.sunhater.com/download

2. extract to your development server, my development folder /home/g3n1k/websites/SOURCE/

3. create folder name UPLOADS and make it writeable

4. create file name editor.html

5. open file editor.html copy the script

<!DOCTYPE html>
<html>
<head>
<title>CKEditor - KCFinder</title>
<meta charset="utf-8">
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea id="editor1" name="editor1" cols="80" id="editor1" name="editor1" rows="10">
&lt;h1&gt;Hello&lt;/h1&gt;
</textarea>

<script type="text/javascript">
//CKEDITOR.replace( 'editor1' );
CKEDITOR.replace( 'editor1',
{
filebrowserBrowseUrl: 'kcfinder/browse.php?type=files',
filebrowserImageBrowseUrl: 'kcfinder/browse.php?type=images',
filebrowserFlashBrowseUrl: 'kcfinder/browse.php?type=flash',
filebrowserUploadUrl: 'kcfinder/upload.php?type=files',
filebrowserImageUploadUrl: 'kcfinder/upload.php?type=images',
filebrowserFlashUploadUrl: 'kcfinder/upload.php?type=flash'
}
);
</script>

</body>
</html>

6. change value at file kcfinder/config.php

'disabled' => false,
 'uploadURL' => "../uploads/",
'uploadDir' => "../uploads/",

7. test it

Month: April 2013

Integration CKEditor ( WYSIWYG Editor) KCFinder (File Manager)