How to add CKEditor with image upload using KCFinder in PHP Example Code?

How to add CKEditor with image upload using KCFinder in PHP Example Code?

In this post we will give you information about How to add CKEditor with image upload using KCFinder in PHP Example Code?. Hear we will give you detail about How to add CKEditor with image upload using KCFinder in PHP Example Code?And how to use it also give you demo for it if it is necessary.

We can implement ckeditor with image uploading in PHP simply. if you want to use ckeditor in your PHP project and you also want to add file uploading as well then you can do easily to follow bellow step.

In this example i use ckeditor with KCFinder for image uploading. KCFinder through we can file upload easily using their api. If you don’t know about ckeditor and KCFinder then no issue you can add simple way.

Now, i will give you few step to set ckeditor with file uploading and you will easily apply this. this is a very simple to browse your image, file etc upload.

Preview:

Step 1 : Download CKEditor

In this step we have to download ckeditor from its official website, i mean here : http://ckeditor.com/download and extract in your root folder.

Step 2 : Download KCFinder

In this step we have to download ckeditor from its official website, i mean here : and extract in your root folder. Also change folder name just “kcfinder”.

Step 3 : Configuration

In this step we have to add Configuration for file uploading, so just open config.js in ckeditor and put bellow code:

ckeditor/config.js

CKEDITOR.editorConfig = function(config) {

config.filebrowserBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=files';

config.filebrowserImageBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=images';

config.filebrowserFlashBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=flash';

config.filebrowserUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=files';

config.filebrowserImageUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=images';

config.filebrowserFlashUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=flash';

};

Step 4 : Index File

This is last step, you have to create index.php file and put bellow code. If you you find error like “You don’t have permissions to upload files” then follow this link : Click Here.

index.php

Also see:How to add ckeditor with image upload in Laravel ?

<html>

<head>

<title>PHP - CKEditor with Image upload</title>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="/ckeditor/ckeditor.js"></script>

</head>

<body>


<textarea id="editor1" ></textarea>


<script type="text/javascript">

CKEDITOR.replace( 'editor1' );

</script>


</body>

</html>

Try this….

Hope this code and post will helped you for implement How to add CKEditor with image upload using KCFinder in PHP Example Code?. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

86  +    =  92

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US