如何使用 Javascript 和 HTML 创建文本编辑器？

项目介绍：在本文中，我们将学习如何制作一个简单的文本编辑器 JavaScript 应用程序，我们可以在其中操作不同样式的用户输入，编辑输入，大写等许多字符串操作。让我们看看实现。

方法：

创建按钮对div中的文本进行操作。
使用textarea 标签在 div 中创建 textarea 。
使用document.getElementById 方法选择元素。
然后使用 JavaScript 更改 CSS。

index.html



  

    
    Text Editor
    
    
    
    
    
  
    
    
    


  

    
        TEXT EDITOR
        
            
                
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                    
                
            
        
        

        
            
            
            
                
                                        
                
            
            
            
        
    
    

    

    Priyansh Jha 2021.

home.js

function f1() {
    //function to make the text bold using DOM method
    document.getElementById("textarea1").style.fontWeight = "bold";
}
  
function f2() {
    //function to make the text italic using DOM method
    document.getElementById("textarea1").style.fontStyle = "italic";
}
  
function f3() {
    //function to make the text alignment left using DOM method
    document.getElementById("textarea1").style.textAlign = "left";
}
  
function f4() {
    //function to make the text alignment center using DOM method
    document.getElementById("textarea1").style.textAlign = "center";
}
  
function f5() {
    //function to make the text alignment right using DOM method
    document.getElementById("textarea1").style.textAlign = "right";
}
  
function f6() {
    //function to make the text in Uppercase using DOM method
    document.getElementById("textarea1").style.textTransform = "uppercase";
}
  
function f7() {
    //function to make the text in Lowercase using DOM method
    document.getElementById("textarea1").style.textTransform = "lowercase";
}
  
function f8() {
    //function to make the text capitalize using DOM method
    document.getElementById("textarea1").style.textTransform = "capitalize";
}
  
function f9() {
    //function to make the text back to normal by removing all the methods applied 
    //using DOM method
    document.getElementById("textarea1").style.fontWeight = "normal";
    document.getElementById("textarea1").style.textAlign = "left";
    document.getElementById("textarea1").style.fontStyle = "normal";
    document.getElementById("textarea1").style.textTransform = "capitalize";
    document.getElementById("textarea1").value = " ";
}

HTML 代码说明：这里我们在文档中添加了不同的按钮，它们将在 JavaScript 的帮助下获得执行我们赋予它的某些任务的能力。我们添加了用于更改输入字符串的字体粗细、字体样式、字符串的文本对齐方式的按钮，并将使用文档对象模型转换字符串。我们添加了一些基本的 CSS 来美化文档，您可以使用不同的 CSS 属性来使其更好看。在 HTML 代码的下面部分，我们添加了一个文本字段，用户可以在其中写下输入字符串。所以，我们已经准备好我们项目的所有设计和结构，现在我们需要做的就是使用 JavaScript 赋予它权力。因为，现在我们有一个文本框和多个按钮，用于在字符串输入中应用不同的样式。

主页.js

function f1() {
    //function to make the text bold using DOM method
    document.getElementById("textarea1").style.fontWeight = "bold";
}
  
function f2() {
    //function to make the text italic using DOM method
    document.getElementById("textarea1").style.fontStyle = "italic";
}
  
function f3() {
    //function to make the text alignment left using DOM method
    document.getElementById("textarea1").style.textAlign = "left";
}
  
function f4() {
    //function to make the text alignment center using DOM method
    document.getElementById("textarea1").style.textAlign = "center";
}
  
function f5() {
    //function to make the text alignment right using DOM method
    document.getElementById("textarea1").style.textAlign = "right";
}
  
function f6() {
    //function to make the text in Uppercase using DOM method
    document.getElementById("textarea1").style.textTransform = "uppercase";
}
  
function f7() {
    //function to make the text in Lowercase using DOM method
    document.getElementById("textarea1").style.textTransform = "lowercase";
}
  
function f8() {
    //function to make the text capitalize using DOM method
    document.getElementById("textarea1").style.textTransform = "capitalize";
}
  
function f9() {
    //function to make the text back to normal by removing all the methods applied 
    //using DOM method
    document.getElementById("textarea1").style.fontWeight = "normal";
    document.getElementById("textarea1").style.textAlign = "left";
    document.getElementById("textarea1").style.fontStyle = "normal";
    document.getElementById("textarea1").style.textTransform = "capitalize";
    document.getElementById("textarea1").value = " ";
}

JavaScript 代码说明：
这里我们使用 DOM 选择元素。然后我们使用document.getElementById 方法选择特定元素，然后在使用其 ID 名称选择特定元素后，我们通过 JavaScript 操作其 CSS。最后，我们创建了一个使一切恢复正常的函数，其中丢弃使用我们提供的按钮应用的所有属性。

输出：

输出屏幕图像

您可以向该项目添加更多功能，例如更改字体大小、计算字母数量、文本区域内的单词、更改字体样式等等。一定要试一试。
您可以从Github访问源代码，并单击此处查看该项目的运行示例。