-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path_editor-partial.html
125 lines (119 loc) · 5.81 KB
/
_editor-partial.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
{{ it | withoutKeys(['it','error']) | assignTo: attrs }}
<div class="editor">
<div class="editor-toolbar">
<div class="btn" data-cmd="bold" title="Bold text (CTRL+B)">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</div>
<div class="btn" data-cmd="italic" title="Italics (CTRL+I)">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z"/>
</svg>
</div>
<div class="btn" data-cmd="link" title="Insert Link (CTRL+L)">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>
</svg>
</div>
<div class="btn" data-cmd="quote" title="Blockquote (CTRL+Q)">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</div>
<div class="btn" data-cmd="image" title="Insert Image (CTRL+SHIFT+L)">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</div>
<div class="btn" data-cmd="code" title="Insert Code (CTRL+<)">
<svg width="24" height="24" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0V0z"/>
<path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
</svg>
</div>
<div class="btn" data-cmd="heading" title="H2 Heading (CTRL+H)">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M9 4v3h5v12h3V7h5V4H9zm-6 8h3v7h3v-7h3V9H3v3z"/>
</svg>
</div>
<div class="btn" data-cmd="ol" title="Numbered List (ALT+1)">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</div>
<div class="btn" data-cmd="ul" title="Bulleted List (ALT+-)">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/>
<path fill="none" d="M0 0h24v24H0V0z"/>
</svg>
</div>
<div class="btn" data-cmd="strikethrough" title="Strike Through (ALT+S)">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z"/>
</svg>
</div>
<div class="btn" data-cmd="undo" title="undo (CTRL+Z)">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"/>
</svg>
</div>
<div class="btn" data-cmd="redo" title="redo (CTRL+SHIFT+Z)">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/>
</svg>
</div>
<div class="btn" data-cmd="save" title="Save (CTRL+S)">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/>
</svg>
</div>
</div>
<textarea {{ attrs | htmlAttrs }}>{{content}}</textarea>
<a class="input-help" href="http://templates.servicestack.net/">template syntax</a>
{{#if error}}<div class="error">{{error}}</div>{{/if}}
</div>
<style>
.editor textarea {
padding: .5%;
width: 99%;
max-width: 99%;
min-width: 99%;
}
.editor-toolbar {
border: 1px solid #eee;
border-bottom: none;
margin: 0 -2px 0 0;
}
.editor-toolbar .btn {
margin: 5px;
padding: 2px 5px;
border-color: transparent;
background: none;
}
.editor-toolbar .btn:hover {
border-color: #ccc;
}
</style>
{{#raw}}
<script src="/editor.js"></script>
<script>
var editor = new Editor(document.querySelector(".editor"), {
save() {
let form = this.target.closest('form');
form.querySelector('[type=submit]').click(); // form.submit() does not fire submit event
}
})
</script>
{{/raw}}