Mercurial Hosting > freedit

comparison src/test/tiny.html @ 31:6d265f5e18e2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
tinymce work
author Franklin Schmidt <fschmidt@gmail.com>
date Wed, 27 Jul 2022 22:10:18 -0600
parents 8ff35379cc89
children 72a1b77b4548
comparison
equal deleted inserted replaced
30:8ff35379cc89 31:6d265f5e18e2
66 { 66 {
67 let ptn = /^https:\/\/www\.tiktok\.com\/[^/]+\/video\/([0-9]+)/; 67 let ptn = /^https:\/\/www\.tiktok\.com\/[^/]+\/video\/([0-9]+)/;
68 videoHandlers.tiktok = function(url) { 68 videoHandlers.tiktok = function(url) {
69 let result = url.match(ptn); 69 let result = url.match(ptn);
70 if( result ) { 70 if( result ) {
71 let html = '<blockquote class="tiktok-embed" data-video-id="'+result[1]+'" style="max-width: 560px; margin-left: 0;"><section></section></blockquote>'; 71 //let html = '<blockquote class="tiktok-embed" data-video="'+result[1]+'" style="max-width: 560px; margin-left: 0;"><section></section></blockquote>';
72 //html += '<script async src="https://www.tiktok.com/embed.js"></'+'script>'; 72 //html += '<script async src="https://www.tiktok.com/embed.js"></'+'script>';
73 let html = '<img data-video="'+result[1]+'" src="whataever">';
73 return html; 74 return html;
74 } 75 }
75 } 76 }
76 } 77 }
77 { 78 {
89 let html = handle(url); 90 let html = handle(url);
90 if(html) return html; 91 if(html) return html;
91 } 92 }
92 return '<a data-video="'+url+'" href="'+url+'">'+url+'</a>'; 93 return '<a data-video="'+url+'" href="'+url+'">'+url+'</a>';
93 } 94 }
94 console.log(videoUrlToHtml('https://www.tiktok.com/@chantelleef/video/7112118342181276933?is_from_webapp=1&sender_device=pc&web_id=7073254106622838318'));
95
96 function media_url_resolver(data,resolve,reject) {
97 let html = videoUrlToHtml(data.url);
98 resolve({ html: html });
99 }
100 95
101 96
102 function tinymceSetup(editor) { 97 function tinymceSetup(editor) {
98
99 editor.ui.registry.addButton('insertImage', {
100 icon: 'image',
101 tooltip: 'Insert image',
102 onAction: function(api) {
103 editor.windowManager.open({
104 title: 'Insert Image',
105 body: {
106 type: 'panel',
107 items: [
108 {
109 type: 'urlinput',
110 name: 'src',
111 filetype: 'image',
112 label: 'Source URL'
113 },
114 ]
115 },
116 buttons: [
117 {
118 type: 'cancel',
119 text: 'Cancel'
120 },
121 {
122 type: 'submit',
123 text: 'Save',
124 buttonType: 'primary'
125 }
126 ],
127 onSubmit: function(dialogApi) {
128 let src = dialogApi.getData('src').src.value;
129 if(!src) return;
130 src = tinymce.DOM.encode(src);
131 let html = '<img src="' + src + '">';
132 dialogApi.close();
133 editor.insertContent(html);
134 }
135 });
136 },
137 });
138
139 editor.ui.registry.addButton('insertVideo', {
140 icon: 'embed',
141 tooltip: 'Insert video',
142 onAction: function(api) {
143 editor.windowManager.open({
144 title: 'Insert Video',
145 body: {
146 type: 'panel',
147 items: [
148 {
149 type: 'urlinput',
150 name: 'src',
151 filetype: 'image',
152 label: 'Source URL'
153 },
154 ]
155 },
156 buttons: [
157 {
158 type: 'cancel',
159 text: 'Cancel'
160 },
161 {
162 type: 'submit',
163 text: 'Save',
164 buttonType: 'primary'
165 }
166 ],
167 onSubmit: function(dialogApi) {
168 let src = dialogApi.getData('src').src.value;
169 if(!src) return;
170 let html = videoUrlToHtml(src);
171 //alert(html);
172 dialogApi.close();
173 editor.insertContent(html);
174 }
175 });
176 },
177 });
103 178
104 editor.ui.registry.addToggleButton('styleCode', { 179 editor.ui.registry.addToggleButton('styleCode', {
105 icon: 'sourcecode', 180 icon: 'sourcecode',
106 tooltip: 'Code', 181 tooltip: 'Code',
107 onAction: function(api) { 182 onAction: function(api) {
108 editor.execCommand('mceToggleFormat', false, 'code') 183 editor.execCommand('mceToggleFormat', false, 'code');
109 }, 184 },
110 onSetup: function(api) { 185 onSetup: function(api) {
111 api.setActive(editor.formatter.match('code')); 186 api.setActive(editor.formatter.match('code'));
112 let changed = editor.formatter.formatChanged('code', api.setActive); 187 let changed = editor.formatter.formatChanged('code', api.setActive);
113 return function() { changed.unbind(); }; 188 return function() { changed.unbind(); };
123 'forecolor', 198 'forecolor',
124 ]) 199 ])
125 } 200 }
126 }); 201 });
127 202
128 editor.on( 'init', function(e) {editor.focus()} ); 203 editor.on( 'init', function(e) {
204 editor.focus();
205 } );
129 } 206 }
130 207
131 tinymce.init({ 208 tinymce.init({
132 selector: 'textarea', 209 selector: 'textarea',
133 setup: tinymceSetup, 210 setup: tinymceSetup,
134 //menubar: false, 211 //menubar: false,
135 statusbar: false, 212 statusbar: false,
136 toolbar: 'link image media | styleCode bold italic underline strikethrough superscript styleText | blockquote numlist bullist', 213 toolbar: 'link insertImage insertVideo | styleCode bold italic underline strikethrough superscript styleText | blockquote numlist bullist',
137 plugins: ['link', 'image', 'media', 'lists', 'code', 'autoresize'], 214 plugins: ['link', 'image', 'media', 'lists', 'code', 'autoresize'],
138 autoresize_bottom_margin: 0, 215 autoresize_bottom_margin: 0,
139 link_target_list: false, 216 link_target_list: false,
140 link_title: false, 217 link_title: false,
141 image_description: false,
142 image_dimensions: false,
143 object_resizing: false, 218 object_resizing: false,
144 contextmenu: false, 219 contextmenu: false,
145 media_alt_source: false,
146 media_dimensions: false,
147 media_poster: false,
148 media_url_resolver: media_url_resolver,
149 text_patterns: false, 220 text_patterns: false,
150 content_style: 'img {max-width: 500px;} p {margin: 0}', 221 content_style: 'img {max-width: 500px;} p {margin: 0}',
151 //newline_behavior: 'linebreak',
152 extended_valid_elements: 'b,i', 222 extended_valid_elements: 'b,i',
153 formats: { 223 formats: {
154 bold: { inline: 'b' }, 224 bold: { inline: 'b' },
155 italic: {inline: 'i'}, 225 italic: {inline: 'i'},
156 underline: {inline: 'u'}, 226 underline: {inline: 'u'},