Mercurial Hosting > freedit

comparison src/test/tiny.html @ 35:1ce75c5ab0f7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
minor
author Franklin Schmidt <fschmidt@gmail.com>
date Wed, 03 Aug 2022 14:13:12 -0600
parents 72a1b77b4548
children 3354d4ac89f8
comparison
equal deleted inserted replaced
34:c8d47981c74f 35:1ce75c5ab0f7
1 <!doctype html> 1 <!doctype html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1"> 4 <meta name="viewport" content="width=device-width, initial-scale=1">
5 <script src="/site.js"></script>
5 <script src="http://tinymce.luan.software/tinymce.min.js" xreferrerpolicy="origin"></script> 6 <script src="http://tinymce.luan.software/tinymce.min.js" xreferrerpolicy="origin"></script>
6 <style> 7 <style>
8 input[type="file"] {
9 display: none;
10 }
7 </style> 11 </style>
8 <script> 12 <script>
9 function videoIframe(url) { 13 function videoIframe(url) {
10 return '<iframe data-video="'+url+'" width="560" height="315" frameborder="0" allowfullscreen src="'+url+'"></iframe>'; 14 return '<iframe data-video="'+url+'" width="560" height="315" frameborder="0" allowfullscreen src="'+url+'"></iframe>';
11 } 15 }
91 if(html) return html; 95 if(html) return html;
92 } 96 }
93 return '<a data-video="'+url+'" href="'+url+'">'+url+'</a>'; 97 return '<a data-video="'+url+'" href="'+url+'">'+url+'</a>';
94 } 98 }
95 99
100 function uploaded(input,url,filename) {
101 input.parentNode.parentNode.querySelector('input[type="url"]').value = url;
102 }
103
104 let imageFileHtml = '<input type=file accept="image/*" onchange="upload(this,uploaded)">';
105 imageFileHtml += '<button class="tox-button tox-button--secondary" onclick="fileButtonClick(this)">Upload Image</button>';
106
107 let videoFileHtml = '<input type=file accept="video/*" onchange="upload(this,uploaded)">';
108 videoFileHtml += '<button class="tox-button tox-button--secondary" onclick="fileButtonClick(this)">Upload Video</button>';
96 109
97 function tinymceSetup(editor) { 110 function tinymceSetup(editor) {
111
112 editor.ui.registry.addButton('insertLink', {
113 icon: 'link',
114 tooltip: 'Insert link',
115 onAction: function(api) {
116 editor.windowManager.open({
117 title: 'Insert Link',
118 body: {
119 type: 'panel',
120 items: [
121 {
122 type: 'urlinput',
123 name: 'src',
124 label: 'URL'
125 },
126 {
127 type: 'input',
128 name: 'text',
129 label: 'Text to display'
130 },
131 ]
132 },
133 buttons: [
134 {
135 type: 'cancel',
136 text: 'Cancel'
137 },
138 {
139 type: 'submit',
140 text: 'Save',
141 buttonType: 'primary'
142 }
143 ],
144 onSubmit: function(dialogApi) {
145 let data = dialogApi.getData();
146 let src = data.src.value;
147 if(!src) return;
148 src = tinymce.DOM.encode(src);
149 let text = data.text;
150 let html = '<a href="' + src + '">' + text + '</a>';
151 dialogApi.close();
152 editor.insertContent(html);
153 }
154 });
155 },
156 });
98 157
99 editor.ui.registry.addButton('insertImage', { 158 editor.ui.registry.addButton('insertImage', {
100 icon: 'image', 159 icon: 'image',
101 tooltip: 'Insert image', 160 tooltip: 'Insert image',
102 onAction: function(api) { 161 onAction: function(api) {
109 type: 'urlinput', 168 type: 'urlinput',
110 name: 'src', 169 name: 'src',
111 filetype: 'image', 170 filetype: 'image',
112 label: 'Source URL' 171 label: 'Source URL'
113 }, 172 },
173 {
174 type: 'htmlpanel',
175 html: imageFileHtml
176 },
114 ] 177 ]
115 }, 178 },
116 buttons: [ 179 buttons: [
117 { 180 {
118 type: 'cancel', 181 type: 'cancel',
123 text: 'Save', 186 text: 'Save',
124 buttonType: 'primary' 187 buttonType: 'primary'
125 } 188 }
126 ], 189 ],
127 onSubmit: function(dialogApi) { 190 onSubmit: function(dialogApi) {
128 let src = dialogApi.getData('src').src.value; 191 let src = dialogApi.getData().src.value;
129 if(!src) return; 192 if(!src) return;
130 src = tinymce.DOM.encode(src); 193 src = tinymce.DOM.encode(src);
131 let html = '<img src="' + src + '">'; 194 let html = '<img src="' + src + '">';
132 dialogApi.close(); 195 dialogApi.close();
133 editor.insertContent(html); 196 editor.insertContent(html);
146 type: 'panel', 209 type: 'panel',
147 items: [ 210 items: [
148 { 211 {
149 type: 'urlinput', 212 type: 'urlinput',
150 name: 'src', 213 name: 'src',
151 filetype: 'image', 214 filetype: 'media',
152 label: 'Source URL' 215 label: 'Source URL'
216 },
217 {
218 type: 'htmlpanel',
219 html: videoFileHtml
153 }, 220 },
154 ] 221 ]
155 }, 222 },
156 buttons: [ 223 buttons: [
157 { 224 {
163 text: 'Save', 230 text: 'Save',
164 buttonType: 'primary' 231 buttonType: 'primary'
165 } 232 }
166 ], 233 ],
167 onSubmit: function(dialogApi) { 234 onSubmit: function(dialogApi) {
168 let src = dialogApi.getData('src').src.value; 235 let src = dialogApi.getData().src.value;
169 if(!src) return; 236 if(!src) return;
170 let html = videoUrlToHtml(src); 237 let html = videoUrlToHtml(src);
171 //alert(html); 238 //alert(html);
172 dialogApi.close(); 239 dialogApi.close();
173 editor.insertContent(html); 240 editor.insertContent(html);
209 selector: 'textarea', 276 selector: 'textarea',
210 setup: tinymceSetup, 277 setup: tinymceSetup,
211 //menubar: false, 278 //menubar: false,
212 statusbar: false, 279 statusbar: false,
213 plugins: ['link', 'image', 'media', 'lists', 'code', 'autoresize'], 280 plugins: ['link', 'image', 'media', 'lists', 'code', 'autoresize'],
214 toolbar: 'link insertImage insertVideo | styleCode bold italic underline strikethrough superscript styleText | blockquote numlist bullist', 281 toolbar: 'link insertLink insertImage insertVideo | styleCode bold italic underline strikethrough superscript styleText | blockquote numlist bullist',
215 autoresize_bottom_margin: 0, 282 autoresize_bottom_margin: 0,
216 link_target_list: false, 283 link_target_list: false,
217 link_title: false, 284 link_title: false,
218 object_resizing: false, 285 object_resizing: false,
219 contextmenu: false, 286 contextmenu: false,
231 console.log(tinymce.activeEditor.getContent()); 298 console.log(tinymce.activeEditor.getContent());
232 } 299 }
233 </script> 300 </script>
234 </head> 301 </head>
235 <body> 302 <body>
236 <p><a href="https://www.tiny.cloud/">TinyMCE</a></p> 303 <p>
304 <a href="https://www.tiny.cloud/">TinyMCE</a>
305 <a href="https://github.com/tinymce/tinymce">source</a>
306 </p>
237 <textarea></textarea> 307 <textarea></textarea>
238 <p><button onclick="log()">log</button></p> 308 <p><button onclick="log()">log</button></p>
239 </body> 309 </body>
240 </html> 310 </html>