how to add rich text editor in php

Share on Facebook Twitter

2 years ago -   September 22, 2018

ckeditor,rich text editor,how to add text editor in html form,wysiwyg editor,rich text editor php

A rich text editor is a special kind of input element which offers to submit any HTML design or image in the database. HTML design means our text or image is written in the hypertext (under HTML tags) the rich text editor if we write anything then automatically it is wrapped inside HTML tags.

it is very useful in blog writing product description in e-commerce etc. if I gave a real example of rich text editor ie you may have seen many time is quora and full StackOverflow answer writing input box yaa this is called rich text editor so in this blog, I demonstrate how you add it in your PHP form page

Step 1: Download rich text-editor
there are many rich text editor found on the internet but the big challenge is which one I chose who work successfully for me and also free so after many downloads and unsuccessful install to it I got one so in next line I share a download link click on the download  button you can see a file name texteditor with zip extension  will be downloaded 

                           click on download button      download

Step 2: extract and install (add inside form page)
when the file is downloaded then extract it in text-editor following file, we have required

  under css folder:        1richtext.min.css            2. site.css            3. bootstrap.css

   under js folder              1. jquery.min.js                    2.jquery.richtext.js                                                           

now inside the text editor folder, we have  index.php in this file following HTML code you found. After the end of this code block, i have explained this code in brief 


<link rel="stylesheet" href="">

<link href="css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="css/site.css">
<link rel="stylesheet" href="css/richtext.min.css">

<script src="js/jquery.min.js"></script>
<script src="js/jquery.richtext.js"></script>

<div class="container-fluid">

<div class="row">
<div class="col-md-2">
<div class="col-md-8"> <h2>this is rich text editorh2> <form class="" action='' method="post" > <textarea id="php_post_text" name="php_post_text" placeholder="blog Description" class="form-control " style="display:none;">textarea> <textarea id ="y" class="form-control content" name="example">textarea> <input type="submit" value="TEST ME" class="btn btn-info " name="save_text" onclick="$('#php_post_text').val($('.content').val());"> <form> </div> <div class="col-md-2">
</div> <body> <script> $(document).ready(function(){ $('.content').richText(); }); </script> <html>

In this code block, you can see we have taken two text area first one id is php_post_text and another is our main text area on which text-editor appeared. 

due to some javascript applied erroneously its name attribute is become undefine so we have taken a pseudo text area and hide it. when the form will be submitted then the value of pseudo-text area will assign with the text-editor value we have to do this following javascript code use in submit button

step 3: testing of text-editor using the PHP post method
 // get value of text-editor and print
     echo $php_post_text;

ckeditor,rich text editor,rich text editor download,wysiwyg editor,rich text editor php,upload image in text editor

now you type any text on the text editor and click on TEST MEif you want to insert your HTML design then click on the menu and paste your code.

so download this and install in your project download link already in I have given in step 1

thank you

Whats new

how to make multiple selection in dropdown ( chosen select ) with select2 and ajax

11 month ago by techifind

how to make hand drawing effect for custom image in videoscribe using illustrator

2 years ago by techifind

how to remove noise from voice using fl studio

2 years ago by techifind

Subscribe to this blog and receive notifications of new posts by email.