html | 基于iframe的简易富文本编辑器

效果图

  • 支持: 选中后 ctrl+I 斜体
    在这里插入图片描述

代码

思路就是在iframe种嵌套html和css。

<pre>
- 支持: 选中后 ctrl+I 斜体
- todo: 鼠标实现单击斜体
</pre>
<iframe name="richedit" style="height:30%; width:100%;"></iframe><script>
window.addEventListener("load", ()=>{frames['richedit'].document.body.innerHTML="<b>hello</b> <span style='color:red'>world</span>! From js";frames['richedit'].document.designMode="on";//frames[0].document.designMode="on"
})
</script>

进一步完善 todo

  • 鼠标实现单击斜体。
  • 添加控制按钮,通过 postMessage 进行父子窗口的通信。
  • 选中文字的获取和修饰

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

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

相关文章

android framework-Pixel3真机系统内置第三方apk实战

一、在/packages/apps创建独一无二的文件夹TestCamera 二、拷贝第三方应用到TestCamera文件夹下 三、创建Android.mk LOCAL_PATH: $(call my-dir)include $(CLEAR_VARS) # Module name should match apk name to be installed LOCAL_MODULE : TestCamera LOCAL_MODULE_TAGS : o…

Android开发基础知识总结(一)初识安卓Android Studio

一.基础理论知识 1.Linux相当于是地基。 MIUI&#xff0c;EMUI等操作系统&#xff0c;是基于安卓的改版——且裁掉了一部分Google的服务。 &#xff08;鸿蒙虽然是改版&#xff0c;但和安卓的架构基本上一致&#xff09; 2.Kotlin和Java都是JVM语言&#xff0c;必须先复习好…

C#学习....

1.基础 //引用命名空间using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;//项目名或者命名空间 namespace _01_MY_First_Demo {//Program类class Program{//程序的主入口或者Main函数static void Main(S…

基于原生Servlet使用模板引擎Thymeleaf访问界面

我们常在Spring Boot项目中使用Thymeleaf模板引擎,今天突发奇想&#xff0c;尝试原生Servlet访问&#xff01; 说做就做 搭建完整的WEB项目 其中的大部分依赖都是后续报错 追加进来的 导入依赖 thymeleaf-3.0.11.RELEASE.jar 第一次访问 访问地址: http://localhost:8080…

BLFS学习系列 第25章. 图形环境库 —— libdrm

一、简介 libdrm提供了一个用户空间库&#xff0c;用于在支持ioctl接口的操作系统上访问直接渲染管理器&#xff08;DRM&#xff09;。libdrm是一个低级别库&#xff0c;通常由图形驱动&#xff08;程序&#xff09;使用&#xff0c;如Mesa DRI驱动&#xff08;程序&#xff0…

【记录】Python3|Selenium4 极速上手入门(Windows)

环境&#xff1a;Windows 版本&#xff1a;python3&#xff0c;selenium 4.11.2 写这个是方便自己重装电脑时重新装 Selenium&#xff0c;懒得每次都重新找链接。 文章目录 1 装ChromeEdge其他浏览器 2 运行报错RequestsDependencyWarning: urllib3 (1.26.9) or chardet (3.0.4…

几种常见的递归算法

阶乘 这个比较简单就不说了。 int factorial(int n) {if (n < 0){return 0;}else if (n 1){return 1;}else {return n * factorial(n - 1);} }fibonacci 如此简单的算法&#xff0c;复试的时候竟然写错了&#xff01;&#x1f633;囧&#xff01; int fibonacci(unsigne…

搭建开发环境-操作系统篇(一键搭建开发环境)

概述 所谓工欲善其事必先利其器&#xff0c;搭环境往往是开发过程中卡出很多初学者的拦路虎。 对于很多老鸟来说&#xff0c;很多东西都已经习惯成自然&#xff0c;也就没有刻意和初学者说。但对于很多初学者&#xff0c;却是受益良多。 这个系列&#xff0c;先从操作系统开始…

Docker容器与虚拟化技术:容器运行时说明与比较

目录 一、理论 1.容器运行时 2.容器运行时接口 3.容器运行时层级 4.容器运行时比较 5.强隔离容器 二、问题 1.K8S为何难以实现真正的多租户 三、总结 一、理论 1.容器运行时 &#xff08;1&#xff09;概念 Container Runtime 是运行于 k8s 集群每个节点中&#xff…

【前端vue升级】vue2+js+elementUI升级为vue3+ts+elementUI plus

一、工具的选择 近期想将vuejselementUI的项目升级为vue3tselementUI plus&#xff0c;以获得更好的开发体验&#xff0c;并且vue3也显著提高了性能&#xff0c;所以在此记录一下升级的过程对于一个正在使用的项目手工替换肯定不是个可实现的解决方案&#xff0c;更优方案是基于…

阿里云服务器-修改ecs操作系统,把window系统更换成Linux操作系统

其他sql格式也在更新中&#xff0c;可直接查看这个系列&#xff0c;要是没有你需要的格式&#xff0c;可在评论或私信我 总目录 目录-后期更新打算 hive的nvl中的子查询 总目录我这个是window&#xff0c;默认应该都是window&#xff0c;我需要改成Linux系统第一步&#xff…

RISC-V公测平台发布· CoreMark测试报告

一. CoreMark简介 CoreMark是一款用于评估CPU性能的基准测试程序&#xff0c;它包含了多种不同的计算任务&#xff0c;包括浮点数、整数、缓存、内存等方面的测试。CoreMark的测试结果通常被用来作为CPU性能的参考&#xff0c;它可以帮助开发人员和系统管理员评估不同处理器和…

ClickHouse(二十三):Java Spark读写ClickHouse API

进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; &#x1f3e1;个人主页&#xff1a;含各种IT体系技术&#xff0c;IT贫道_Apache Doris,大数据OLAP体系技术栈,Kerberos安全认证-CSDN博客 &…

部署问题集合(十九)linux设置Tomcat、Docker,以及使用脚本开机自启(亲测)

前言 因为不想每次启动虚拟机都要手动启动一遍这些东西&#xff0c;所以想要设置成开机自启的状态 设置Tomcat开机自启 创建service文件 vi /etc/systemd/system/tomcat.service添加如下内容&#xff0c;注意修改启动脚本和关闭脚本的地址 [Unit] DescriptionTomcat9068 A…

C语言编写图形界面

文章目录 环境使用库基础概念句柄 程序的入口创建窗口定义窗口类注册窗口类创建窗口 完整代码运行效果 环境 使用的是VSCode MinGW&#xff1b; 使用库 我们使用windows.h库来实现图形化界面。 头文件如下&#xff1a; #include <windows.h>windows.h是 Windows 操作…

春秋云镜 CVE-2019-2725

春秋云镜 CVE-2019-2725 Weblogic < 10.3.6 ‘wls-wsat’ XMLDecoder 反序列化漏洞 靶标介绍 Oracle Fusion Middleware&#xff08;子组件&#xff1a;Web Services&#xff09;的 Oracle WebLogic Server 组件中的漏洞。受影响的受支持版本为 10.3.6.0.0 和 12.1.3.0.0。…

油画欣赏|《纯洁的梦乡》,心中的宇宙

《纯洁的梦乡》 80x60cm 陈可之2021年绘 油画《纯洁的梦乡》&#xff0c;以绮丽的想象&#xff0c;精湛的技艺&#xff0c;描绘出梦境中的蜻蜓、山、水、星空等事物&#xff0c;展现出一个纯洁美好的心灵宇宙世界。 油画采用水平构图的方式&#xff0c;在位置偏低的山脚设置水…

分析Flink,源和算子并行度不一致时,运行一段时间后,看似不再继续消费的问题,提供解决思路。

文章目录 背景分析 问题来了比较一开始的情况解决方式 背景 之前有分析过一次类似问题&#xff0c;最终结论是在keyby之后&#xff0c;其中有一个key数量特别庞大&#xff0c;导致对应的subtask压力过大&#xff0c;进而使得整个job不再继续运作。在这个问题解决之后&#xff…

UG\NX二次开发 创建中心线

文章作者:里海 来源网站:王牌飞行员_里海_里海NX二次开发3000例,C\C++,Qt-CSDN博客 简介: 下面是在制图模块创建中心线的例子,用的是ufun函数。 效果: 代码: #include "me.hpp"#include <stdio.h> #include <string.h> #include <uf.h>…

postgresql 谨慎使用正则删除(%,_)

建表 CREATE TABLE public.ellistest (id bigserial NOT NULL,"name" varchar null,primary key (id) );插入数据 删除含有_线的数据 你会发现表被清空了 delete from ellistest where name like %_%原因 百分号(%)用于表示0、1或多个字符或数字。 下划线通配符…