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

//所有的图标用的字符，以后可以换成网上的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,兼容IEeditPane=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++){//获取子节点的名称是否等于spanif(p[l].children[a].tagName.toLowerCase()==="span"){//检查span是否有style特征，如果有则删除stylevar 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; //创建文本的urlcase "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.mzph.cn/news/98870.shtml

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

相关文章

利用KerasCV YOLOv8轻松实现目标精确检测

利用KerasCV YOLOv8轻松实现目标精确检测

本文中将实现基于KerasCV YOLOv8的交通灯信号检测，并附录完整代码。。 自从You Only Look Once（简称 YOLO）的诞生以来，目标检测问题主要通过深度学习来解决。大多数深度学习架构通过巧妙地将目标检测问题构建为多个小分类问题和回归问题的组合来实现。具体而言，它是通过在…
阅读更多...
Redis-04独立功能的实现

Redis-04独立功能的实现

1、发布与订阅 介绍&#xff1a; Redis的发布与订阅功能由PUBLISH、SUBSCRIBE、PSUBSCRIBE等命令组成。通过SUBSCRIBE命令&#xff0c;客户端可以订阅一个或多个频道&#xff0c;成为这些频道的订阅者&#xff08;subscriber&#xff09;每当有其他客户端向被订阅的频道发送消…
阅读更多...
监控搭建-Prometheus

监控搭建-Prometheus

监控搭建-Prometheus 1、背景2、目标3、选型4、Prometheus4.1、介绍4.2、架构4.3、构件4.4、运行机制4.5、环境介绍4.6、数据准备4.7、网络策略4.7.1、主机端口放行4.7.2、设备端口放行 4.8、部署4.9、验证4.10、配置 1、背景 随着项目信息化进程的推进&#xff0c;操作系统、…
阅读更多...
2579. 统计染色格子数（javascript）

2579. 统计染色格子数（javascript）

有一个无穷大的二维网格图&#xff0c;一开始所有格子都未染色。给你一个正整数 n &#xff0c;表示你需要执行以下步骤 n 分钟&#xff1a; 第一分钟&#xff0c;将 任一格子染成蓝色。之后的每一分钟&#xff0c;将与蓝色格子相邻的 所有 未染色格子染成蓝色。 下图分别是 …
阅读更多...
Redis-02单机数据库的实现

Redis-02单机数据库的实现

Redis-02单机数据库的实现 1、服务器中的数据库 Redis服务器将所有数据库都保存在服务器状态redis.h/redisServer结构的db数组中&#xff0c;db数组的每个项都是一个redis.h/redisDb结构&#xff0c;每个redisDb结构代表一个数据库&#xff1b; 在初始化服务器时&#xff0c…
阅读更多...
竞赛 机器视觉目标检测 - opencv 深度学习

竞赛 机器视觉目标检测 - opencv 深度学习

文章目录 0 前言2 目标检测概念3 目标分类、定位、检测示例4 传统目标检测5 两类目标检测算法5.1 相关研究5.1.1 选择性搜索5.1.2 OverFeat 5.2 基于区域提名的方法5.2.1 R-CNN5.2.2 SPP-net5.2.3 Fast R-CNN 5.3 端到端的方法YOLOSSD 6 人体检测结果7 最后 0 前言 &#x1f5…
阅读更多...
如何从零开始系统的学习项目管理？

如何从零开始系统的学习项目管理？

一、项目的概念 根据项目管理协会&#xff08;PMI&#xff09;的定义&#xff0c;项目是指为了创造独特的产品、服务或成果而进行的临时性工作。这意味着项目需要有明确的目标&#xff0c;且不是日常重复性工作。尽管项目是临时性工作&#xff0c;但它所交付的成果可能会持续存…
阅读更多...
锁降级 ReentrantReadWriteLock

锁降级 ReentrantReadWriteLock

锁降级 ReentrantReadWriteLock 所谓降级&#xff0c;可以通过一个例子理解&#xff0c;一般都是写的权限大&#xff0c;读的权限小&#xff0c;从写到读自然是降级&#xff0c;这是通俗的理解。 锁降级&#xff1a;同一个线程先获取写锁&#xff0c;在写锁未释放的情况下&…
阅读更多...
【计算机网络】poll | epoll

【计算机网络】poll | epoll

文章目录 1. pollpoll函数参数解析代码解析PollServer代码 poll 特点 2. epoll认识接口epoll_createepoll_ctlepoll_wait 基本原理红黑树就绪队列 1. poll poll函数参数解析 输入 man poll poll的第一个参数是文件描述符 poll的第二个参数为 等待的多个文件描述符(fd)数字层面…
阅读更多...
【计算机视觉 05】YOLO论文讲解：V1-V7

【计算机视觉 05】YOLO论文讲解：V1-V7

https://ai.deepshare.net/live_pc/l_63243a65e4b050af23b79338 Part1.目标检测与YOLO系列 1. 目标检测任务及发展脉络 2. YOLO的发展史 Anchors Base原理&#xff1a; Part2.YOLOV1-V3 3. YOLO V1的网络结构 4. YOLO V3的网络结构与实验结果 Part3.YOLO的进化 5. YOLO V4的网络…
阅读更多...
【JavaEE】多线程进阶（一）饿汉模式和懒汉模式

【JavaEE】多线程进阶（一）饿汉模式和懒汉模式

多线程进阶&#xff08;一&#xff09; 文章目录 多线程进阶&#xff08;一&#xff09;单例模式饿汉模式懒汉模式 本篇主要引入多线程进阶的单例模式&#xff0c;为后面的大冰山做铺垫 代码案例介绍 单例模式 非常经典的设计模式 啥是设计模式 设计模式好比象棋中的 “棋谱”…
阅读更多...
服务器启用SGX（以PowerEdge R750为例）

服务器启用SGX（以PowerEdge R750为例）

一、检查处理器是否支持SGX 在shell中输入以下命令查看CPU型号 cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c在Product Specifications中找到对应的处理器参数信息&#xff0c;如果支持SGX&#xff0c;可以在Security & Reliability中看到如下信息 二、以“软…
阅读更多...
初学者如何选择：前端开发还是后端开发？

初学者如何选择：前端开发还是后端开发？

#开发做前端好还是后端好【话题征文】# 作为一名有多年开发经验的过来人&#xff0c;我认为前端开发和后端开发都有其独特的魅力和挑战。下面我将就我的个人经历和观点来分享一些关于前端开发和后端开发的看法。 首先&#xff0c;让我们将编程世界的大城市比作前端开发和后端开…
阅读更多...
Git 学习笔记 | Git 基本理论

Git 学习笔记 | Git 基本理论

Git 学习笔记 | Git 基本理论 Git 学习笔记 | Git 基本理论Git 工作区域Git 工作流程 Git 学习笔记 | Git 基本理论 在开始使用 Git 创建项目前&#xff0c;我们先学习一下 Git 的基础理论。 Git 工作区域 Git本地有三个工作区域&#xff1a;工作目录&#xff08;Working Di…
阅读更多...
计算机网络笔记3 数据链路层

计算机网络笔记3 数据链路层

计算机网络系列笔记目录&#x1f447; 计算机网络笔记6 应用层计算机网络笔记5 运输层计算机网络笔记4 网络层计算机网络笔记3 数据链路层计算机网络笔记2 物理层计算机网络笔记1 概述 文章前言 &#x1f497; 站在巨人的肩膀上&#xff0c;让知识的获得更加容易&#xff01…
阅读更多...
vue，前端打包项目、部署上线

vue，前端打包项目、部署上线

前端项目是在本地的IDE开发的。流程是&#xff1a;开发》打包》上线到生产环境》使用。 vue脚手架只是开发过程中,协助开发的工具,当真正开发完了&#xff0c;脚手架不参与上线。 这时候要用到打包了。 打包后,可以生成,浏览器能够直接运行的网页>就是需要上线的源码! 打…
阅读更多...
Clion中使用C/C++开发stm32程序

Clion中使用C/C++开发stm32程序

前言 从刚开始学习阶段&#xff0c;一直是用的keil5开发stm32程序&#xff0c;自从看到稚晖君推荐的CLion开发嵌入式程序后&#xff0c;这次尝试在CLion上开发stm32程序。 1、配置CLion用于STM32开发的环境 这里我就不详细写了&#xff0c;没必要重新写&#xff0c;网上教程很多…
阅读更多...
华为OD机试 - 数字反转打印（Java 2023 B卷 100分）

华为OD机试 - 数字反转打印（Java 2023 B卷 100分）

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#…
阅读更多...
dataframe保存excel格式比csv格式小很多很多

dataframe保存excel格式比csv格式小很多很多

问题描述&#xff1a; 一个3万行的数据保存成csv大概10个G&#xff0c;但保存成excel格式只有100多M 原因分析&#xff1a; 因为xlsx 实际上就是 zip 压缩包&#xff0c;同时&#xff0c;如果有大量重复的数据&#xff0c;XLSX 会提取文本值&#xff0c;将其存储在查找表中&…
阅读更多...
华为云云耀云服务器L实例评测｜部署项目管理工具 Focalboard

华为云云耀云服务器L实例评测｜部署项目管理工具 Focalboard

华为云云耀云服务器L实例评测&#xff5c;部署项目管理工具 Focalboard 一、云耀云服务器L实例介绍1.1 云服务器介绍1.2 产品优势1.3 产品规格1.4 应用场景 二、云耀云服务器L实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置 三、部署 Focalboard3.1 Focalboard 介绍3.2 Doc…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023