New to our community ?

Discover a world of possibilities! Join us and explore a vibrant community where ideas flourish and connections thrive.

One of Our Valued Members

Thank you for being part of our community. Your presence enriches our shared experiences. Let's continue this journey together!

Home php codes How to use CKEditor as form input?

How to use CKEditor as form input?

0
How to use CKEditor as form input?

Welcome back to shortlearner.com, today in this post we will see how to integrate ckeditor in our web based projects.
so before start the integration we should take an small overview and knowing the amazing benefits and features of CKeditor.
most of the time we need an editor that will help us to bold, italic and underline the paragraph and also help us to upload multiple images with in the paragraph.

ckeditor complete code

Amazing Features

  • Applying Styles to Editor Content
  • Applying Block-Level Text Formats
  • Basic Text Styles: Bold, Italic and More
  • HTML Output Formatting
  • Inserting Code Snippets
  • Pasting Content from Microsoft Word
  • Removing Text Formatting
  • Setting Text and Background Color
  • Source Code Editing
  • Table Creation
  • Using the Copy Formatting Feature

Also Read
How to Install PHP on CentOS.
How to Send Attachment on mail using PHP.

PHP Login Script With Remember me.
Unable to create a directory a wordpress error

How to Integrate

It is very easy to implement the features of CK Editor in our web application.
just follow the below steps

step1
Add this CKeditor JavaScript file at head section of our web page

<script src="https://cdn.ckeditor.com/4.13.0/standard/ckeditor.js"></script>

Step2
Now we will add our textarea tag and a small lines of JavaScript code.

<textarea name="editor1"></textarea>
 <script>
     CKEDITOR.replace( 'editor1' );
 </script>

Complete Code


 <html>
     <head>
   <meta charset="utf-8">
    <title>CKEditor Tutorial by shortlearner.com</title>
  <script src="https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>
    </head>
   <body>
  <textarea name="editor1"></textarea>

  <script>
    CKEDITOR.replace( 'editor1' );
  </script>
   </body>
</html>

Demo