This repository has been archived by the owner on Dec 27, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
102 lines (96 loc) · 4.33 KB
/
index.html
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
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>HTML Rich Text Editor</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrapper">
<h1 id="main-title">New Blog</h1>
<input type="text" placeholder="Title" id="title">
<div class="options">
<button onClick="onOptionClick(this, 'bold')" id="btn-bold">
<i class="fas fa-bold"></i>
</button>
<button onClick="onOptionClick(this, 'italic')" id="btn-italic">
<i class="fas fa-italic"></i>
</button>
<button onClick="onOptionClick(this, 'strikeThrough')" id="btn-strikethrough">
<i class="fas fa-strikethrough"></i>
</button>
<button onClick="onOptionClick(this, 'underline')" id="btn-underline">
<i class="fas fa-underline"></i>
</button>
<div class="seperator"></div>
<div id="btn-emoji" class="emoji-dropdown-trigger">😀</div>
<div class="seperator"></div>
<div class="dropdown-trigger" id="btn-style">
Normal
<i class="fas fa-angle-down align-end"></i>
<div class="dropdown-content">
<p class="dropdown-item" onclick="transform('fontSize', '3')">Normal</p>
<h1 class="dropdown-item" onclick="transform('fontSize', '7')">Title</h1>
<h2 class="dropdown-item" onclick="transform('fontSize', '6')">Subtitle</h2>
<h3 class="dropdown-item" onclick="transform('fontSize', '5')">Heading 1</h3>
<h4 class="dropdown-item" onclick="transform('fontSize', '4')">Heading 2</h4>
<p class="dropdown-item" onclick="transform('fontSize', '2')" style="font-size: small;">Small 1</p>
<p class="dropdown-item" onclick="transform('fontSize', '1')" style="font-size: x-small;">Small 2</p>
</div>
</div>
<div class="seperator"></div>
<div class="dropdown-trigger" id="btn-font">
Verdana
<i class="fas fa-angle-down align-end"></i>
<div class="dropdown-content">
<p class="dropdown-item" onclick="transform('fontName', 'Verdana')" style="font-family: 'Verdana';">Verdana
</p>
<p class="dropdown-item" onclick="transform('fontName', 'Times New Roman')"
style="font-family: 'Times New Roman';">Times New Roman</p>
<p class="dropdown-item" onclick="transform('fontName', 'Arial')" style="font-family: 'Arial';">Arial</p>
<p class="dropdown-item" onclick="transform('fontName', 'Courier New')" style="font-family: 'Courier New';">
Courier New</p>
<p class="dropdown-item" onclick="transform('fontName', 'Tahoma')" style="font-family: 'Tahoma';">Tahoma</p>
</div>
</div>
<div class="seperator"></div>
<button onClick="transform('justifyLeft', null)" id="btn-justify-left">
<i class="fas fa-align-left"></i>
</button>
<button onClick="transform('justifyCenter', null)" id="btn-justify-center">
<i class="fas fa-align-center"></i>
</button>
<button onClick="transform('justifyRight', null)" id="btn-justify-right">
<i class="fas fa-align-right"></i>
</button>
<div class="seperator"></div>
<button onClick="onOptionClick(this, 'insertOrderedList')" id="btn-ordered-list">
<i class="fas fa-list-ol"></i>
</button>
<button onClick="onOptionClick(this, 'insertUnorderedList')" id="btn-unordered-list">
<i class="fas fa-list-ul"></i>
</button>
<div class="seperator"></div>
<button onClick="onAddCodeBlockClick(this)" id="btn-code-block">
<i class="fas fa-code"></i>
</button>
<button onClick="onCreateLinkClick()">
<i class="fas fa-link"></i>
</button>
<div class="seperator"></div>
<button onClick="onInsertImageClick()">
<i class="fas fa-image"></i>
</button>
</div>
<iframe name="editor" id="editor"></iframe>
</div>
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"
integrity="sha384-GqVMZRt5Gn7tB9D9q7ONtcp4gtHIUEW/yG7h98J7IpE3kpi+srfFyyB/04OV6pG0"
crossorigin="anonymous"></script>
<script src="./components/dropdown.js"></script>
<script src="./components/emoji-dropdown.js"></script>
<script src="./utils.js"></script>
<script src="./script.js"></script>
</body>
</html>