How to create an online Text Editor using Html & Js
It is easy to understand the basics of programming by doing simple programming projects. Here, I am going to explain how to make a basic text editor like in MS word in an easy way. I have used html and js to create this simple project.
Functions in this editor are :
- Bold
- underline
- italic
- alignments
- undo and redo
Step 1:
Create a new folder and open it with brackets. If you don't have brackets editor, download it here. In brackets, create an html file.
Step 2:
Form the basic structure of the html & add the script which contains access to icons package from fontawesome between the head tags.:
<!DOCTYPE html>
<html>
<head>
<title> Online Text Editor </title>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body> </body>
</html>
Step 3:
Create a <div> and put all buttons inside the div. Then create an <iframe> which will be used as an editor to give input.
<!DOCTYPE html>
<html>
<head>
<title> Online Text Editor </title>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body onload="enableEditMode();">
<div>
<button onclick="execCmd('bold')"><i class="fas fa-bold"> </i></button>
<button onclick="execCmd('underline')"><i class="fas fa-underline"> </i></button>
<button onclick="execCmd('italic')"><i class="fas fa-italic"> </i></button>
<button onclick="execCmd('justifyLeft')"><i class="fas fa-align-left"> </i></button>
<button onclick="execCmd('justifyCenter')"><i class="fas fa-align-center"> </i></button>
<button onclick="execCmd('justifyRight')"><i class="fas fa-align-right"> </i></button>
<button onclick="execCmd('justifyFull')"><i class="fas fa-align-justify"> </i></button>
<button onclick="execCmd('undo')"><i class="fas fa-undo"> </i></button>
<button onclick="execCmd('redo')"><i class="fas fa-redo"> </i></button>
</div> <br>
<iframe name="richTextField" style="width: 1000px ; height: 500px"></iframe>
</body>
</html>
Step 4:
Now create the Javascript functions to let the frame editable and make the buttons work below the <iframe> tag.
<script type="text/javascript">
function enableEditMode(){
richTextField.document.designMode = 'on';
}
function execCmd(command){
richTextField.document.execCommand(command, false, null);
}
</script>
- iframe : used to create an inline frame.
- document.designMode : Controls the editability of the frame.
- execCommand() : when an html document becomes editable using designMode, execCommand() is used to run commands that makes changes in the editable region.
No comments:
Post a Comment