前端富文本编辑器原理——从javascript、html、css开始入门

本文介绍: 大家好，我是y m a16，本文分享关于前端富文本编辑器原理——从javascript、html、css开始。富文本编辑器富文本编辑器是指具有格式化文本和图像编辑功能的文本编辑器Co nt e nt edi table 属性Co nt e nt edi table是一种HTML属性，用于指定页面中的元素是否可以编辑。以下是Co nt e n t e di table的总结：Con t e n t e di table 属性可以应用于HTML元素上，如div、span、p、h1等等。

文章 目录

yma16-logo

⭐前言

大家好，我是y ma16，本文分享关于前端富文本编辑器原理——从javascript、html、css开始。
富文本编辑器
富文本编辑器是指具有格式化文本和图像编辑功能的文本编辑器

参考文档：https://w3c.github.io/selection-api/#abstract

⭐html的contenteditable 属性

全局属性 contenteditable 是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的组件以允许编辑。

contenteditable boolean (false | true) 默认 fa lse
简单理解，加上contenteditable ，html 可以编辑具有 input 输入的基本功能，所见即所得。
例：
html demo 标签配置 contentedi table

<!DOCTYPE html&gt;
<html&gt;
	<head&gt;
		<meta charset="utf-8"&gt;
		<title&gt;富文本编辑器</title&gt;
	</head&gt;
	<style&gt;
		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 元素：
rich-text

💖 输入的光标 位置（浏览器 获取 selection）

getSelect ion() method
GetSel ection ()方法返回一个 Sel ection 对象，该对象表示用户选择的文本范围或插入符号的当前位置。

⭐使用Sel ection.toStr ing () 返回 指定的文本

例：

<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>

效果如下：
selection.toString

⭐getRangeAt 获取 指定 索引 范围

函数接受一个索引值
返回，其中
结束的索引值，endOff set
开始的索引值，startOff set
效果如下图：
getRangeAt

💖 修改 光标 位置

调用 setStart() 和 setEnd() 方法，来修改一个光标的位置或拖蓝范围
Range.setStart()
Range.setStart() 方法用于设置 Range的开始位置。

如果起始节点类型是 Text、Comment 或 CDATASec ti on之一，那么 startOff set 指的是从起始节点算起字符的偏移量。对于其他 Node 类型节点，startOff set 是指从起始结点开始算起子节点的偏移量。

如果设置的起始位点在结束点之下（在文档中的位置），将会导致选区折叠，起始点和结束点都会被设置为指定的起始位置。
startNode
startNode 用于设定 Range的起始位置。

startOff set
必须为不小于 0 的整数。表示从startNode的开始位置算起的偏移量。
Range.setEnd()
Range.setEnd()
方法用于设置 Range的结束位置。

如果结束节点类型是 Text、Comment 或 CDATASec ti on之一，那么 endOff set 指的是从结束节点算起字符的偏移量。对于其他 Node 类型节点，endOff set 是指从结束结点开始算起子节点的偏移量。

如果设置的结束点在起始点之上（在文档中的位置），将会导致选区折叠，起始点和结束点都会被设置为指定的结束位置。
endNode
endNode用于设定 Range的结束位置。

endOff set
必须为不小于 0 的整数。表示从endNode的结束位置算起的偏移量。
语法

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

例：
点击不失去焦点跳转开始和结束，避免失去焦点使用 pr eventDefault

<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>

效果如下图：
riche-editor-positon

💖 设置选取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>