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

📅  最后修改于: 2021-08-29 12:05:22             🧑  作者: Mango

项目介绍:在本文中,我们将学习如何制作一个简单的文本编辑器 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访问源代码,并单击此处查看该项目的运行示例。