HTML在线文本编辑器实现原理,富文本编辑器的简单实现原理-程序员宅基地

技术标签: HTML在线文本编辑器实现原理  

DOCTYPE html>

富文本编辑器实现原理title>

style>

head>

div>


居中button>

左对齐button>

右对齐button>

添加缩进button>

去掉缩进button>

宋体button>

大字体button>

红色字体button>

浅绿背景button>

加粗button>

斜体button>

下划线button>

复制button>

剪切button>

粘贴button>

全选button>

删除button>

后删除button>

清空格式button>

前进一步button>

后退一步button>

打印button>

插入divbutton>

插入hrbutton>

插入olbutton>

插入ulbutton>

插入pbutton>

插入文本button>

插入图像button>

增加链接button>

删除链接button>

* 并且在第一行插入p标签。

**/window.οnlοad= function(){

edit.focus();

document.execCommand("formatblock",false,"p");

}/** 在编辑框内,当键盘输入时自动在当前行插入p标签,

* 也可以自动插入其它标签,

* 当编辑框内检测到标签时禁止插入p标签。*/edit.οnkeydοwn= function(){varstr=edit.innerHTML;varval=str.search(//i);if(val< 0){

document.execCommand("formatblock",false,"p");

}

}varbtns=document.getElementsByName('button-edit');/** 编辑按钮的js操作命令接口。

* 按钮的data-name属性存放命令,data-value属性存放值。

* 也可用其它标签代替。

**/

for(vari= 0; i

btns[i].οnclick= function(){if(this.getAttribute('data-value')== ""){

document.execCommand(this.getAttribute('data-name'));

}else{

document.execCommand(this.getAttribute('data-name'),false,this.getAttribute('data-value'));

}

}

}/** 富文本内的值是通过div的innerHTML获取的,

* 表单提交时需提前用js转移到隐藏域里,然后提交,

* 为了便于理解富文本的结构,这里省略这一步了。

**/

functionshowContent() {alert(edit.innerHTML);

}/** 检测浏览器是否开启或支持paste命令,

* 函数反回值为Boolean,

* true为支持,false为未开启或不支持paste粘贴命令

* paste粘贴命令需要在user.js配置文件中开启。

* 详见火狐开发者中心相关文档:

* https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

**/

functionisPaste(){if(document.execCommand("paste")) {

alert("浏览器支持或开启了paste粘贴命令!");

}else{

alert("浏览器不支持paste粘贴命令,\n或未在user.js配置文件中开启!");

}

}script>

body>

html>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_36282234/article/details/117724609

智能推荐

ubuntu16.04 安装ssh_ubuntu16.04重装ssh-程序员宅基地

文章浏览阅读2.2k次。安装sshroot@ubuntu: apt-get install openssh-server安装后需要启动sshroot@ubuntu: /etc/init.d/ssh restart允许root登录需要修改配置信息root@ubuntu: vi /etc/ssh/sshd_config修改为:修改保存后再重启sshroot@ubuntu: /etc/init.d..._ubuntu16.04重装ssh

关于Unity中红外线瞄准的效果实现-程序员宅基地

文章浏览阅读1.1k次。今天做一个FPS游戏的时候,由于我做的是第三人称的射击,所以需要一个枪的红外线瞄准的效果。一开始我在枪上挂一个很细很长的聚光灯,瞄准远处物体的时候,看起来有点红外线的样子,但是靠近之后光线就变成一个手电筒的那种光,不是我想要的效果。后来我用粒子特效,虽然远处近处都是一条射线,但是效果很粗糙,不是那种细细的有穿透的感觉,而是像激光一样,而且感觉不断生成粒子,性能消耗会很大。最后..._unity红外线效果

matlab频率响应数据模型创建函数frd_matlab frd函数-程序员宅基地

文章浏览阅读3.3k次。使用方法:frd(resp,freq)其中resp是取样点,freq是频率函数方程,而frd以resp为freq的输入计算频率响应输出,并将该输出和输入resp对应的组合在一起,得到类型为frd的频率响应模型示例:在10到100之间取50个对数间距点,以y=0.05xexp(i2*x)为频率响应方程>> freq = logspace(1,2)>> resp = .05*(freq).*exp(i*2*freq)>> sys = frd(resp,freq)_matlab frd函数

人工智能内容生成元年—AI绘画原理解析_ai绘画技术原理-程序员宅基地

文章浏览阅读1.9w次,点赞39次,收藏183次。AIGC元年达到了学术-商业共振,本文介绍现有AI绘画、AI作画背后的相应基本原理、应用、以及论文参考文献。_ai绘画技术原理

Python爬虫网页解析神器Xpath快速入门教学!!!_python xpath 等于class的标签-程序员宅基地

文章浏览阅读2.2k次,点赞2次,收藏18次。文章目录1、Xpath介绍2、Xpath路径表达式3、结合实例讲解1、Xpath介绍 XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。2、Xpath路径表达式表达式描述nodename选取此节点的所有子节点。/从根节点选取。//从匹配选择的当前节点选择文档中的节点,而不考虑它们的位置。.选取当前节点…选取当前节点的父节点_python xpath 等于class的标签

快手上热门的小技巧,抖音快手直播5个上热门技巧_快手作品上了小热门后应该怎么做-程序员宅基地

文章浏览阅读2.1k次。2020下半年,随着直播带货行业发展势头越来越猛,各大电商平台纷纷涉足直播电商,普通人也跃跃欲试想要加入直播带货,那么普通人该如何选择直播平台呢,这要根据每个人的自身条件,不管做抖音还是快手,初始最重要的就是涨粉,今天小编分享的是新人做抖音快手直播如何快速涨粉的技巧。说到抖音快手涨粉,最暴力的莫过于上热门,一个视频上热门,涨粉可能就有好几万,比如之前有个直播睡觉,一夜爆红的主播,一天时间涨粉几百万,一晚收入70多万,不知道羡煞多少旁人。了解抖音快手上热门的机制是怎样的!抖音快手热门视频推荐机制,或者_快手作品上了小热门后应该怎么做

随便推点

MindOpt——优化虚拟电厂智能调度问题(二)-程序员宅基地

文章浏览阅读449次。智慧楼宇调度,是在保证社区负荷需求的情况下,通过储能设备的指令控制,以**用电经济性、环保性和对电网稳定性**为综合目标的一种调度场景。_mindopt

Java调用c++的动态链接库正确方式,踩坑选手!_java调用c++动态库-程序员宅基地

文章浏览阅读2.6k次。前言,前几个月泛泛的看了一下c++的相关书籍。在看的过程中,做几个例子啥的没啥感觉。但是在整合起来的过程中还是发现了蛮多问题。_java调用c++动态库

NeuralCoref: python的共指消解工具,向代词指代的问题进军!_neuralcoref.neuralcoref.array-程序员宅基地

文章浏览阅读7.7k次,点赞3次,收藏17次。首先简要地说说共指消解是什么,有什么用处。假设机器正在阅读一个这样的文本: 克劳德·莫奈是印象派代表人物和创始人之一。 他最重要的风格是改变了阴影和轮廓线的画法。如果机器想要从这段话中了解到关于莫奈风格的知识,它首先必须知道,第二句话中的“他”指的就是莫奈。弄清代词的指代就是共指消解中的一个典型任务。NeuralCoref是使用时下先进神经网络技术完成指代消解任务的一个工具。_neuralcoref.neuralcoref.array

python多线程/进程问题:以iperf3为例与测试平台解析_iperf3多线程测试方法-程序员宅基地

文章浏览阅读4.9k次,点赞3次,收藏14次。在给一个项目写可视化的时候,项目需要用iperf3来进行网络测试。遇到了subprocess与多线程问题,后来解决_iperf3多线程测试方法

win10添加软件开机启动_bat设置指定软件开机启动-程序员宅基地

文章浏览阅读3.5k次。win10设置软件开机启动如果想要实现应用程序在所有的用户登录系统后都能自动启动,就把该应用程序的快捷方式放到“系统启动文件夹”里;C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp如果想要实现应用程序在所有的用户登录系统后都能自动启动,就把该应用程序的快捷方式放到“系统启动文件夹”里;C:\ProgramData\Micr..._bat设置指定软件开机启动

园区网络IP地址规划_园区私有地址-程序员宅基地

文章浏览阅读6.9k次,点赞11次,收藏89次。笔者当年先后考取了CCNA、CCNP、CCIE;经过这些年工作,接触从几万、几十万到上亿的项目都有;我简单总结了接触的大部分的项目,将园区网核心技术进行了归纳,如下:IP地址规划1.IP地址基础在IP网络中,通信节点需要有一个唯一的IP地址,IP地址用于IP报文的寻址以及标识一个节点;IP地址中最重要的是子网划分 VLSM,可参照NA。2.特殊IP地址a.受限广播(用于IP地址请求阶段)所有位全为1,255.255.255.255b.直接广播(子网广播) 主机位全为1,如192.168.1_园区私有地址

推荐文章

热门文章

相关标签