HTML5 - contenteditable 富文本编辑器
简介
上图是我自己没事用 contenteditable 写着玩的,一个有点像 VS Code
的脚本编辑器。主要是脚本要根据类型高亮,比如方法名黄色、关键字紫色。
contenteditable 是 HTML5 中的新属性。属性值为true 可以编辑元素内容,false 无法编辑元素内容。例:
<p contenteditable="true">这里可编辑</p>
来由
textarea无法满足需求
- textarea不能像div一样高度自适应,高度保持不变,内容大于高度时就会出现滚动条。
- textarea只支持文本输入,不支持在编辑区域插入图片,链接,视频。
兼容性
MDN截图
使用说明
编辑器初始内容,就一行 ;我是注释123456789
<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是注释123456789</span></div>
</div>
1.回车、删除
以谷歌浏览器为例
行首回车
<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">**<br>**</span></div><div class="lineText"><span style="color: green;">;我是注释123456789</span></div>
</div>
行尾回车
会多出一个div,并复制上一行的内容,也就是span,span里面有一个 br(空标签,一个简单的换行符。)
<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是注释123456789</span></div><div class="lineText"><span style="color: green;">**<br>**</span></div>
</div>
行中回车并删除
会多出一个div,把之前的一分为2.
//按回车变两行
<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是</span></div><div class="lineText"><span style="color: green;">注释123456789</span></div>
</div>
//按删除删除回车,变一行,但是是两个span
<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是</span><span style="color: green;">注释123456789</span></div>
</div>
2.输入内容
行首、行中、行末输入效果一致,再长都不会创建新元素。
<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是注释123456789我是谁</span></div>
</div>
3.命令document.execCommand
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
当一个HTML文档切换到设计模式时,document暴露 execCommand 方法,该方法允许运行命令来操纵可编辑内容区域的元素。比如设置字体、加粗等,并可以插入图片等内容。
语法
*bool* = document.execCommand(*aCommandName*, *aShowDefaultUI*, *aValueArgument*)
返回值
一个 Boolean
,如果是 false
则表示操作不被支持或未被启用。
参数
aCommandName:
一个DOMString
,命令的名称。可用命令列表请参阅 命令 。aShowDefaultUI
:一个Boolean
, 是否展示用户界面,一般为 false。Mozilla 没有实现。aValueArgument:
一些命令(例如insertImage)需要额外的参数(insertImage需要提供插入image的url),默认为null。
设置命令
insertBrOnReturn
是否在回车时插入br。控制当按下Enter键时,是插入 br 标签还是把当前块元素变成两个。(IE浏览器不支持)
document.execCommand("insertBrOnReturn", true, false);
使用命令insertBrOnReturn命令,最后参数为true,会产生
,为false则根据当前行创建。
<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: white;">888</span></div><div class="lineText"><br></div>
</div>
defaultParagraphSeparator
更改在可编辑文本区域中创建新段落时使用的段落分隔符。有关更多详细信息,请参阅标记生成的差异。
插入命令
insertHorizontalRule
在插入点插入一个水平线(删除选中的部分)
insertImage
在插入点插入一张图片(删除选中的部分)。需要一个 URL 字符串作为参数。这个 URL 图片地址至少包含一个字符。空白字符也可以(IE会创建一个链接其值为null)
insertOrderedList
在插入点或者选中文字上创建一个有序列表
insertUnorderedList
在插入点或者选中文字上创建一个无序列表。
insertParagraph 插入段落
在光标所在当前行后插入一个段落。(IE会在插入点插入一个段落并删除选中的部分.)
和按回车键效果类似。
document.execCommand("insertParagraph", true);//在光标处插入一个新div ,会包含一个 br行末
<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是注释123456789</span></div><div class="lineText"><span style="color: green;">**<br>**</span></div>
</div>
行中
<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是注释</span></div><div class="lineText"><span style="color: green;">123456789</span></div>
</div>
行首
<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">**<br>**</span></div><div class="lineText"><span style="color: green;">;我是注释123456789</span></div>
</div>
insertText 在当前段落中插入
在光标插入位置插入文本内容或者覆盖所选的文本内容。
document.execCommand("insertText", true, '#IF');
行末
<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是注释123456789#IF</span></div>
</div>
行中
<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是注释#IF123456789</span></div>
</div>
行首
<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">#IF;我是注释123456789</span></div>
</div>
insertHTML 插入html
在光标所在当前行插入文本内容或者覆盖所选的文本内容。
直接插入 内容,效果和insertText一致。document.execCommand("insertHTML", true,'#IF' );
那么插入html 字符串呢?是在光标所在当前行插入 html元素。
document.execCommand("insertHTML", true,'<span style='color:red;'>#IF</span>' );
行末
<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是注释123456789</span><span style="color: red;">#IF</span></div>
</div>
行中
<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: green;">;我是注释</span><span style="color: red;">#IF</span><span style="color: green;">123456789</span></div>
</div>
行首
<div contenteditable="true" spellcheck="false" class="scriptEditor"><div class="lineText"><span style="color: red;">#IF</span><span style="color: green;">;我是注释123456789</span></div>
</div>
4.让contenteditable元素只能输入纯文本
1.css实现
一个div元素,要让其可编辑,contenteditable属性是最常用方法,CSS中也有属性可以让普通元素可读写。
user-modify.
支持属性值如下:
user-modify: read-only;
user-modify: read-write;
user-modify: write-only;//可以输入富文本
user-modify: read-write-plaintext-only;//只能输入纯文本
read-write和read-write-plaintext-only会让元素表现得像个文本域一样,可以focus以及输入内容
2.contenteditable实现
contenteditable="plaintext-only"
"plaintext-only"可以让编辑区域只能键入纯文本
HTML5 - contenteditable 富文本编辑器相关推荐
- 深入浅出contenteditable富文本编辑器
富文本编辑器一直是前端领域的一个天坑,但若不是深入接触编辑器开发的工程师,却不一定清楚富文本编辑器到底坑在哪里,作为有幸和编辑器打了一年交道的前端,今天来聊聊Web富文本编辑器的那些事. 通常当我们拿 ...
- zx-editor 移动端(HTML5)富文本编辑器,可与原生App混合(hybrid)开发
zxEditor 移动端HTML文档(富文本)编辑器,支持图文混排.引用.大标题.无序列表,字体颜色.加粗.斜体. 可用于独立web项目开发,也可以用于与原生App混合(hybrid)开发. 源码地址 ...
- contenteditable富文本编辑器支持emoji插入表情
首先看下实现效果 主要功能是插入表情emoji 点击顶部员工名称 可以插入员工名称到tetxarea中 ,点击face小图标可以展开表情选择 注 IE有兼容性问题 不支持IE 主要是ie不持支inse ...
- 所见即所得html5编辑器,一个漂亮的所见即所得(WYSIWYG)富文本编辑器:Froala
本文翻译来自wysiwyg-editor,大家想看原文可以点击此链接. 介绍 WYSIWYG HTML编辑器是一款有史以来最强大的JavaScript富文本编辑器之一.它采用了最新的技术,并利用jQu ...
- html5富文本编辑器图片,漂亮的富文本编辑器WYSIWYG
插件描述: 接下来我要为大家介绍一款好看的富文本编辑器 wysiwyg .先来看看官方对这款编辑器的相关功能描述吧. 接下来我要为大家介绍一款好看的富文本编辑器 wysiwyg .先来看看官方对这款编 ...
- html5 富文本编辑框,漂亮的富文本编辑器WYSIWYG
插件描述: 接下来我要为大家介绍一款好看的富文本编辑器 wysiwyg .先来看看官方对这款编辑器的相关功能描述吧. 接下来我要为大家介绍一款好看的富文本编辑器 wysiwyg .先来看看官方对这款编 ...
- Squire – 简洁的 HTML5 富文本编辑器
Squire 是一个简洁的 HTML5 富文本编辑器,它提供了强大的跨浏览器的标准化,超级轻巧灵活.它是建立在现在和未来并作为研究,因此并不支持那些古老的浏览器. 在线演示 源码下载 您可能 ...
- 原生JS实现富文本编辑器
富文本编辑器是我们常用到的编辑器,也有很多功能完备且强大的编辑器,比如Quill Rich Text Editor.ueditor等,都是很优秀的富文本编辑器.在我们写网页的时候也会用到它,通常省事的 ...
- 轻松实现富文本编辑器
Demo: https://ma125120.github.io/ma-dom/test/exec.html(仅提供参考,实现了富文本编辑器的基础功能,如有完善需要,可自行拓展或者在下方评论,提出您珍 ...
最新文章
- AttributeError: module 'tensorflow' has no attribute 'random_normal'
- python中的集合类型_Python中的集合类型知识讲解
- 【NYOJ-35】表达式求值——简单栈练习
- vi的插入模式下退格和方向键不能使用的解决方法
- python函数参数定义顺序_[python]函数默认参数顺序问题
- (转)Spring Boot 2 (十):Spring Boot 中的响应式编程和 WebFlux 入门
- PHP开源CMS介绍
- 芯片大神Jim Keller从特斯拉离职,转投“宿敌”英特尔
- jsp- el表达式
- 从零实现深度学习框架——Softmax回归中的数值稳定
- FPGA BCD计数器(多位)
- windows - Hook技术介绍
- PR图文展示模板 母亲节父亲节活动创意幻灯片视频PR模板
- HLA高层体系结构+RTI(2)
- MC9S12 硬件设计
- 数仓可视化,低代码开发平台
- 使用Has Entered Trigger节点
- 计算型存储: 异构计算的下一个关键应用
- python中turtle画小草_python
- 雅虎统计 chedong.com 读者基于淘宝购物行为的访客网购兴趣分析
热门文章
- Vxworks应用自启动
- 京东的offer真就这么难拿?专科学历——京东5面终收offer
- 黑客操纵“肉鸡” 攻击网游服务器
- 案例分享,RTC电池寿命探讨,才半年就提示更换电池
- 能耗监管系统在既有综合医院的建设与应用
- 关于AutoCAD反复弹窗Nonvalid Software Detected的解决办法
- 计算机桌面图标下的字都有颜色,我的电脑桌面上图标下的文字变成白色底纹
- 如何从InfluxDB/OpenTSDB无缝连接到TDengine
- (建议收藏)计算机网络:Ip组播与IPv6协议习题详解与拓展
- RS232电平、CMOS电平、TTL电平、RS485电平