JQuery How To Create A Text Editor Part 1 ( Video Tutorial )

[aymenz]

Image Source

What Will I Learn?

I will learn how to create a text editor by buttons and textarea part 1.

• How to add some buttons and textarea and give them some CSS proprieties , then create some classes ' .bold , .italic and .underline ' .
• How to get the textarea and button element in a variable and check if it equals to the value that you want we add the class by toggleClass .
• How to modify the CSS propriety to set the align of the text to right , left or center .

Requirements

• Basic knowledge of JavaScript language .
• Knowledge of JQuery .
• Has the min jquery file .
• Has an editor text .

Difficulty

• Basic

Description

In this video I will show you how to create a text editor to create an object in your site or something like that , so how to do it ?

HTML page :

In my HTML page I created some buttons (bold button by letter b , Underline by the letter U , Italic by letter i , Right by the letter R , Cneter by the letter C and finally the letter L to the left side ) and the text area to type our text .

CSS page :

In my CSS file I specified the div by the background color and black border also I gave the textarea height and width , finally I added 3 classes '.bold' with the font-weight : bold , '.italic' with the font-style:italic and '.underline' with the text-decoration:underline to use them in the JQuery file .

JQuery page :

• In my JQuery file I get the textarea and the button in a variables , and when we click on the button I test if the value of this button equals to ' b ' so I will use the bold style I created the CSS style named .bold so I give this style to the textarea by ' toggleClass ' if we click on B this class will show on the textarea if we click again it will be hidden , the same thing for the others .
• In the right , center and left buttons I modified the CSS propriety ' textAlign ' to the side that I want ' right , left or center ' .

Video Tutorial

Curriculum

• JQuery How To Show And Hide Password To Confirm It ' Convert Type ' ( Video Tutorial )
  
• JQuery Create a Scroll to Top Button Based by The Scroll Function ( Video Tutorial )
  

---

Posted on Utopian.io - Rewarding Open Source Contributors

---

Comments

[cha0s0000]

Your contribution cannot be approved because it does not follow the Utopian Rules.

• Your contribution can be rejected if the moderator provides a link to another tutorial that covers the same topic better.
• You have contributed a lot ,but it seems some of your contributions are quite simple amd easy. Since you have knowledge of coding especially in jquery,why not create more creative and unique contributions .
• Thanks and hope for your next high quality contributions

You can contact us on Discord.
[utopian-moderator]

[aymenz]

How ! it means if you find a video that cover the same topic better in YouTube or in any website you will reject my contribution ? I knew only in utopian io not in YouTube or another website !