Create own website content editor using CKEditor and KCFinder

Yoo… It’s has been a long time for me to post an article to this site.

At this moment, I will explain to you about creating a content editor for our website.  In general, when we create a web-based content (CMS), we will be faced with the processing of content that can be set dynamically. As content editor in WordPress, blogger, etc.

In this tutorial, we use two components of the library already available, namely,

  1. CKeditor is a text editor to be used inside web pages. It’s a WYSIWYG editor, which means that the text being edited on it looks as similar as possible to the results users have when publishing it. It brings to the web common editing features found on desktop editing applications like Microsoft Word and OpenOffice. You can download it at  http://ckeditor.com
  2. KCFinder is free open-source alternative to the CKFinder web file manager. It can be integrated into FCKeditor, CKEditor, and TinyMCE WYSIWYG web editors (or your custom web applications) to upload and manage images, flash movies, and other files that can be embedded in an editor’s generated HTML content. You can download it at http://kcfinder.sunhater.com/

I use PHP as a server side. So, follow these steps.

1. Create file index.php on the root .  Paste the both of library (CKEditor and CKFinder) at the same directory. Perhaps until the structure become like this.

Folder  editor  is the root , ckeditor  contains files from CKEditor, kcfinder  contains files from CKEditor, dan index.php for the main view.

2. Write this code below to index.php file.

<!-- Create the interface -->

<title>Content Editor</title>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">

<p>
 <label>Title:</label><br/>
 <input type="text" name="title" />
 </p>
 <p>
 <label>Content:</label><br/>
 <textarea name="content" id="content"></textarea>
 </p>
 <p>
 <label>&nbsp;</label>
 <button name="post" value="post">Post !</button>
 </p>
</form>

<!-- Call CKEditor -->
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
 CKEDITOR_BASEPATH = 'ckeditor';
 /*
 Embed the CKEditor to component named 'content'
 */
 var editor = CKEDITOR.replace('content', {
 /* Set KCFinder as plugin for CKEditor */
 filebrowserBrowseUrl: "kcfinder/browse.php?type=files"
 });
</script>

3. Let’s Check it out for the result , most often on http://localhost/editor

From now, we can insert a custom content into out site. But sometimes, we have to embed an Image (or other media) right ? . So, this is the usage of KCFinder , as the subpart of editor  for browsing our uploaded files and embed it into out content. It’s acting as File browser.

For embed the image, just click icon image from the toolbar editor.

After that, we will see the image properties dialog , click Browse Server button

And the KCFinder interface will appear,  now keep movin with clicking Upload button for uploading an image.

For the example,  I’ve uploaded my 2 images on the server and put the one to my content. For picking the one,  just double click the choosen uploaded image . The  KCFinder will automaticly closed and fill the image information to the Image properties dialog before.

We can custom the image with the served options on this dialog. After we finished, click OK. At last, we will see that out image has been embedded to the editor. Just post end enjoy it.

We can set our own KCFinder basepath on kcfinder/config.php  at this line.


'uploadURL' => "files",

Now, we have our own editor  for editing the website content. I’ve put the demo and download link for the training. If you have any feedback, suggestions, or questions, please comment below.

Thanks for visiting my site. Hope this is useful for you.

( Download | Demo )

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