JavaScript は最も単純なリッチテキストエディターを作成します

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

contenteditable属性を持つ要素はdiv編集領域として使用されます。ユーザーがボタンをクリックすると、対応する JavaScript 関数がdocument.execCommand()メソッドを呼び出し、それによって現在選択されているテキストのスタイルまたはプロパティが変更されます。具体的には、以下の 4 つの方法を使用します。

bold(): 現在選択されているテキストのフォントを太字にします。
italic(): 現在選択されているテキストのフォントを斜体に設定します。
underline(): 現在選択されているテキストのフォントに下線を引きます。
fontSize(): プロンプトボックスが表示され、ユーザーはフォントサイズを入力し、現在選択されているテキストのフォントサイズをユーザーが入力した値に設定します。
fontColor(): プロンプトボックスが表示され、ユーザーが色を入力し、現在選択されているテキストのフォントの色をユーザーが入力した値に設定します。

ユーザーがボタンをクリックすると、対応する関数が呼び出され、document.execCommand()メソッドが実行され、現在選択されているテキストのスタイルまたはプロパティが関数で指定された値に変更されます。execCommand()このメソッドは一部のブラウザでは非推奨になっているため、他の代替手段の使用を検討する必要があることに注意してください。

JavaScript は最も単純なリッチ テキスト エディターを作成します

おすすめ

JavaScript は最も単純なリッチテキストエディターを作成します