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