liquid_feedback_frontend
view static/wysihtml/example.html @ 1348:5edb6634cf04
Fixed field name
| author | bsw |
|---|---|
| date | Mon Aug 06 13:13:08 2018 +0200 (2018-08-06) |
| parents | 32cc544d5a5b |
| children |
line source
1 <!DOCTYPE html>
3 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
4 <meta charset="utf-8">
6 <title>wysihtml - Advanced Demo</title>
8 <style>
9 body {
10 font-family: Verdana;
11 font-size: 11px;
12 }
14 h2 {
15 margin-bottom: 0;
16 }
18 small {
19 display: block;
20 margin-top: 40px;
21 font-size: 9px;
22 }
24 small,
25 small a {
26 color: #666;
27 }
29 a {
30 color: #000;
31 text-decoration: underline;
32 cursor: pointer;
33 }
35 #toolbar [data-wysihtml-action] {
36 float: right;
37 }
39 #toolbar,
40 textarea {
41 width: 920px;
42 padding: 5px;
43 -webkit-box-sizing: border-box;
44 -ms-box-sizing: border-box;
45 -moz-box-sizing: border-box;
46 box-sizing: border-box;
47 }
49 textarea {
50 height: 280px;
51 border: 2px solid green;
52 font-family: Verdana;
53 font-size: 11px;
54 }
56 textarea:focus {
57 color: black;
58 border: 2px solid black;
59 }
61 .wysihtml-command-active {
62 font-weight: bold;
63 }
65 [data-wysihtml-dialog] {
66 margin: 5px 0 0;
67 padding: 5px;
68 border: 1px solid #666;
69 }
71 a[data-wysihtml-command-value="red"] {
72 color: red;
73 }
75 a[data-wysihtml-command-value="green"] {
76 color: green;
77 }
79 a[data-wysihtml-command-value="blue"] {
80 color: blue;
81 }
83 div.editable {
84 border: 1px dashed gray;
85 padding: 10px;
86 }
87 </style>
89 <h1>wysihtml - Advanced Editor Example</h1>
91 <h2>Example of editor with iframe wrapper and as textarea replacement</h2>
92 <br>
93 <form class="ewrapper">
94 <div class="toolbar" style="display: none;">
95 <a data-wysihtml-command="bold" title="CTRL+B">bold</a> |
96 <a data-wysihtml-command="italic" title="CTRL+I">italic</a> |
97 <a data-wysihtml-command="superscript" title="sup">superscript</a> |
98 <a data-wysihtml-command="subscript" title="sub">subscript</a> |
99 <a data-wysihtml-command="createLink">link</a> |
100 <a data-wysihtml-command="removeLink"><s>link</s></a> |
101 <a data-wysihtml-command="formatBlock" data-wysihtml-command-value="h1">h1</a> |
102 <a data-wysihtml-command="formatBlock" data-wysihtml-command-value="h2">h2</a> |
103 <a data-wysihtml-command="formatBlock" data-wysihtml-command-blank-value="true">plaintext</a> |
104 <a data-wysihtml-command="insertUnorderedList">insertUnorderedList</a> |
105 <a data-wysihtml-command="insertOrderedList">insertOrderedList</a> |
106 <a data-wysihtml-command="formatCode" data-wysihtml-command-value="language-html">Code</a> |
107 <a data-wysihtml-command="undo">undo</a> |
108 <a data-wysihtml-command="redo">redo</a> |
109 <a data-wysihtml-command="insertSpeech">speech</a>
110 <a data-wysihtml-action="change_view">switch to html view</a>
112 <div data-wysihtml-dialog="createLink" style="display: none;">
113 <label>
114 Link:
115 <input data-wysihtml-dialog-field="href" value="http://">
116 </label>
117 <a data-wysihtml-dialog-action="save">OK</a> <a data-wysihtml-dialog-action="cancel">Cancel</a>
118 </div>
120 </div>
121 <br>
122 <textarea class="editable" placeholder="Enter text ..."></textarea>
123 <br><input type="reset" value="Reset form!">
124 </form>
126 <br/><br><h2>Example of editor without iframe wrapper</h2><br/>
127 <form class="ewrapper">
128 <div class="toolbar" style="display: none;">
129 <a data-wysihtml-command="bold" title="CTRL+B">bold</a> |
130 <a data-wysihtml-command="italic" title="CTRL+I">italic</a> |
131 <a data-wysihtml-command="createLink">link</a> |
132 <a data-wysihtml-command="removeLink"><s>link</s></a> |
133 <a data-wysihtml-command="formatBlock" data-wysihtml-command-value="h1">h1</a> |
134 <a data-wysihtml-command="formatBlock" data-wysihtml-command-value="h2">h2</a> |
135 <a data-wysihtml-command="formatBlock" data-wysihtml-command-blank-value="true">plaintext</a> |
136 <a data-wysihtml-command="insertUnorderedList">insertUnorderedList</a> |
137 <a data-wysihtml-command="insertOrderedList">insertOrderedList</a> |
138 <a data-wysihtml-command="undo">undo</a> |
139 <a data-wysihtml-command="redo">redo</a> |
140 <a data-wysihtml-command="insertSpeech">speech</a>
141 <a data-wysihtml-action="change_view">switch to html view</a>
143 <div data-wysihtml-dialog="createLink" style="display: none;">
144 <label>
145 Link:
146 <input data-wysihtml-dialog-field="href" value="http://">
147 </label>
148 <a data-wysihtml-dialog-action="save">OK</a> <a data-wysihtml-dialog-action="cancel">Cancel</a>
149 </div>
151 </div>
152 <br>
153 <div class="editable" data-placeholder="Enter text ..."></div>
154 <br><input type="reset" value="Reset form!">
155 </form>
157 <h2>Events:</h2>
158 <div id="log"></div>
160 <small>powered by <a href="https://github.com/Voog/wysihtml" target="_blank">wysihtml</a>.</small>
162 <script src="jquery.1.10.2.js"></script>
164 <script src="wysihtml.js"></script>
165 <script src="wysihtml.all-commands.js"></script>
166 <!--<script src="wysihtml.table_editing.js"></script>-->
167 <script src="wysihtml.toolbar.js"></script>
169 <script src="wysihtml_liquidfeedback_rules.js"></script>
171 <script>
172 var editors = [];
173 $('.ewrapper').each(function(idx, wrapper) {
174 var e = new wysihtml.Editor($(wrapper).find('.editable').get(0), {
175 toolbar: $(wrapper).find('.toolbar').get(0),
176 parserRules: wysihtmlParserRules,
177 stylesheets: "css/stylesheet.css",
178 useLineBreaks: true
179 //showToolbarAfterInit: false
180 });
181 editors.push(e);
182 });
183 </script>