⭐前言
大家好，我是yma16，本文分享关于前端 富文本编辑器原理——从javascript、html、css开始。
富文本编辑器
富文本编辑器是指具有格式化文本和图像编辑功能的文本编辑器
参考文档：https://w3c.github.io/selection-api/#abstract
⭐html的contenteditable属性
全局属性 contenteditable 是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的组件以允许编辑。
- contenteditable boolean (false | true) 默认false
简单理解，加上contenteditable ，html可以编辑具有input 输入的基本功能，所见即所得。
例：
html demo 标签配置contenteditable
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>富文本编辑器</title> </head> <style> blockquote { background: #eee; border-radius: 5px; margin: 16px 0; } blockquote p { padding: 15px; } cite { margin: 16px 32px; font-weight: bold; } blockquote p::before { content: '\201C'; } blockquote p::after { content: '\201D'; } [contenteditable='true'] { caret-color: red; } </style> <body> <blockquote contenteditable="true"> <p>Edit this content to add your own quote</p> </blockquote> <cite contenteditable="true">-- Write your own name here</cite> </body> </html>
效果如下，可以输入编辑html元素：
💖 输入的光标位置（浏览器获取selection）
getSelection() method
GetSelection ()方法返回一个 Selection 对象，该对象表示用户选择的文本范围或插入符号的当前位置。
⭐使用Selection.toString () 返回指定的文本
例：
<body> <blockquote contenteditable="true"> <p>Edit this content to add your own quote</p> </blockquote> <cite contenteditable="true">-- Write your own name here</cite> <button onclick="printSelection()">console.log(getSelection)</button> </body> <script type="text/javascript"> const printSelection=()=>{ const selection=window.getSelection() console.log('selection',selection) console.log('selection.toString()',selection.toString()) } </script>
效果如下：
⭐getRangeAt 获取指定索引范围
函数接受一个索引值
返回，其中
结束的索引值，endOffset
开始的索引值，startOffset
效果如下图：
💖 修改光标位置
调用 setStart() 和 setEnd() 方法，来修改一个光标的位置或拖蓝范围
Range.setStart()
Range.setStart() 方法用于设置 Range的开始位置。
如果起始节点类型是 Text、Comment 或 CDATASection之一，那么 startOffset 指的是从起始节点算起字符的偏移量。对于其他 Node 类型节点，startOffset 是指从起始结点开始算起子节点的偏移量。
如果设置的起始位点在结束点之下（在文档中的位置），将会导致选区折叠，起始点和结束点都会被设置为指定的起始位置。
startNode
startNode 用于设定 Range的起始位置。
startOffset
必须为不小于 0 的整数。表示从startNode的开始位置算起的偏移量。
Range.setEnd()
Range.setEnd()
方法用于设置 Range的结束位置。
如果结束节点类型是 Text、Comment 或 CDATASection之一，那么 endOffset 指的是从结束节点算起字符的偏移量。对于其他 Node 类型节点，endOffset 是指从结束结点开始算起子节点的偏移量。
如果设置的结束点在起始点之上（在文档中的位置），将会导致选区折叠，起始点和结束点都会被设置为指定的结束位置。
endNode
endNode用于设定 Range的结束位置。
endOffset
必须为不小于 0 的整数。表示从endNode的结束位置算起的偏移量。
语法
range.setStart(startNode, startOffset); range.setEnd(endNode, endOffset);
前端 富文本编辑器原理——从javascript、html、css开始入门（二）https://developer.aliyun.com/article/1492715
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)