JavaScript escribe el editor de texto enriquecido más simple

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>富文本编辑器</title>
</head>
<body>
	<div contenteditable="true" id="editor"></div>
	<button onclick="bold()">加粗</button>
	<button onclick="italic()">斜体</button>
	<button onclick="underline()">下划线</button>
	<button onclick="fontSize()">字号</button>
	<button onclick="fontColor()">字体颜色</button>
	<button onclick="getHtml()">获取 HTML</button>

	<script>
		var editor = document.getElementById("editor");

		function bold() {
			document.execCommand("bold", false, null);
		}

		function italic() {
			document.execCommand("italic", false, null);
		}

		function underline() {
			document.execCommand("underline", false, null);
		}

		function fontSize() {
			var size = prompt("请输入字号", "16px");
			document.execCommand("fontSize", false, size);
		}

		function fontColor() {
			var color = prompt("请输入颜色", "#000000");
			document.execCommand("foreColor", false, color);
		}

		function getHtml() {
			var html = editor.innerHTML;
			console.log(html);
		}
	</script>
</body>
</html>

contenteditableUn elemento con el atributo se utiliza divcomo área de edición. Cuando el usuario hace clic en el botón, la función de JavaScript correspondiente llamará document.execCommand()al método, cambiando así el estilo o la propiedad del texto seleccionado actualmente. Específicamente, utilizamos los siguientes cuatro métodos:

bold(): Hace que la fuente del texto seleccionado actualmente esté en negrita;
italic(): establece la fuente del texto actualmente seleccionado en cursiva;
underline(): Subraya la fuente del texto actualmente seleccionado;
fontSize(): Aparece un cuadro emergente que le permite al usuario ingresar el tamaño de fuente y luego establece el tamaño de fuente del texto actualmente seleccionado al valor ingresado por el usuario;
fontColor(): Aparece un cuadro emergente que permite al usuario ingresar un color y luego establece el color de fuente del texto actualmente seleccionado al valor ingresado por el usuario.

Cuando el usuario haga clic en el botón, se llamará a la función correspondiente y luego document.execCommand()se ejecutará el método, que modificará el estilo o la propiedad del texto actualmente seleccionado al valor especificado por la función. Cabe señalar que, dado que execCommand()el método ha quedado obsoleto en algunos navegadores, debemos considerar el uso de otras alternativas.

JavaScript escribe el editor de texto enriquecido más simple

Supongo que te gusta