自定义富文本编辑器（一）

空城皆是旧梦

已于 2022-07-21 10:08:45 修改

阅读量323

点赞数 2

文章标签： css html

于 2022-07-21 10:06:27 首次发布

本文链接：https://blog.csdn.net/qq_36012563/article/details/125906261

版权

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="lauwcy">
		<title>编辑器</title>
		<style>
			article{
				border: solid 1px silver;
				box-shadow: inset 0 0 5px silver;
				padding: 10px;
				min-height: 15rem;
				overflow: auto;
				resize: vertical;
			}
			button{
				margin: 5px 0;
				padding: 5px 5px;
				background-color: silver;
				border: 1px solid silver;
			}
		</style>
	</head>
	<body>
		<button data-cmd="formatBlock" data-value="H1">h1</button>
		<button data-cmd="formatBlock" data-value="H2">h2</button>
		<button data-cmd="formatBlock" data-value="H3">h3</button>
		<button data-cmd="formatBlock" data-value="H4">h4</button>
		<button data-cmd="formatBlock" data-value="P">P</button>
		<button data-cmd="foreColor" data-value="red">red</button>
		<button data-cmd="backColor" data-value="yellow">yellow</button>
		<button data-cmd="bold" data-value="">Bold</button>
		<article contentEditable="true"></article>
		<script>
			var btns = document.querySelectorAll('button')

			for (var i = 0; i < btns.length; i++) {
				var btn = btns[i]

				btn.onclick = function(ev) {
					var cmd = ev.target.dataset.cmd
					var value = ev.target.dataset.value

					switch (cmd){
						case 'formatBlock':
							document.execCommand(cmd, false, '<' + value + '>')
							break;
						default:
							document.execCommand('styleWithCSS', false, true)
							document.execCommand(cmd, false, value)
							break;
					}
				}
			}
		</script>
	</body>
</html>