前端 富文本编辑器原理——从javascript、html、css开始入门（一）https://developer.aliyun.com/article/1492714
例：
点击不失去焦点跳转开始和结束，避免失去焦点使用preventDefault
<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> <button id='start-id'>jumpt start</button> <button id='end-id'>jumpt end</button> </body> <script type="text/javascript"> function printSelection() { const selection = window.getSelection() console.log('selection', selection) console.log('selection.toString()', selection.toString()) console.log('selection.getRangeAt(0)', selection.getRangeAt(0)) } function jumpStart() { let range = window.getSelection().getRangeAt(0); let textEle = range.commonAncestorContainer; range.setStart(range.startContainer, 0); range.setEnd(range.startContainer, 0); } function jumpEnd() { let range = window.getSelection().getRangeAt(0); let textEle = range.commonAncestorContainer; range.setStart(range.startContainer, textEle.length); range.setEnd(range.endContainer, textEle.length); } window.onload = function() { document.getElementById('start-id').addEventListener('click', function(e) { jumpStart() }) document.getElementById('start-id').addEventListener('mousedown', function(e) { e.preventDefault() }) document.getElementById('end-id').addEventListener('click', function(e) { jumpEnd() }) document.getElementById('end-id').addEventListener('mousedown', function(e) { e.preventDefault() }) } </script>
效果如下图：
💖 设置选取range
Selection.addRange()
概述
向选区（Selection）中添加一个区域（Range）。
语法
sel.addRange(range)
例子：
失去焦点之后恢复选区
<body> <blockquote contenteditable="true"> <p>Edit this content to add your own quote</p> <b>yma16</b> </blockquote> <cite contenteditable="true">-- Write your own name here</cite> <br> <button id='print-id'>console.log(getSelection)</button> <br> <br> <button id='start-id'>jump start</button> <button id='end-id'>jump end</button> <button id='focus-id'>focus content</button> </body> <script type="text/javascript"> const config = { selection: null } function printSelection() { const selection = window.getSelection() range = document.getSelection().getRangeAt(0).cloneRange(); config.cloneRange = range; console.log('selection', selection) // console.log('selection.toString()', selection.toString()) // console.log('selection.getRangeAt(0)', selection.getRangeAt(0)) } function jumpStart() { let range = window.getSelection().getRangeAt(0); let textEle = range.commonAncestorContainer; range.setStart(range.startContainer, 0); range.setEnd(range.startContainer, 0); range = document.getSelection().getRangeAt(0).cloneRange(); config.cloneRange = range; } function jumpEnd() { let range = window.getSelection().getRangeAt(0); let textEle = range.commonAncestorContainer; range.setStart(range.startContainer, textEle.length); range.setEnd(range.endContainer, textEle.length); range = document.getSelection().getRangeAt(textEle.length).cloneRange(); config.cloneRange = range; } function focusContent() { document.getSelection().removeAllRanges(); //把没用的Ranges删除 console.log('config.cloneRange',config.cloneRange) document.getSelection().addRange(config.cloneRange); //恢复Range } window.onload = function() { document.getElementById('print-id').addEventListener('click', function(e) { printSelection() }) document.getElementById('print-id').addEventListener('mousedown', function(e) { e.preventDefault() }) document.getElementById('start-id').addEventListener('click', function(e) { jumpStart() }) document.getElementById('start-id').addEventListener('mousedown', function(e) { e.preventDefault() }) document.getElementById('end-id').addEventListener('click', function(e) { jumpEnd() }) document.getElementById('end-id').addEventListener('mousedown', function(e) { e.preventDefault() }) document.getElementById('focus-id').addEventListener('click', function(e) { focusContent() }) document.getElementById('focus-id').addEventListener('mousedown', function(e) { e.preventDefault() }) } </script>
效果如下：
⭐总结
Contenteditable属性
Contenteditable是一种HTML属性，用于指定页面中的元素是否可以编辑。以下是Contenteditable的总结：
- Contenteditable属性可以应用于HTML元素上，如div、span、p、h1等等。
- 当Contenteditable属性设置为true时，用户可以编辑元素内的文本、图像等内容。
- Contenteditable属性的取值包括true和false，分别表示可编辑和不可编辑。
- Contenteditable属性可以通过JavaScript来动态修改。
- Contenteditable属性的兼容性很好，支持大多数现代浏览器。
- 虽然Contenteditable属性很方便，但也存在一些潜在的安全问题，因此应该谨慎使用。
富文本编辑器
富文本编辑器是一种允许用户编辑带有样式和格式的文本的编辑器。它与普通文本编辑器的区别在于，它允许用户使用各种字体、颜色、大小、加粗、斜体、下划线、超链接、图片等来设计和呈现文本内容。其原理主要包括以下几个方面：
- DOM操作：富文本编辑器通过操作DOM树来实现文本样式和格式的改变。当用户在编辑器中输入或选择文本时，编辑器会将文本转换为DOM节点，并将节点添加到DOM树中。通过对DOM节点的增删改查，实现对文本样式和格式的修改操作。
- 事件监听：通常情况下，富文本编辑器会监听用户的输入事件、鼠标点击事件和键盘事件等，以便及时捕捉用户的操作并做出相应的反应。
- 样式和格式化：富文本编辑器通常内置了样式和格式化工具，比如字体、颜色、大小、加粗、斜体、下划线、超链接等，可以通过这些工具来控制文本的样式和格式。
- 插件和组件：富文本编辑器可以通过插件和组件来扩展其功能，比如图片上传组件、表格插件、代码高亮插件等，可以让编辑器满足更多的需求。
⭐结束
本文分享到这结束，如有错误或者不足之处欢迎指出！
