Skip to content

Commit 5843013

Browse files
mitya33mitya33
authored
Initial upload
1 parent 012c03b commit 5843013

File tree

3 files changed

+690
-0
lines changed

3 files changed

+690
-0
lines changed

‎demo.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!doctype html>
2+
<head>
3+
<script src='htmlon.js'></script>
4+
<link type='text/css' href='htmlon.css' rel='stylesheet' />
5+
<style>
6+
body { margin: 2rem; }
7+
</style>
8+
</head>
9+
<body>
10+
<div></div>
11+
<script>
12+
document.addEventListener('DOMContentLoaded', function() {
13+
editor = new HTMLON({
14+
container: 'div',
15+
field: 'field',
16+
buttons: ['bold', 'italic', 'uList', 'oList', 'link', 'sup', 'quote', 'heading', 'codeB'],
17+
allow_html_edit: 1,
18+
css: [
19+
'blockquote { background: #f4f4f4; border: solid 1px #d5d5d5; padding: .75em; width: 80%; margin: 0 auto; border-left: solid 2px #E43137; }',
20+
'blockquote p { color: #777; }',
21+
'blockquote p:first-child { margin-top: 0; }',
22+
'blockquote p:last-child { margin-bottom: 0; }',
23+
'blockquote small { text-align: right; display: block; }'
24+
],
25+
extra_buttons: {
26+
foo: {
27+
text: 'FOO',
28+
hint: 'This is a hint',
29+
callback: function() {
30+
this.get_cntnt_doc().execCommand('insertHTML', 0, '<img src="https://guidecore.xyz/sub/wlpad/assets/imgs/graph-icon.png" />');
31+
}
32+
}
33+
}
34+
});
35+
}, false);
36+
</script>
37+
</body>

‎htmlon.css

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/* ---
2+
| MISC, PREP
3+
--- */
4+
5+
.htmlon { display: block; position: relative; }
6+
7+
/* ---
8+
| BUTTONS
9+
--- */
10+
11+
/* general */
12+
.htmlon .buttons a { color: #222; padding: .4em .65em; font-size: .75em; border-radius: 2px; border: solid 1px; font-family: verdana; font-weight: normal; overflow: hidden; position: relative; cursor: pointer; background: white; }
13+
.htmlon.html_mode .buttons a:not(.html) { cursor: default; }
14+
.htmlon .buttons a:not(:last-child) { margin-right: 4px; }
15+
.htmlon a:hover { text-decoration: none !important; }
16+
.htmlon:not(.html_mode) a:hover { background: #eee !important; }
17+
18+
/* specific buttons */
19+
.htmlon .buttons .bold { font-weight: bold; }
20+
.htmlon .buttons .italic { font-style: italic; }
21+
.htmlon .buttons .underline { text-decoration: underline; }
22+
.htmlon .html::after { content: 'HTML'; }
23+
.htmlon.html_mode .html::after { content: 'visual'; }
24+
.htmlon.html_mode .buttons a:not(.html) { opacity: .35; }
25+
.htmlon .buttons .img input { position: absolute; opacity: 0; left: 0; width: 100%; height: 100%; top: 0; background: red; cursor: pointer; }
26+
27+
/* ---
28+
| PICKERS (font, colour)
29+
--- */
30+
31+
.htmlon .picker { position: absolute; width: 116px; top: 19px; height: 100px; padding: 3px; display: none; overflow-y: auto; }
32+
.htmlon .picker ul { list-style: none; margin: 0; padding: 0; }
33+
34+
/* colour picker */
35+
.htmlon .colour.picker ul { display: none; }
36+
.htmlon .colour.picker li { display: inline-block; margin: 3px; cursor: pointer; width: 11px; height: 11px; border: solid 1px white; }
37+
.htmlon .colour.picker li:hover { transform: rotate(45deg); }
38+
.htmlon .colour.picker input { width: 80px; border: none; padding: 2px; margin: 3px; box-sizing: }
39+
.htmlon .colour.picker a { padding: 2px; background: #ddd; border: solid 1px #999; }
40+
.htmlon .colour.picker a:hover { background: #f2f2f2; }
41+
42+
/* font picker */
43+
.htmlon .font.picker li { border: 1px solid transparent; padding: 0 2px; margin: 2px; cursor: default; font-size: 13px; color: #222; }
44+
.htmlon .font.picker li:hover { border-color: #ddd; background: #bbb; }
45+
46+
/* ---
47+
| STAGE - iframe and HTML textarea
48+
--- */
49+
50+
.htmlon iframe, .htmlon textarea { margin-top: 1rem; border: solid 1px #777; box-sizing: border-box; background: #f2f2f2; width: 800px; max-width: 100%; height: 320px; }
51+
.htmlon.html_mode iframe { display: none !important; }
52+
.htmlon textarea {
53+
padding: 12px;
54+
font-family: "Courier new";
55+
font-size: .9em;
56+
color: #d22;
57+
display: none !important;
58+
-moz-tab-size:4;
59+
-o-tab-size:4;
60+
-webkit-tab-size:4;
61+
tab-size:4;
62+
overflow-x: hidden;
63+
}
64+
.htmlon.html_mode textarea { display: block !important; }

0 commit comments

Comments
 (0)