Skip to content

Commit 1e6e804

Browse files
tirtharajsinhatirtharajsinha
authored
added real time html editor dir
1 parent a8313cd commit 1e6e804

File tree

2 files changed

+100
-0
lines changed

2 files changed

+100
-0
lines changed

‎real-time-HTML-text-editor-master/README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# real-time-HTML-text-editor
2+
real time HTML editor using HTML5,CSS 3,javascript.
3+
using ace.js file.
4+
dark theme.

‎real-time-HTML-text-editor-master/online editor.html‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head><title>HTML online editor</title>
4+
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/test/ace.js">
5+
</script>
6+
7+
<style>
8+
9+
html,body { margin:0; padding:0; height:100%; width:100%; overflow: hidden;}
10+
11+
#editor {
12+
height: 100%;
13+
width:50%;
14+
display:inline-block;
15+
}
16+
17+
#container {
18+
height:100%;
19+
width:auto;
20+
white-space : nowrap;
21+
overflow : hidden;
22+
position:relative;
23+
}
24+
25+
#iframe {
26+
height:100%;
27+
display:inline-block;
28+
width:50%;
29+
}
30+
31+
/* disable tag matching */
32+
.ace_editor .ace_marker-layer .ace_bracket { display: none }
33+
34+
</style>
35+
<head>
36+
<body onload="ready()">
37+
<div id='container'>
38+
39+
<div id="editor">
40+
41+
</div>
42+
43+
<iframe id='iframe' frameBorder="0">
44+
</iframe>
45+
</div>
46+
<script>
47+
48+
function update()
49+
{
50+
var idoc = document.getElementById('iframe').contentWindow.document;
51+
52+
idoc.open();
53+
idoc.write(editor.getValue());
54+
idoc.close();
55+
}
56+
57+
function setupEditor()
58+
{
59+
window.editor = ace.edit("editor");
60+
editor.setTheme("ace/theme/monokai");
61+
editor.getSession().setMode("ace/mode/html");
62+
editor.setValue(`<!DOCTYPE html>
63+
<html>
64+
<head>
65+
</head>
66+
67+
<body>
68+
</body>
69+
70+
</html>`,1); //1 = moves cursor to end
71+
72+
editor.getSession().on('change', function() {
73+
update();
74+
});
75+
76+
editor.focus();
77+
78+
79+
editor.setOptions({
80+
fontSize: "16pt",
81+
showLineNumbers: false,
82+
showGutter: false,
83+
vScrollBarAlwaysVisible:true,
84+
enableBasicAutocompletion: false, enableLiveAutocompletion: false
85+
});
86+
87+
editor.setShowPrintMargin(false);
88+
editor.setBehavioursEnabled(false);
89+
}
90+
function ready(){
91+
setupEditor();
92+
update();
93+
}
94+
</script>
95+
</body>
96+
</html>

0 commit comments

Comments
 (0)