Integration CKEditor ( WYSIWYG Editor) KCFinder (File Manager)

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

kcfinder-ckeditor-development-folder

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
test-upload-image

Published by

G3n1k

just to remember what i had known :)

2 thoughts on “Integration CKEditor ( WYSIWYG Editor) KCFinder (File Manager)”

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