How do we paste photos into PHP text area using ck.editor?

Question

0.00/5 (No votes)

See more:

Just to check how can I paste image to a text area using ck editor as my plugin in PHP?

Is there any ready source that I can use as reference?

When I try to drag 'n drop an image in it, I'll see a green bar saying upload successful and for less then a second I see the image in the editor. Then a red bar is showing. saying: 'HTTP error occurred during file upload (404: File not found).

Here is part of my code,

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" 
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" 
crossorigin="anonymous">
    <link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384- 
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/Styles.css">
    <script src="ckeditor/ckeditor.js" type="text/javascript" ></script>


 <div class="form-group">
                                <textarea name="CommenterThoughts" class="form-control" rows="8" 
  cols="70"> </textarea>
                        </div>

Any sample code or help will greatly be appreciated.

Thank you.

What I have tried:

I have try create the upload button..
but prefer using copy and paste for easier input. Any source code that I can refer to will be great.

Thank you.

Posted 8-Mar-20 22:04pm

Member 14767261

Updated 9-Mar-20 14:10pm

Add a Solution

Comments

Richard MacCutchan 9-Mar-20 5:00am

404: File not found
That is the clue.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2020-03-09T10:11:00

Solution 1

The documentation explains the JavaScript configuration required, and how the dropped image is sent to the server:
Uploading Dropped or Pasted Files - CKEditor 4 Documentation[^]

The server-side code will essentially be a standard file upload script, except it needs to return a JSON response as detailed in the documentation.

JSON

{
    "uploaded": 1,
    "fileName": "foo.jpg",
    "url": "/files/foo.jpg"
}

Posted 9-Mar-20 10:11am

Richard Deeming

Comments

Member 14767261 10-Mar-20 3:56am

Sorry as am new to PHP, now sure how can I include the below code to my script. Where to write?

{
"uploaded": 1,
"fileName": "foo.jpg",
"url": "/files/foo.jpg"
}

Also, what to replace for the jpg file?

Is there any sample working example to see on how to write the code?

Thank you.

Richard Deeming 10-Mar-20 6:12am

You write a PHP script to handle the file upload and store the file somewhere on the server. You then return a JSON object with a similar structure to that representing the name and URL for the uploaded file.

I don't "do" PHP, so I can only point you to the manual:
PHP: Handling file uploads - Manual[^]
PHP: json_encode - Manual[^]

(I've handled CKeditor pasted images in ASP.NET Core, but that won't help you much.)