1. Techno

How to replace html textarea to text editor


Textarea is used to write a lot of content because HTML Textarea provides a bigger box. In this tutorial, we will replace HTML Textarea with a text editor using CKEditor.CKEditor is one of the famous text editor for web development. CKEditor provides a lot of plugins to design content. If you are looking for a free text editor for your website or blog system then you can use CKEditor. 

How to replace textarea with a text editor – 

CKEditor provides a library or CDN link to replace textarea with text editor. You can easily download CKEditor or direct link using CKEditor CDN. 
Let’s convert HTML Textarea to a text editor – 

How to replace HTML Textarea with text editor using the CKEditor CDN link (Without downloading the CKEditor library)- 

You can replace Textarea with text editor without downloading the CKEditor library – 
Create an index.html file – 

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Replace HTML textarea to Texteditor in HTML </title>
<script src="https://cdn.ckeditor.com/4.19.1/standard/ckeditor.js"></script>
</head>
<body>
<h1> Replace HTML textarea to Texteditor in HTML  </h1>
<form>
	<label> Content </label> <br> 
	<textarea name="content" rows="5" cols="80"></textarea>
 <script>
 CKEDITOR.replace('content');
</script>
</form>
</body>
</html>

In the code above, we linked the CKEditor CDN link and replaced Textarea to text-editor. Execute the index.html file on your browser. 

How to replace HTML Textarea to text editor using CKEditor library (Download CKEditor library)- 

Replacing a textarea to a text editor without downloading the library is not a standard way to do that. 
Now, we will download the CKEditor library and change textarea to a text editor – 
1. First of all, go to the CKEditor website –  
2. Download a ready-to-use CKEditor package -  You will see three packages – Basic, standard, and full or you can customize CKEditor plugins according to your needs but we would like to download the standard package. Download CKEditor standard package. 
3. Extract the zip file where you want to use it. 
Link ckedior.js file. You can see the ckeditor.js file in the library. 

index.html 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Replace HTML textarea to Texteditor in HTML </title>
 <script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<h1> Replace HTML textarea to Texteditor in HTML  </h1>
<form>
	<label> Content </label> <br> 
	<textarea name="content" rows="5" cols="80"></textarea>
 <script>
 CKEDITOR.replace('content');
</script>
</form>
</body>
</html>

Now, execute the index file. In this way, you can replace HTML Textarea to text editor. Now, you can use many format plugins and design your text using CKEditor. 


Please Share

Recommended Posts:-