-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
70 lines (70 loc) · 6.36 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
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Rich Text Editor</title>
<link href="favicon.ico" rel="shortcut icon">
<link href="rich-text-editor.css" rel="stylesheet">
<style>@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,400i,700i|Roboto+Mono:400,700,400i,700i);body,kbd{font-family:'Roboto Condensed',Helmet,FreeSans,Sans-Serif}.rich-text-editor-source,code{font-family:'Roboto Mono','Courier New',Courier,'Nimbus Mono L',Monospace;font-size:86%}body,html{padding:.5em;margin:0;font-size:18px;line-height:1.5;background:#ffa;color:#000}.rich-text-editor-tool{opacity:1;visibility:visible;background:#000}.rich-text-editor-tool a{color:#aaa}.rich-text-editor-tool a:focus,.rich-text-editor-tool a:hover{background:0 0;color:#ccc}.rich-text-editor-source{background-color:#000;color:#bbb;font-size:70%;line-height:1.25;text-shadow:0 1px 3px #000}a{color:#00a;text-decoration:none}.rich-text-editor{box-shadow:0 1px 3px rgba(0,0,0,.4)}.rich-text-editor-view{padding:2em}.rich-text-editor-view abbr,a:focus,a:active{border:none;color:#a00}.rich-text-editor-view kbd{display:inline-block;background:#eee;color:#444;text-shadow:0 1px 0 #fff;border-top:1px solid #f5f5f5;border-bottom:1px solid #ccc;padding:0 .35em;box-shadow:0 1px 3px rgba(0,0,0,.2)}</style>
</head>
<body style="padding-top:3.5em;">
<p style="border-bottom:1px dashed;position:absolute;top:0;right:0;left:0;height:3em;line-height:3em;margin:0;padding:0 1em;">Like this project? Please support my <a href="https://github.com/mecha-cms">Mecha CMS</a> project too. Thank you!</p>
<form method="get">
<p><textarea name="content" placeholder="Content goes here…"><p><b style="font-size:150%;color:#00a;">Rich Text Editor</b></p><p>A rich text editor that is designed to accept limited set of inline <abbr title="Hyper Text Markup Language">HTML</abbr> tags only.</p><p>This rich text editor works best on any form that are accessible in the public such as<br>comment form in a blog, chat form in a social media and question or answer form in a forum.</p><p><span style="font-size:120%;">Features</span></p><p>• Tools: <i>Bold</i>, <i>Italic</i>, <i>Underline</i>, <i>Link</i>, <i>Source</i><br>• Keyboard Shortcuts<br>• Source View<br>• HTML5 Output<br>• Simple <abbr title="Application Programming Interface">API</abbr><br>• Option to Disable the <kbd>Enter</kbd> Key<br>• Option to Disable the Source View<br>• <abbr title="Cross-Site Scripting">XSS</abbr> Protection.</p></textarea></p>
<p><button type="submit">Submit</button></p>
</form>
<h2>Examples</h2>
<ul>
<li><a href="rich-text-editor.html" target="_blank">No Idea?</a></li>
<li><a href="rich-text-editor.enter-x.html" target="_blank">Disable Enter Key</a></li>
<li><a href="rich-text-editor.x-x.html" target="_blank">Disable Source View</a></li>
<li><a href="rich-text-editor.tool-x.html" target="_blank">Editor Tools: Hidden</a></li>
<li><a href="rich-text-editor.tool-v.html" target="_blank">Editor Tools: Visible</a></li>
<li><a href="rich-text-editor.tool-state.html" target="_blank">Editor Tools: State</a></li>
<li><a href="rich-text-editor.tool-t.html" target="_blank">Editor Tools: Trigger</a></li>
<li><a href="rich-text-editor.tool-custom.html" target="_blank">Custom Editor Tools</a></li>
<li><a href="rich-text-editor.tool-position.html" target="_blank">Custom Editor Tools: Position</a></li>
<li><a href="rich-text-editor.t-custom.html" target="_blank">Custom Editor Tools: Icons</a></li>
<li><a href="rich-text-editor.t.code.html" target="_blank">Custom Tool: Code</a></li>
<li><a href="rich-text-editor.t.abbr.html" target="_blank">Custom Tool: Abbreviation</a></li>
<li><a href="rich-text-editor.t.font.html" target="_blank">Custom Tool: Font</a></li>
<li><a href="rich-text-editor.t.color.html" target="_blank">Custom Tool: Color</a></li>
<li><a href="rich-text-editor.t.img.html" target="_blank">Custom Tool: Image</a></li>
<li><a href="rich-text-editor.source-markdown.html" target="_blank">Markdown Output</a></li>
<li><a href="rich-text-editor.source-markdown.view-markdown.html" target="_blank">Markdown Output & Markdown View</a></li>
<li><a href="rich-text-editor.source-b-b-code.html" target="_blank">BBCode Output</a></li>
</ul>
<h2>Tests</h2>
<ul>
<li><a href="rich-text-editor.test.t.html" target="_blank">Test Tool</a></li>
<li><a href="rich-text-editor.test.t.a.html" target="_blank">Test Link Tool</a></li>
<li><a href="rich-text-editor.test.required.html" target="_blank">Test <abbr title="Hyper Text Markup Language Version 5">HTML5</abbr> <code>required</code> Attribute</a></li>
<li><a href="rich-text-editor.test.focus.html" target="_blank">Test Focus</a></li>
<li><a href="rich-text-editor.test.view-key.html" target="_blank">Test Custom Keyboard Shortcut</a></li>
<li><a href="rich-text-editor.test.paste.html" target="_blank">Test Paste</a></li>
<li><a href="rich-text-editor.test.v.html" target="_blank">Test Get Selection Value</a></li>
<li><a href="rich-text-editor.test.t-i.html" target="_blank">Test Tool Index</a></li>
<li><a href="rich-text-editor.test.d.html" target="_blank">Test Dialog</a></li>
<li><a href="rich-text-editor.test.i.html" target="_blank">Test Insert</a></li>
<li><a href="rich-text-editor.test.w.html" target="_blank">Test Wrap</a></li>
<li><a href="rich-text-editor.test.is.html" target="_blank">Test State</a></li>
<li><a href="rich-text-editor.test.destroy.html" target="_blank">Test Destroy</a></li>
</ul>
<script src="rich-text-editor.js"></script>
<script>
var editor = new RTE(document.querySelector('textarea'), {
tools: ['b', 'i', 'u', 'a', 'x'],
enter: function() {
console.log('enter');
},
x: function(e, t) {
console.log('x:' + t);
},
update: function() {
console.log('update');
}
});
</script>
</body>
</html>