{"id":3980,"date":"2019-05-02T20:34:50","date_gmt":"2019-05-02T20:34:50","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=3980"},"modified":"2023-10-05T09:31:17","modified_gmt":"2023-10-05T09:31:17","slug":"ckeditor-upload-image-to-server-using-php","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/ckeditor-upload-image-to-server-using-php\/","title":{"rendered":"Upload and Insert Image in CKEditor using PHP"},"content":{"rendered":"<p><b>CKEditor plugin<\/b> provides the easiest way to add WYSIWYG Editor to the input field on the web form. Generally, the WYSIWYG editor is used to replace the textarea for submitting the HTML content. You can easily <a href=\"https:\/\/www.codexworld.com\/add-wysiwyg-html-editor-to-textarea-ckeditor\/\">add WYSIWYG editor to textarea<\/a> with CKEditor plugin. The CKEditor plugin allows the user to insert HTML content in the textarea field and submit formatted text content to the server side.<\/p>\n<p>The <b>Image plugin<\/b> of CKEditor helps to insert the image in the editor. In this case, you need to specify the URL of the image to insert into the editor content. The Image plugin is not allowed to upload images and insert them in CKEditor. If you want to upload the image to the server and insert this image in the editor content, custom image upload functionality needs to be integrated into CKEditor. In this tutorial, we will show you how to <b>upload image in CKEditor<\/b> and insert the uploaded image into the editor content using PHP.<\/p>\n<p>Before getting started, download the latest version of the <a href=\"https:\/\/ckeditor.com\/ckeditor-5\/download\/\" target=\"_blank\" rel=\"noopener\">CKEditor 5 Classic<\/a> Package. Extract the downloaded CKEditor plugin archive and place it in the root directory.<\/p>\n<ul>\n<li>In this example, we will use a <b>Simple upload adapter<\/b> to integrate server-side image upload functionality. So. make sure you selected the <u><i>Simple upload adapter<\/i><\/u> plugin at the time of creating the CKEditor build for download.<\/li>\n<\/ul>\n<p><span class=\"note\">Note that:<\/span> You don&#8217;t need to download the CKEditor separately, all the required files are included in our source code.<\/p>\n<h2>Add CKEditor to Textarea<\/h2>\n<p><b>1.<\/b> Create a textarea element that you want to replace with CKEditor.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">textarea<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"editor\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"editor\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">textarea<\/span>&gt;<\/span><\/pre>\n<p><b>2.<\/b> Include the library file of the CKEditor jQuery plugin.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"ckeditor\/build\/ckeditor.js\"<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>3.<\/b>&nbsp; Use the <code>ClassicEditor.create()<\/code> method to initialize the CKEditor plugin and replace the textarea element with the WYSIWYG editor.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n<span style=\"color: rgb(110, 107, 94);\">ClassicEditor\r\n    .create( <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.querySelector( <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#editor'<\/span> ) )\r\n    .catch( error =&gt; {\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">console<\/span>.error( error );\r\n    } );<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<h2>Setup Image Upload URL<\/h2>\n<p>Specify some additional config options to the <b>ClassicEditor.create()<\/b> method to enable the server-side upload feature in CKEditor.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>In the <code>simpleUpload<\/code> config option, use the <b>uploadUrl<\/b> property to specify the URL of the image upload server-side script (<code>ck_upload.php<\/code>).<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\">ClassicEditor\r\n    .create( <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.querySelector( <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'#editor'<\/span> ), {\r\n        simpleUpload: {\r\n            <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ The URL that the images are uploaded to.<\/span>\r\n            uploadUrl: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'ckeditor\/ck_upload.php'<\/span>,\r\n        }\r\n    } )\r\n    .then( editor =&gt; {\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">window<\/span>.editor = editor;\r\n    } )\r\n    .catch( err =&gt; {\r\n        <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">console<\/span>.error( err.stack );\r\n    } );<\/pre>\n<p>The above configuration will enable the server-side image upload option. It allows the user to select a file and send it to the server-side script for upload.<\/p>\n<h2>Upload Image to Server (ckeditor\/ck_upload.php)<\/h2>\n<p>First, create a folder to store the uploaded image files on the server. In this example script, we will upload and store the image files in the <code>ckeditor\/uploads\/<\/code> folder.<\/p>\n<p>The <code>ck_upload.php<\/code> file handles the file upload process using PHP.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Specify the upload directory and allowed image properties.<\/li>\n<li>Validate image type and size.<\/li>\n<li>Upload image to the server using the <b>move_uploaded_file()<\/b> function in PHP.<\/li>\n<li>Specify the uploaded image path in the <code>url<\/code> property of the response array.<\/li>\n<li>Return the response in JSON format using <code>json_encode()<\/code> function in PHP.<\/li>\n<li>If the image upload is successful,\n<ul>\n<li>The upload status will be shown in an alert dialog.<\/li>\n<li>Insert the uploaded image in the editor.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre><span style=\"color: #0000BB\">&lt;?php <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Define&nbsp;file&nbsp;upload&nbsp;path <br \/><\/span><span style=\"color: #0000BB\">$upload_dir&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'img'<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'uploads\/'<\/span><span style=\"color: #007700\">, <br \/>); <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Allowed&nbsp;image&nbsp;properties&nbsp; <br \/><\/span><span style=\"color: #0000BB\">$imgset&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;array( <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'maxsize'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">5000<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'maxwidth'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">4096<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'maxheight'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">3000<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'minwidth'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">10<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'minheight'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">10<\/span><span style=\"color: #007700\">, <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'type'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;array(<\/span><span style=\"color: #DD0000\">'bmp'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'gif'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'jpg'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'jpeg'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'png'<\/span><span style=\"color: #007700\">), <br \/>); <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;If&nbsp;0,&nbsp;will&nbsp;OVERWRITE&nbsp;the&nbsp;existing&nbsp;file <br \/><\/span><span style=\"color: #0000BB\">define<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'RENAME_F'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">); <br \/> <br \/><\/span><span style=\"color: #0000BB\">$site&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/** <br \/>&nbsp;*&nbsp;Set&nbsp;filename <br \/>&nbsp;*&nbsp;If&nbsp;the&nbsp;file&nbsp;exists,&nbsp;and&nbsp;RENAME_F&nbsp;is&nbsp;1,&nbsp;set&nbsp;\"img_name_1\" <br \/>&nbsp;* <br \/>&nbsp;*&nbsp;$p&nbsp;=&nbsp;dir-path,&nbsp;$fn=filename&nbsp;to&nbsp;check,&nbsp;$ex=extension&nbsp;$i=index&nbsp;to&nbsp;rename <br \/>&nbsp;*\/ <br \/><\/span><span style=\"color: #007700\">function&nbsp;<\/span><span style=\"color: #0000BB\">setFName<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$p<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$fn<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$ex<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$i<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">RENAME_F&nbsp;<\/span><span style=\"color: #007700\">==<\/span><span style=\"color: #0000BB\">1&nbsp;<\/span><span style=\"color: #007700\">&amp;&amp;&nbsp;<\/span><span style=\"color: #0000BB\">file_exists<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$p&nbsp;<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$fn&nbsp;<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$ex<\/span><span style=\"color: #007700\">)){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<\/span><span style=\"color: #0000BB\">setFName<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$p<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">F_NAME&nbsp;<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">'_'<\/span><span style=\"color: #007700\">.&nbsp;(<\/span><span style=\"color: #0000BB\">$i&nbsp;<\/span><span style=\"color: #007700\">+<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">),&nbsp;<\/span><span style=\"color: #0000BB\">$ex<\/span><span style=\"color: #007700\">,&nbsp;(<\/span><span style=\"color: #0000BB\">$i&nbsp;<\/span><span style=\"color: #007700\">+<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">)); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<\/span><span style=\"color: #0000BB\">$fn&nbsp;<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$ex<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>} <br \/> <br \/><\/span><span style=\"color: #0000BB\">$re&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">; <br \/>if(isset(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'upload'<\/span><span style=\"color: #007700\">])&nbsp;&amp;&amp;&nbsp;<\/span><span style=\"color: #0000BB\">strlen<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'upload'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">])&nbsp;&gt;&nbsp;<\/span><span style=\"color: #0000BB\">1<\/span><span style=\"color: #007700\">)&nbsp;{ <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">define<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'F_NAME'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">preg_replace<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'\/\\.(.+?)$\/i'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">basename<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'upload'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">])));&nbsp;&nbsp; <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Get&nbsp;filename&nbsp;without&nbsp;extension <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$sepext&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">explode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #DD0000\">'.'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">strtolower<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'upload'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">])); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$type&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">end<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$sepext<\/span><span style=\"color: #007700\">);&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/**&nbsp;gets&nbsp;extension&nbsp;**\/ <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;\/\/&nbsp;Upload&nbsp;directory <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$upload_dir&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">in_array<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$type<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$imgset<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'type'<\/span><span style=\"color: #007700\">])&nbsp;?&nbsp;<\/span><span style=\"color: #0000BB\">$upload_dir<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'img'<\/span><span style=\"color: #007700\">]&nbsp;:&nbsp;<\/span><span style=\"color: #0000BB\">$upload_dir<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'audio'<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$upload_dir&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">trim<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$upload_dir<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'\/'<\/span><span style=\"color: #007700\">)&nbsp;.<\/span><span style=\"color: #DD0000\">'\/'<\/span><span style=\"color: #007700\">; <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Validate&nbsp;file&nbsp;type <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if(<\/span><span style=\"color: #0000BB\">in_array<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$type<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$imgset<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'type'<\/span><span style=\"color: #007700\">])){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;Image&nbsp;width&nbsp;and&nbsp;height <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">list(<\/span><span style=\"color: #0000BB\">$width<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">$height<\/span><span style=\"color: #007700\">)&nbsp;=&nbsp;<\/span><span style=\"color: #0000BB\">getimagesize<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'upload'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'tmp_name'<\/span><span style=\"color: #007700\">]); <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(isset(<\/span><span style=\"color: #0000BB\">$width<\/span><span style=\"color: #007700\">)&nbsp;&amp;&amp;&nbsp;isset(<\/span><span style=\"color: #0000BB\">$height<\/span><span style=\"color: #007700\">))&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">$width&nbsp;<\/span><span style=\"color: #007700\">&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$imgset<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'maxwidth'<\/span><span style=\"color: #007700\">]&nbsp;||&nbsp;<\/span><span style=\"color: #0000BB\">$height&nbsp;<\/span><span style=\"color: #007700\">&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$imgset<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'maxheight'<\/span><span style=\"color: #007700\">]){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$re&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'&nbsp;Width&nbsp;x&nbsp;Height&nbsp;=&nbsp;'<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$width&nbsp;<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">'&nbsp;x&nbsp;'<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$height&nbsp;<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">'&nbsp;&gt;&gt;&gt;&nbsp;The&nbsp;maximum&nbsp;Width&nbsp;x&nbsp;Height&nbsp;must&nbsp;be:&nbsp;'<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$imgset<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'maxwidth'<\/span><span style=\"color: #007700\">].&nbsp;<\/span><span style=\"color: #DD0000\">'&nbsp;x&nbsp;'<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$imgset<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'maxheight'<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">$width&nbsp;<\/span><span style=\"color: #007700\">&lt;&nbsp;<\/span><span style=\"color: #0000BB\">$imgset<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'minwidth'<\/span><span style=\"color: #007700\">]&nbsp;||&nbsp;<\/span><span style=\"color: #0000BB\">$height&nbsp;<\/span><span style=\"color: #007700\">&lt;&nbsp;<\/span><span style=\"color: #0000BB\">$imgset<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'minheight'<\/span><span style=\"color: #007700\">]){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$re&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'&nbsp;Width&nbsp;x&nbsp;Height&nbsp;=&nbsp;'<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$width&nbsp;<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">'&nbsp;x&nbsp;'<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$height&nbsp;<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">'&nbsp;&gt;&gt;&gt;&nbsp;The&nbsp;minimum&nbsp;Width&nbsp;x&nbsp;Height&nbsp;must&nbsp;be:&nbsp;'<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$imgset<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'minwidth'<\/span><span style=\"color: #007700\">].&nbsp;<\/span><span style=\"color: #DD0000\">'&nbsp;x&nbsp;'<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$imgset<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'minheight'<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'upload'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'size'<\/span><span style=\"color: #007700\">]&nbsp;&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$imgset<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'maxsize'<\/span><span style=\"color: #007700\">]*<\/span><span style=\"color: #0000BB\">1000<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$re&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'&nbsp;&gt;&gt;&gt;&nbsp;Maximum&nbsp;file&nbsp;size&nbsp;must&nbsp;be:&nbsp;'<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$imgset<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'maxsize'<\/span><span style=\"color: #007700\">].&nbsp;<\/span><span style=\"color: #DD0000\">'&nbsp;KB.'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$re&nbsp;<\/span><span style=\"color: #007700\">.=&nbsp;<\/span><span style=\"color: #DD0000\">'The&nbsp;file:&nbsp;'<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'upload'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'name'<\/span><span style=\"color: #007700\">].&nbsp;<\/span><span style=\"color: #DD0000\">'&nbsp;has&nbsp;not&nbsp;the&nbsp;allowed&nbsp;extension&nbsp;type.'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;File&nbsp;upload&nbsp;path <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$f_name&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">setFName<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_SERVER<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'DOCUMENT_ROOT'<\/span><span style=\"color: #007700\">]&nbsp;.<\/span><span style=\"color: #DD0000\">'\/'<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$upload_dir<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">F_NAME<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">\".<\/span><span style=\"color: #0000BB\">$type<\/span><span style=\"color: #DD0000\">\"<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">0<\/span><span style=\"color: #007700\">); <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$uploadpath&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$upload_dir&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$f_name<\/span><span style=\"color: #007700\">; <br \/> <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #FF8000\">\/\/&nbsp;If&nbsp;no&nbsp;errors,&nbsp;upload&nbsp;the&nbsp;image,&nbsp;else,&nbsp;output&nbsp;the&nbsp;errors <br \/>&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">if(<\/span><span style=\"color: #0000BB\">$re&nbsp;<\/span><span style=\"color: #007700\">==&nbsp;<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">){ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(<\/span><span style=\"color: #0000BB\">move_uploaded_file<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'upload'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'tmp_name'<\/span><span style=\"color: #007700\">],&nbsp;<\/span><span style=\"color: #0000BB\">$uploadpath<\/span><span style=\"color: #007700\">))&nbsp;{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$url&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">$site<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">'ckeditor\/'<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$upload_dir&nbsp;<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$f_name<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$msg&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;<\/span><span style=\"color: #0000BB\">F_NAME&nbsp;<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">'.'<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">$type&nbsp;<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #DD0000\">'&nbsp;successfully&nbsp;uploaded!&nbsp;&gt;&gt;&gt;&nbsp;Size:&nbsp;'<\/span><span style=\"color: #007700\">.&nbsp;<\/span><span style=\"color: #0000BB\">number_format<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$_FILES<\/span><span style=\"color: #007700\">[<\/span><span style=\"color: #DD0000\">'upload'<\/span><span style=\"color: #007700\">][<\/span><span style=\"color: #DD0000\">'size'<\/span><span style=\"color: #007700\">]\/<\/span><span style=\"color: #0000BB\">1024<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #0000BB\">2<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">'.'<\/span><span style=\"color: #007700\">,&nbsp;<\/span><span style=\"color: #DD0000\">''<\/span><span style=\"color: #007700\">)&nbsp;.<\/span><span style=\"color: #DD0000\">'&nbsp;KB'<\/span><span style=\"color: #007700\">; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;[ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'url'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #0000BB\">$url <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;[ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'error'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;[ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'message'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Unable&nbsp;to&nbsp;upload&nbsp;the&nbsp;file!' <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">] <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>&nbsp;&nbsp;&nbsp;&nbsp;}else{ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #0000BB\">$response&nbsp;<\/span><span style=\"color: #007700\">=&nbsp;[ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'error'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;[ <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #DD0000\">'message'&nbsp;<\/span><span style=\"color: #007700\">=&gt;&nbsp;<\/span><span style=\"color: #DD0000\">'Error:&nbsp;'<\/span><span style=\"color: #007700\">.<\/span><span style=\"color: #0000BB\">$re <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/span><span style=\"color: #007700\">] <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]; <br \/>&nbsp;&nbsp;&nbsp;&nbsp;} <br \/>} <br \/> <br \/><\/span><span style=\"color: #FF8000\">\/\/&nbsp;Return&nbsp;response&nbsp;in&nbsp;JSON&nbsp;format <br \/><\/span><span style=\"color: #007700\">echo&nbsp;<\/span><span style=\"color: #0000BB\">json_encode<\/span><span style=\"color: #007700\">(<\/span><span style=\"color: #0000BB\">$response<\/span><span style=\"color: #007700\">); <br \/><\/span><span style=\"color: #0000BB\">?&gt;<\/span><\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/save-html-editor-content-in-database-php-mysql\/\">Save WYSIWYG Editor Content in Database using PHP and MySQL<\/a><\/p>\n<h2>Conclusion<\/h2>\n<p>Our example script helps you to add custom image upload functionality in CKEditor using PHP. It allows you to upload the images to the server and add them automatically to CKEditor. You can easily integrate the server-side image upload functionality in CKEditor without using any plugin.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CKEditor plugin provides the easiest way to add WYSIWYG Editor to the input field on the web form. Generally, the WYSIWYG editor is used to replace the textarea for submitting the HTML content. You can <\/p>\n","protected":false},"author":1,"featured_media":5504,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4],"tags":[324,66,14,299,170,67],"class_list":["post-3980","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php","tag-ckeditor","tag-javascript","tag-php","tag-plugin","tag-text-editor","tag-upload","cat-4-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Upload and Insert Image in CKEditor using PHP - CodexWorld<\/title>\n<meta name=\"description\" content=\"CKEditor image upload - Upload image to server and insert image in editor content using PHP. Example code to upload and insert image in CKEditor using PHP.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/ckeditor-upload-image-to-server-using-php\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Upload and Insert Image in CKEditor using PHP - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"CKEditor image upload - Upload image to server and insert image in editor content using PHP. Example code to upload and insert image in CKEditor using PHP.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/ckeditor-upload-image-to-server-using-php\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-02T20:34:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-05T09:31:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/05\/ckeditor-server-side-image-upload-using-php-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-upload-image-to-server-using-php\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-upload-image-to-server-using-php\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Upload and Insert Image in CKEditor using PHP\",\"datePublished\":\"2019-05-02T20:34:50+00:00\",\"dateModified\":\"2023-10-05T09:31:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-upload-image-to-server-using-php\\\/\"},\"wordCount\":536,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-upload-image-to-server-using-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/ckeditor-server-side-image-upload-using-php-codexworld.png\",\"keywords\":[\"CKEditor\",\"JavaScript\",\"PHP\",\"Plugin\",\"Text Editor\",\"Upload\"],\"articleSection\":[\"PHP\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-upload-image-to-server-using-php\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-upload-image-to-server-using-php\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-upload-image-to-server-using-php\\\/\",\"name\":\"Upload and Insert Image in CKEditor using PHP - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-upload-image-to-server-using-php\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-upload-image-to-server-using-php\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/ckeditor-server-side-image-upload-using-php-codexworld.png\",\"datePublished\":\"2019-05-02T20:34:50+00:00\",\"dateModified\":\"2023-10-05T09:31:17+00:00\",\"description\":\"CKEditor image upload - Upload image to server and insert image in editor content using PHP. Example code to upload and insert image in CKEditor using PHP.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-upload-image-to-server-using-php\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-upload-image-to-server-using-php\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-upload-image-to-server-using-php\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/ckeditor-server-side-image-upload-using-php-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/ckeditor-server-side-image-upload-using-php-codexworld.png\",\"width\":1920,\"height\":1080,\"caption\":\"ckeditor-server-side-image-upload-using-php-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/ckeditor-upload-image-to-server-using-php\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Upload and Insert Image in CKEditor using PHP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Upload and Insert Image in CKEditor using PHP - CodexWorld","description":"CKEditor image upload - Upload image to server and insert image in editor content using PHP. Example code to upload and insert image in CKEditor using PHP.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/ckeditor-upload-image-to-server-using-php\/","og_locale":"en_US","og_type":"article","og_title":"Upload and Insert Image in CKEditor using PHP - CodexWorld","og_description":"CKEditor image upload - Upload image to server and insert image in editor content using PHP. Example code to upload and insert image in CKEditor using PHP.","og_url":"https:\/\/www.codexworld.com\/ckeditor-upload-image-to-server-using-php\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2019-05-02T20:34:50+00:00","article_modified_time":"2023-10-05T09:31:17+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/05\/ckeditor-server-side-image-upload-using-php-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/ckeditor-upload-image-to-server-using-php\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/ckeditor-upload-image-to-server-using-php\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Upload and Insert Image in CKEditor using PHP","datePublished":"2019-05-02T20:34:50+00:00","dateModified":"2023-10-05T09:31:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/ckeditor-upload-image-to-server-using-php\/"},"wordCount":536,"commentCount":5,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/ckeditor-upload-image-to-server-using-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/05\/ckeditor-server-side-image-upload-using-php-codexworld.png","keywords":["CKEditor","JavaScript","PHP","Plugin","Text Editor","Upload"],"articleSection":["PHP"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/ckeditor-upload-image-to-server-using-php\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/ckeditor-upload-image-to-server-using-php\/","url":"https:\/\/www.codexworld.com\/ckeditor-upload-image-to-server-using-php\/","name":"Upload and Insert Image in CKEditor using PHP - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/ckeditor-upload-image-to-server-using-php\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/ckeditor-upload-image-to-server-using-php\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/05\/ckeditor-server-side-image-upload-using-php-codexworld.png","datePublished":"2019-05-02T20:34:50+00:00","dateModified":"2023-10-05T09:31:17+00:00","description":"CKEditor image upload - Upload image to server and insert image in editor content using PHP. Example code to upload and insert image in CKEditor using PHP.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/ckeditor-upload-image-to-server-using-php\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/ckeditor-upload-image-to-server-using-php\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/ckeditor-upload-image-to-server-using-php\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/05\/ckeditor-server-side-image-upload-using-php-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/05\/ckeditor-server-side-image-upload-using-php-codexworld.png","width":1920,"height":1080,"caption":"ckeditor-server-side-image-upload-using-php-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/ckeditor-upload-image-to-server-using-php\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Upload and Insert Image in CKEditor using PHP"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2019\/05\/ckeditor-server-side-image-upload-using-php-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-12c","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3980","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=3980"}],"version-history":[{"count":9,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3980\/revisions"}],"predecessor-version":[{"id":5505,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/3980\/revisions\/5505"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5504"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=3980"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=3980"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=3980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}