javascript制作简单的富文本，基本功能都实现，除了上传图片只能用URL

news2024/11/25 2:57:49

//所有的图标用的字符，以后可以换成网上的css-icon图标库的图标，再设置一下css样式即可简单的使用
//这里所有的标签元素都是直接获取，没有使用委托，如果使用委托性能会更好，这里只做了简单的清理，让内存回收

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8"></html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link type="text/css" href="public/css/test.css" rel="stylesheet"/>
        <script type="text/javascript" src="common.js"></script>
        
        <title>制作富文本的测试页面</title>
        <style type="text/css">
            #containerIframe
            {
              width: 600px;
              height: 600px;
              margin: 0 auto;
              margin-top: 10px;
              font-size: 1em;
              border: 1px solid #ccc;
             
            }
            #containerIframe #toolbar 
            {
              height: 30px;
              background-color: #C0C0C0;
              width: 100%;
            }
            #toolbar a
            {
              margin-right: 2px;
              margin-left: 5px;
              line-height: 1.95em;
              font-size: 0.875em;
            }
            #toolbar a:link
            {
              text-decoration: none;
              color: #333333;
            }
            #heading
            {
              list-style: none;
              margin: 0;
              padding: 0;
              font-size: 1em;
              position: relative;
              top: 0px;
              left: 55px;
              width: 30px;
              background-color: #ccc;
            }
            #heading li
            {
              width: 25px;
              height: 20px;
              text-align: center;
            }
            .clear 
            {
              clear:both;
            }
   
        </style>
 
    </head>
    <body>
      <div id="containerIframe">
        <div id="toolbar">
          <a href="Javascript:void(0)" data-type="B" title="字符加粗">B</a>
          <a href="Javascript:void(0)" data-type="I" style="font-style:italic" title="斜体">I</a>
          <a href="Javascript:void(0)" data-type="U" style="text-decoration:underline" title="字符下划线">U</a>
          <a href="Javascript:void(0)" data-type="H" title="标题">H</a>
          <a href="Javascript:void(0)" data-type="left" title="字符居左">左</a>
          <a href="Javascript:void(0)" data-type="center" title="字符居左">中</a>
          <a href="Javascript:void(0)" data-type="right" title="字符居右">右</a>
          <a href="Javascript:void(0)" data-type="P" title="插入段落">P</a>
          <a href="Javascript:void(0)" data-type="indent" title="缩进文本">缩</a>
          <a href="Javascript:void(0)" data-type="outdent" title="减少缩进">凸</a>
          <a href="Javascript:void(0)" data-type="forecolor" title="文本颜色">色</a>
          <a href="Javascript:void(0)" data-type="removeformat" title="删除粘贴样式">清理</a>
          <a href="Javascript:void(0)" data-type="createlink" title="创建URL">URL</a>
          <a href="Javascript:void(0)" data-type="unlink" title="删除URL">删除URL</a>
          <a href="Javascript:void(0)" data-type="ollist" title="有序排列">有序</a>
          <a href="Javascript:void(0)" data-type="lilist" title="无序排列">无序</a>
          <a href="Javascript:void(0)" data-type="image" title="插入图片">图片</a>

          <ul id="heading" style="display:none;">
            <li><a href="Javascript:void(0)" data-type="h1">h1</a></li>
            <li><a href="Javascript:void(0)" data-type="h2">h2</a></li>
            <li><a href="Javascript:void(0)" data-type="h3">h3</a></li>
            <li><a href="Javascript:void(0)" data-type="h4">h4</a></li>
            <li><a href="Javascript:void(0)" data-type="h5">h5</a></li>
          </ul>
        </div> 
       <iframe name="richedit" style="height:100%;width:100%;" src="" frameborder="0" allowTransparencty="true" id="edit" scrolling="no"></iframe>     
       <input type="submit" name="submit1" value="提交" />   
      </div>
    
    <script type="text/javascript">
      //获取到iframe框架
      var edit=document.getElementById("edit");
      //这句是获取到iframe框架下的文档document或window,兼容IE
      editPane=edit.contentDocument|| edit.contentWindow.document;

      editPane.designMode="on";
      editPane.open();
      editPane.write('<p color="black" size=+0.7 class="editor">编辑区</p>');
      editPane.close();
      //工具标签
      var toolbar=document.getElementById("toolbar");
      //获取工具标签下面所有的a标签
      var a=toolbar.getElementsByTagName("a");
      var heading=document.getElementById("heading");
      for(var i=0,len=a.length;i<len;i++)
      {
        //循环得到特征data-type的值
        switch(a[i].getAttribute("data-type"))
        {
          case "B": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("Bold",false,null);
            });
            break;
          case "I": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("italic",false,null);
            });  
            break;
          case "U": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("underline",false,null);
            }); 
            break;
          case "H": 
            EventUtil.addHandler(a[i],"click",function(){
              if(heading.style.display=="none")
              {
                heading.style.display="block";
              }else
              {
                heading.style.display="none";
              }
                //循环H标签的菜单，点击谁则相应的设置成谁
                var ha=heading.getElementsByTagName("a");
                for(var j=0,leng=ha.length;j<leng;j++)
                {
                  switch(ha[j].getAttribute("data-type"))
                  {
                    case "h1": 
                      
                      EventUtil.addHandler(ha[j],"click",function(){
                        var format=editPane.queryCommandValue("formatBlock");
                        console.log(format);
                        if(format.toLowerCase()==="p")
                        {
                          editPane.execCommand("formatBlock",false,"h1");
                          
                        }else
                        {
                          editPane.execCommand("formatBlock",false,"p");
                          
                        }
                        heading.style.display="none";
                      });
                      
                      break;
                      case "h2": 
                      
                      EventUtil.addHandler(ha[j],"click",function(){
                        var format=editPane.queryCommandValue("formatBlock");
                        if(format.toLowerCase()==="p")
                        {
                          editPane.execCommand("formatBlock",false,"h2");
                          
                        }else if(format.toLowerCase()==="h1" || format.toLowerCase()==="h3" ||format.toLowerCase()==="h4"||format.toLowerCase()==="h5")
                        {
                          editPane.execCommand("formatBlock",false,"h2");
                          
                        }else
                        {
                          editPane.execCommand("formatBlock",false,"p");
                        }
                        
                        heading.style.display="none";
                      });
                      
                      break;  
                      case "h3": 
                      
                      EventUtil.addHandler(ha[j],"click",function(){
                        var format=editPane.queryCommandValue("formatBlock");
                        if(format.toLowerCase()==="p")
                        {
                          editPane.execCommand("formatBlock",false,"h3");
                          
                        }else
                        {
                          editPane.execCommand("formatBlock",false,"p");
                          
                        }
                        heading.style.display="none";
                      });
                      
                      break;
                      case "h4": 
                      
                      EventUtil.addHandler(ha[j],"click",function(){
                        var format=editPane.queryCommandValue("formatBlock");
                        if(format.toLowerCase()==="p")
                        {
                          editPane.execCommand("formatBlock",false,"h4");
                          
                        }else
                        {
                          editPane.execCommand("formatBlock",false,"p");
                          
                        }
                        heading.style.display="none";
                      });
                      
                      break;
                      case "h5": 
                      
                      EventUtil.addHandler(ha[j],"click",function(){
                        var format=editPane.queryCommandValue("formatBlock");
                        if(format.toLowerCase()==="p")
                        {
                          editPane.execCommand("formatBlock",false,"h5");
                          
                        }else
                        {
                          editPane.execCommand("formatBlock",false,"p");
                          
                        }
                        heading.style.display="none";
                      });
                      
                      break;

                  }
                }
                ha=null;
                
            }); 
            break;

          case "left": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("JustifyLeft",false,null);
            }); 
            break; 

          case "center": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("JustifyCenter",false,null);
            }); 
            break; 

          case "right": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("JustifyRight",false,null);
            }); 
            break;  
          
          case "P": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("insertparagraph",false,"p");
            }); 
            break; 
           //增加缩进 
          case "indent": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("indent",false,null);
            }); 
            break;  
          //减少缩进  
          case "outdent": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("outdent",false,null);
            }); 
            break;
            //为字体设置颜色，这里只设置了红色，以后可以像h标签一样添加
          case "forecolor": 
            EventUtil.addHandler(a[i],"click",function(){
              editPane.execCommand("forecolor",false,"red");
            }); 
            break;
          //清除粘贴过来的样式，和自己设置的模式  
          case "removeformat": 
            EventUtil.addHandler(a[i],"click",function(){
              //首先获取到范围内的p元素标签有多少个
              var p=editPane.getElementsByTagName("p");
              
              //循环p元素
                for(var l=0,leng=p.length;l<leng;l++)
                {
                  //检查P元素下面是否有子节点
                  if(p[l].children.length>0)
                  {
                    //循环子节点
                    for(var a=0,lengg=p[l].children.length;a<lengg;a++)
                    {
                      //获取子节点的名称是否等于span
                      if(p[l].children[a].tagName.toLowerCase()==="span")
                      {
                        //检查span是否有style特征，如果有则删除style
                        var att=p[l].children[a].getAttribute("style");
                        if(att)
                        {
                          
                          p[l].children[a].removeAttribute("style");
                        }
                        //继续循环，因为清理时一般都会按多次，这里就是多次清理
                        continue;
                      }else
                      {
                        editPane.execCommand("removeformat",false,"span");
                      }
                    }

                    //如果没有子节点则直接清理p标签的style
                  }else
                  {
                    if(p[l].getAttribute("style"))
                    {
                      p[l].removeAttribute("style");
                    }
                  }
                }

              editPane.execCommand("removeformat",false,"style");
              p=null;
            }); 
             
            break; 
          //创建文本的url
          case "createlink": 
            EventUtil.addHandler(a[i],"click",function(){
              var result=prompt("输入你的本地URL或外链","");
              if(result !==null)
              {
                editPane.execCommand("createlink",false,result);
              }
              
            }); 
            break;  
          //清除url连接
          case "unlink": 
            EventUtil.addHandler(a[i],"click",function(){
                editPane.execCommand("unlink",false,null);

            }); 
            break;
           //有序排列 
          case "ollist": 
            EventUtil.addHandler(a[i],"click",function(){
                editPane.execCommand("insertorderedlist",false,null);

            }); 
            break;  
          //无序排列  
          case "lilist": 
            EventUtil.addHandler(a[i],"click",function(){
                editPane.execCommand("insertunorderedlist",false,null);

            }); 
            break;
            //插入图片，占时只能插入图片的URL，本地上传用xrh还未做
          case "image": 
            EventUtil.addHandler(a[i],"click",function(){

               var result=prompt("输入你的图片连接","");
              if(result !==null)
              {
                editPane.execCommand("insertimage",false,result);
              }

            }); 
            break;  
        }
      }
      
      //模拟将iframe框架中格式化的文本赋值给表单的字段，以便存入数据库
      var button=document.getElementsByName("submit1")[0];
      EventUtil.addHandler(button,"click",function(){
        var text=editPane.body.innerText;
        console.log(text);
      });
      
     

      edit=null;
      toolbar=null;
      a=null;
     
    </script>
           
    </body>
</html>

//最后实现的样式
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1071210.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

操作系统对内存的管理：分配与回收，虚拟内存，内存容量的扩充，内存保护，补充（链接方式、装入方式）

操作系统对内存的管理：分配与回收，虚拟内存，内存容量的扩充，内存保护，补充（链接方式、装入方式）

内存&#xff1a;即内存条&#xff0c;也称主存储器&#xff08;简称主存&#xff09;&#xff0c;用于存放数据。 为了缓和CPU和外存&#xff08;磁盘&#xff09;的速度矛盾&#xff0c;外存的程序先放入内存才能被CPU处理。 内存地址从0开始&#xff0c;每个内存地址对应一…
阅读更多...
以太网基础学习（三）——UDP协议

以太网基础学习（三）——UDP协议

一、UDP协议概述 UDP&#xff08;User Datagram Protocol&#xff0c;用户数据报协议&#xff09;是一种无连接协议&#xff0c;它不像TCP协议那样需要在发送和接收数据前进行握手和释放&#xff0c;而是直接把数据发送出去&#xff0c;也不会对数据进行可靠传输和流量…
阅读更多...
ARM_汇编流水灯

ARM_汇编流水灯

ARM_汇编流水灯 .text .global _start _start: 设置GPIOE寄存器的时钟使能ldr r0,0x50000A28ldr r1,[r0] 从r0为起始地址的4字节数据取出存入r1orr r1,r1,#(0x01<<4) 第4位设置为1 表示开启时钟使能orr r1,r1,#(0x01<<5) 第5位设置为1 表示开启时钟使能str r1…
阅读更多...
求推荐好用的可视化大屏软件？强推奥威BI

求推荐好用的可视化大屏软件？强推奥威BI

在博览中心、会议中心、监控中心等场合下&#xff0c;经常看到很多炫酷的企业可视化大屏&#xff0c;将复杂的企业数据可视化展现&#xff0c;高大上、实用性一个不缺。那&#xff0c;可视化大屏做得好的软件有哪些&#xff1f;首推奥威BI软件。 奥威BI软件&#xff1a;零编程…
阅读更多...
ST表(RMQ问题)

ST表(RMQ问题)

ST表能够O(1)地解决区间[l,r]之间最值问题 1.建表&#xff0c;首先明白ST[i][j]&#xff0c;表示的是区间[i, i(1<<j)-1]的最值&#xff0c;区间大小为2^j。首先初始化ST[i][0]a[i]。 void init&#xff08;&#xff09;{for(int i1; i<n; i){ST[i][0]a[i];} } 因为…
阅读更多...
如何配置防火墙？看这篇就够了

如何配置防火墙？看这篇就够了

大家好&#xff0c;我是老杨。 在互联网时代&#xff0c;网络安全的问题不用多说了&#xff0c;配置防火墙是非常必要的。 在网络的世界里&#xff0c;要由防火墙过滤的就是承载通信数据的通信包。 防火墙是位于内部网和外部网之间的屏障&#xff0c;也是系统的第一道防线。…
阅读更多...
06.数据解析-xpath

06.数据解析-xpath

1、什么是xpath ​ XPath (XML Path Language) 是一门在 HTML\XML 文档中查找信息的语言&#xff0c;可用来在 HTML\XML 文档中对元素和属性进行遍历。 W3School官方文档&#xff1a;http://www.w3school.com.cn/xpath/index.asp 2、认识xml 知识点&#xff1a; html和xml…
阅读更多...
如何使用 Xunit 框架进行单元测试和集成测试

如何使用 Xunit 框架进行单元测试和集成测试

在软件开发过程中&#xff0c;测试是至关重要的一环。测试驱动开发&#xff08;Test-Driven Development&#xff0c;TDD&#xff09;是一种常用的开发方法论&#xff0c;它强调在编写代码之前先编写测试用例&#xff0c;然后通过不断迭代的方式来实现功能。为了帮助开发者更好…
阅读更多...
解决项目报错：@org.springframework.beans.factory.annotation.Autowired(required=true)

解决项目报错：@org.springframework.beans.factory.annotation.Autowired(required=true)

项目使用mybatis&#xff0c;启动时报错&#xff1a; Description: Field toolsDetailsService in com.cvit.applet.controller.ToolsDetailsController required a bean of type com.cvit.applet.mapper.ToolsDetailsMapper that could not be found. The injection point has…
阅读更多...
上门按摩小程序｜同城上门按摩软件开发｜上门按摩系统；

上门按摩小程序｜同城上门按摩软件开发｜上门按摩系统；

上门按摩小程序的开发具有许多优势&#xff0c;下面就给大家介绍下按摩小程序功能: 上门按摩小程序的优势 方便快捷&#xff1a;上门按摩小程序提供在线预约服务&#xff0c;用户可以通过手机随时随地预约按摩师上门服务&#xff0c;避免了传统预约方式的繁琐和不确定性。 个性…
阅读更多...
面向对象设计-UML六种箭头含义

面向对象设计-UML六种箭头含义

目录 UML概述UML语义UML表示法 六种常用关系标识方法泛化实现依赖关联聚合组合 本文参考文章 https://blog.csdn.net/qq_25091281/article/details/123801862 UML概述 UML (Unified Modeling Language)为面向对象软件设计提供统一的、标准的、可视化的建模语言。适用于描述以…
阅读更多...
Vue、js底层深入理解笔记

Vue、js底层深入理解笔记

文章目录 1. Vue中列表组件的key值有什么作用&#xff1f;2. [1, 2, 3].map(parseInt)结果 1. Vue中列表组件的key值有什么作用&#xff1f; 这个是修改数组的情况下 还有增删的情况下 删除12&#xff0c;添加67 结果 带key的dom节点发生改变&#xff0c;内容未改变 不带key…
阅读更多...
Linux: 基础IO

Linux: 基础IO

学习目标 1.C接口与系统调用接口的差别 2.文件描述符, 重定向, 一切皆文件, 缓冲区 3.fd与FILE, 系统调用和库函数的关系 4.系统中的inode 5.软硬链接 6.动静态库 预备知识 1.文件 内容 属性 2.文件的所有操作: a. 对内容的操作 b.对属性的操作 3.文件在磁盘(硬件)上, 我…
阅读更多...
通过IP地址管理提升企业网络安全防御

通过IP地址管理提升企业网络安全防御

在今天的数字时代&#xff0c;企业面临着越来越多的网络安全威胁。这些威胁可能来自各种来源&#xff0c;包括恶意软件、网络攻击和数据泄露。为了提高网络安全防御&#xff0c;企业需要采取一系列措施&#xff0c;其中IP地址管理是一个重要的方面 1. IP地址的基础知识 首先&a…
阅读更多...
04训练——基于YOLO V8的自定义数据集训练——训练结果说明

04训练——基于YOLO V8的自定义数据集训练——训练结果说明

YOLOv8的训练执行情况指标说明 运行YOLO V8的训练代码将会看到以下执行的情况。 在上图中，我们可以看到每一轮训练的指标情况，YOLOv8训练过程中的输出指标具体介绍如下： • Epoch: 当前的训练轮数，一轮表示所有的训练数据都被模型处理一次。例如，1/100表示第一轮训练，总…
阅读更多...
高效截屏方法，你值得拥有！在Windows10中截屏的3种方法

高效截屏方法，你值得拥有！在Windows10中截屏的3种方法

本文介绍如何在Windows 10中捕获屏幕截图&#xff0c;包括使用键盘组合、使用Snipping Tool、Snipp&Sketch Tool或Windows游戏栏。 使用WindowsPrtSc组合键截图 在Windows 10中捕获屏幕截图的最简单方法是按下键盘上的PrtScWindows键盘组合。你将看到屏幕短暂闪烁&#x…
阅读更多...
微信小程序发布流程

微信小程序发布流程

前言 上周写了如何写一个小程序&#xff0c;然后经过查资料&#xff0c;改bug&#xff0c;找chatgpt美化页面&#xff0c;我写了一个计算代谢率的小工具&#xff0c;写完了之后该怎么办呢&#xff0c;当然是发布上架&#xff0c;然后我就开始了发布的折腾 提交代码 这一步很…
阅读更多...
线性表相关知识

线性表相关知识

1.简述 线性表&#xff0c;全名为线性存储结构。使用线性表存储数据的方式可以这样理解&#xff0c;即“把所有数据按照顺序&#xff08;线性&#xff09;的存储结构方式&#xff0c;存储在物理空间”。 按照空间分类&#xff1a; 顺序存储结构&#xff1a;数据依次存储在连续…
阅读更多...
可爱的回调函数

可爱的回调函数

目录 一、作者声明&#xff1a; 二、什么回调函数&#xff1f; 三、库函数qsort为例&#xff0c;讲解回调函数 一、作者声明&#xff1a; 标题中的可爱纯纯是用来凑字数&#xff0c;没有特殊含义&#xff0c;因为可爱的平台不让用四个字作为标题&#xff01; 如果平台允许我…
阅读更多...
上海未来产业创投联盟启动成立，和鲸Heywhale成为首批发起单位

上海未来产业创投联盟启动成立，和鲸Heywhale成为首批发起单位

第三届“海聚英才”全球创新创业峰会于近期举办&#xff0c;会上正式启动成立“上海未来产业创投联盟”&#xff0c;上海和今信息科技有限公司等 31 家单位成为首批发起单位。 为进一步坚定产业投资信心&#xff0c;营造最优人才生态&#xff0c;9月20日下午&#xff0c;第三届…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023