How to upload image in CKEditor using PHP
Published on :

You used CKeditor in your website for user input. Now you want to upload image using CKeditor in php then this tutorial help you to upload image in CKEditor using php step by step.
In this tutorial you can see full guid of image uploading using CKEditor. if you don’t know how to integrate ckeditor then view this tutorial How to use Ckeditor in your website for user input.

Step 1 :  Enable file select option in CKeditor

  •  we can set image upload option CKEditor toolbar options
  • Now we need to customize CKEditor config file to display image upload option
  • config.js file is in your CKeditor folder
  • now follow this file code this is our custom config   toolbar options code

 

CKEDITOR.editorConfig = function( config ) {
	config.toolbarGroups = [
		{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
		{ name: 'forms', groups: [ 'forms' ] },
		'/',
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
		{ name: 'links', groups: [ 'links' ] },
		{ name: 'insert', groups: [ 'insert' ] },
		'/',
		{ name: 'styles', groups: [ 'styles' ] },
		{ name: 'colors', groups: [ 'colors' ] },
		{ name: 'tools', groups: [ 'tools' ] },
		{ name: 'others', groups: [ 'others' ] },
		{ name: 'about', groups: [ 'about' ] }
	];

	config.removeButtons = 'Source,Save,NewPage,Preview,Print,Templates,Cut,Paste,Copy,PasteText,PasteFromWord,Undo,Redo,Find,Replace,SelectAll,Scayt,Form,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Subscript,Superscript,CopyFormatting,RemoveFormat,CreateDiv,Outdent,NumberedList,BulletedList,Indent,BidiLtr,BidiRtl,Language,Anchor,Flash,Table,PageBreak,Iframe,Styles,Format,Font,FontSize,TextColor,Maximize,About,BGColor,ShowBlocks,Checkbox';
};

 

  • we can customize toolbar option using this code
{ name: 'insert', groups: [ 'insert' ] },
  • this code is for upload files option. we can upload any type of file in Ckeditor
  • but using this code we can’t upload file from our computer but we can add any image or file link .we cant see browse button in ckeditor

 

Step 2 : Setup browse file button in CKEditor

  • for browse button we need to set file upload path and file browse path where we write code for replaced textarea to ckeditor
  • se below example

 

CKEDITOR.replace( 'editor1', {
customConfig: '/ckeditor/config.js',
filebrowserBrowseUrl: 'after_upload_image_browse_path',
filebrowserUploadUrl: '/ck_upload.php'
});

 

  • Now you can see browse file button under image option popup



Step 3 : Write code in PHP for Move file to the server

  • Now we need to write code for move file or image to our server in “ck_upload.php”

 

if (file_exists("images/" . $_FILES["file"]["name"]))
{
 echo $_FILES["file"]["name"] . " already exists. ";
}
else
{
 move_uploaded_file($_FILES["file"]["tmp_name"],
 "images/" . $_FILES["file"]["name"]);
 echo "Stored in: " . "images/" . $_FILES["file"]["name"];
} 

That’s It, using about steps we can upload image or file in php



Please follow and like us:

Leave a Reply