Rich-Text-Editor/example.html at main · MJDaws0n/Rich-Text-Editor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Rich Text Editor Example</title>
	<link rel="stylesheet" href="example.css">
</head>

<body>
	<div class="editor-toolbar">
		<button type="button" id="bold-btn"><b>B</b></button>
		<button type="button" id="italic-btn"><i>I</i></button>
		<button type="button" id="underline-btn"><u>U</u></button>
		<button type="button" id="strikethrough-btn"><s>S</s></button>
		<input type="color" id="highlight-color" value="#ffff00">
		<button type="button" id="highlight-btn">Remove Highlight</button>
		<button type="button" id="remove-formatting-btn">Remove Formatting</button>
		<!-- Alignment buttons -->
		<button type="button" id="align-left-btn">Left Align</button>
		<button type="button" id="align-center-btn">Center Align</button>
		<button type="button" id="align-right-btn">Right Align</button>
	</div>
	<div id="editor" class="richtext-editor" contenteditable="true"></div>
	<script src="richtext-editor.js"></script>
	<script>
		// Example usage
		const editor = new RichTextEditor(document.getElementById('editor'));

		document.getElementById('bold-btn').onclick = () => editor.toggleFormat('bold');
		document.getElementById('italic-btn').onclick = () => editor.toggleFormat('italic');
		document.getElementById('underline-btn').onclick = () => editor.toggleFormat('underline');
		document.getElementById('strikethrough-btn').onclick = () => editor.toggleFormat('strikethrough');


		document.getElementById('highlight-color').oninput = (e) => editor.applyFormat('highlight', { '--highlight': e.target.value });
		document.getElementById('highlight-btn').onclick = () => editor.unapplyFormat('highlight');
		document.getElementById('remove-formatting-btn').onclick = (e) => {
			e.preventDefault();
			if(editor.getCaretIndex() - editor.getCaretStartIndex() > 0 && editor.focused()) { // Will return null if no text is selected
				editor.unapplyFormat();
			} else{
				editor.unapplyAllFormat();
			}
		};

		// Alignment button handlers
		document.getElementById('align-left-btn').onclick = () => {clearAlign(); editor.toggleFormatOnLine('align-left')};
		document.getElementById('align-center-btn').onclick = () => {clearAlign(); editor.toggleFormatOnLine('align-center')};
		document.getElementById('align-right-btn').onclick = () => {clearAlign(); editor.toggleFormatOnLine('align-right')};


		function clearAlign(){
			editor.removeFormatFromLine('align-left');
			editor.removeFormatFromLine('align-center');
			editor.removeFormatFromLine('align-right');
		}

		editor.on('change', (content, html) => console.log(content));
		editor.on('select', ([start, end], text) => {
			if (editor.hasFormat('bold')) {
				document.getElementById('bold-btn').classList.add('active');
			} else {
				document.getElementById('bold-btn').classList.remove('active');
			}
			if (editor.hasFormat('italic')) {
				document.getElementById('italic-btn').classList.add('active');
			} else {
				document.getElementById('italic-btn').classList.remove('active');
			}
			if (editor.hasFormat('underline')) {
				document.getElementById('underline-btn').classList.add('active');
			} else {
				document.getElementById('underline-btn').classList.remove('active');
			}
			if (editor.hasFormat('strikethrough')) {
				document.getElementById('strikethrough-btn').classList.add('active');
			} else {
				document.getElementById('strikethrough-btn').classList.remove('active');
			}
			if (editor.hasFormatContained('highlight')) {
				document.getElementById('highlight-btn').classList.add('active');
			} else {
				document.getElementById('highlight-btn').classList.remove('active');
			}
		});

		// Set some test content using setContent
		editor.setContent(
			`<div><span class="bold">Bold</span><span> </span><span class="italic">italic</span><span> </span><span class="underline">underline</span><span> </span><span class="strikethrough">strikethrough</span><span> </span><span class="highlight" style="--highlight: #fffb00;">highlight</span></div><div class="align-center"><span>center</span></div><`
		);
	</script>
</body>
</html>