repl.it
@AdCharity/

Offline Editor

HTML, CSS, JS

No description

fork
loading
Files
  • index.html
  • Editor.png
  • optimized.css
  • optimized.html
  • optimized.js
  • script.js
  • style.css
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
<html>
	<head>
		<title>Offline Editor</title>
		<html lang="en">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="style.css"/>
		<link rel="icon" href="Editor.png">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<meta charset="UTF-8">
		<script src="script.js"></script>
	</head>
	<body >
		<!--Snack Bar-->
		<div id="snackbar"><p id="snackbarContent"></p></div>
		
		<!--Actual App-->
		<div id="importantbar"></div>
		<img src="Editor.png" id="logo"></img>
		
		<div id="heading" contenteditable="true" spellcheck="false">
		</div>

		<div id="options">
		<!-- Underline -->
    	<button title="Underline selected text" class="tool-items"  onclick="document.execCommand('underline', false, '');"><u>U</u></button>
		<!-- Italic -->
		<button title="Italicize selected text" class="tool-items" onclick="document.execCommand('italic', false, '');"><i>I</i></button>
		<!-- Bold -->
		<button title="Bold selected text" class="tool-items" onclick="document.execCommand('bold', false, '');"><strong>B</strong></button>
		<!-- Hyperlink -->
		<button title="Insert hyperlink" class="tool-items" onclick="link()"><u>πŸ”—</u></button>
		<!-- Cut -->
		<button title="Cut text" class="tool-items" onclick="document.execCommand('cut',false,'')">βœ‚οΈ</button>
		<!-- Backward -->
    	<button title="Undo" class="tool-items" onclick="document.execCommand('undo',false,'')">πŸ”™</button>
		<!-- Forward -->
   		<button title="Forward" class="tool-items" onclick="document.execCommand('redo',false,'')">➑️</button>
		<!-- Font Size -->
		<button title="Change font size of selected text" class="tool-items" onclick="font();">πŸ—š</button>		
		<!-- Color -->
		<button title="Change color of selected text" class="tool-items" onclick="changeColor()">🎨</button>
		<!-- Highlight -->
		<button title="Highlight selected text" class="tool-items" onclick="highColor();">✨</button>
		<!-- Strike -->
		<button title="Add strike through selected text" class="tool-items" onclick="document.execCommand('strikeThrough',false,'')"><strike>Strike</strike></button>
		<!-- Copy -->
		<button title="Copy all" class="tool-items" onclick="copy()">πŸ“‹</button>
		<!-- Plain text -->
		<button title="Format document into plain text" class="tool-items" onclick="print();">πŸ–¨οΈ</button>
		<!-- Page -->
		<button title="Add a new page" class="tool-items" onclick="document.execCommand('insertHorizontalRule',false,'')">πŸ—</button>
		<!-- Jutify -->
		<button title="Push selected content left" class="tool-items" onclick="document.execCommand('justifyLeft',false,'')">βͺ</button>
		<button title="Center selected content" class="tool-items" onclick="document.execCommand('justifyCenter',false,'')">⏸️</button>
		<button title="Push selected content right" class="tool-items" onclick="document.execCommand('justifyRight',false,'')">⏩</button>
		<!-- Delete -->
		<button title="Delete text" class="tool-items" onclick="document.execCommand('delete',false,'')">Del</button>
		</div>
		<div id="editor" contenteditable="true" spellcheck="false"></div>
	</body>
</html>
result
console
?