How to submit text from CkEditor to database


#1

Hello

can anyone let me know how can i install ckeditor and submit content to blog post

currently i have done some work and install the ckeditor but not able to find out how to submit the content in db and show in page like blog posts

i have added the following code

<script src="../admin/editor/ckeditor.js"></script>
 <script type="text/javascript" src="../admin/editor/ckeditor.js"></script>


			 <form method="post">
		<p>
			
			<textarea id="editor1" name="editor1"> </textarea>
			<script type="text/javascript">
				CKEDITOR.replace( 'editor1' );
			</script>
		</p>
		<p>
			<input type="submit" />
		</p>
	</form>

please let me know what should i do further to submit the content

thanks


#2

First you have to choose a DBMS like Postgres, MySQL or SQLite. Just lookup some comparison sites. Then you have to install it, for Postgres and MySQL as a seperate service, for SQLite you have to compile PHP with the module. Then within your PHP script you can connect to your DBMS via PDO. Have a research for basic PDO usage and find out how to use SQL. After that you can start handling data from form requests.


#3

working example


#5

sorry for the late reply due to some issue was not able to reply please let me know how should i connect editor with my panel

thanks


#6

without knowing what you already have in place it is going to be pretty hard for anyone to help. Do you have a database? what type is it? Do you have custom scripts to add blog posts or are you using something like wordpress?

CKeditor basically just converts text you write into a text area into html so what you do with that is then up to you. You just submit it like a normal form variable so if you have a form already that upload plain text into a blog post just apply the ckeditor script to the input fields you want to be html.

If you don’t yet have a database setup and don’t know how to insert data then it is going to be a fair bit of work getting up to speed as you will not only have to know how to insert it but you’ll need to know how to get it back and all the security issues that surround it. It’s obviously not impossible but knowing where you are at at the moment would be a good start.


#7

yes i have mysql


#8

Why are you loading the ckeditor.js file twice?

There’s a help page on the CKEditor website that explains how to retrieve and save the data:


#9

i have the ck editor in the page but need to know how to submit the content to db within its category for that i need hellp

This is the editor img

mostly have done what is there in the https://ckeditor.com/docs/ckeditor4/latest/guide/dev_savedata.html


#10

which steps have you done? what was the result?


#11

i have put the code above nothing more is done yet


#12

You need to grab the data entered into the POST field once the form has been submitted and enter that data into your database.

If you’re not sure how to do that, then you should probably watch/read a few online tutorials about PHP and MySQL, there are lots here on this very website.


#13

any best link/tutorials for that


#14

@srsingh83. Hi do you have any experience using mysql and php?


#15

some


#16

@srsingh83. Ok lets try to make this work step by step

First observation: In the form the action attribute is missing. Or do you have any php or javascript in the same particular handling the form proccessing?


#17

Hello @srsingh83

Once done, it can be repeated quite easily, but connecting the many moving parts of a webpage with a server is always a challenge :slight_smile:

So there are only a few concepts required to understand how to talk to a server.

You need to send a request to your server that gets processed there.

Where is your form located?
There is no action set on the form.
That means, if you hit that submit button, the same page will reload and try consume the formdata you sent.

Preparing the Request
The CKEditor installs itself to the textarea with the name set to editor1. This is the label of the data you send with the form.
If you have preselected the category, you can use a hidden form field that also sends the category.

<input type="hidden" name="category" value="videos">

I prepared a little codepen here, that shows what has been posted: https://codepen.io/MartinMuzatko/pen/GYXGYJ
image

This is what you send to the server when you do a POST submit:


You can see that yourself using the browsers built-in web developer tools. (F12 or CTRL+SHIFT+I)
This helps a lot to find out if the request was correctly sent.

So now to processing the request

PHP is very very foreign in how it processes requests.

Decent HTTP frameworks like NodeJS Express will be able to read the body with request.body, no matter what the content-type is (when you send forms, it will be by default application/x-www-form-urlencoded or with file uploads, it will be multipart/form-data. But with PHP, you need to know a few special exceptions.

According to http://php.net/manual/en/reserved.variables.post.php you can use $_POST.

An associative array of variables passed to the current script via the HTTP POST method when using application/x-www-form-urlencoded or multipart/form-data as the HTTP Content-Type in the request.

So as long as you only use that form, you will not have any trouble.

Get the content of the form submission request via $_POST['editor1'].

Then write to the database
PDO is database agnostic. It can speak to any SQL database.
http://php.net/manual/en/class.pdo.php
If you use mysql, you can straight jump into using mysqli directly:
http://php.net/manual/en/class.mysqli.php

Here is a tutorial by PHP: http://php.net/manual/en/mysqli.examples-basic.php

Then you should be able to INSERT the data once you have a connection established.
Don’t forget to escape the content: http://php.net/manual/en/function.mysqli-escape-string.php
Otherwise anyone using your website will be able to do anything with the database.

Summary

I will write a blog post regarding this topic to refine and share this knowledge with everyone. Only these very few key concepts are required to know how to send and process the data.