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,
- 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
- 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.
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.