Mercurial Hosting > freedit

changeset 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
files src/test/tiny.html
diffstat 1 files changed, 87 insertions(+), 17 deletions(-) [+]
line wrap: on
line diff
--- a/src/test/tiny.html	Mon Jul 25 22:10:28 2022 -0600
+++ b/src/test/tiny.html	Wed Jul 27 22:10:18 2022 -0600
@@ -68,8 +68,9 @@
 				videoHandlers.tiktok = function(url) {
 					let result = url.match(ptn);
 					if( result ) {
-						let html = '<blockquote class="tiktok-embed" data-video-id="'+result[1]+'" style="max-width: 560px; margin-left: 0;"><section></section></blockquote>';
+						//let html = '<blockquote class="tiktok-embed" data-video="'+result[1]+'" style="max-width: 560px; margin-left: 0;"><section></section></blockquote>';
 						//html += '<script async src="https://www.tiktok.com/embed.js"></'+'script>';
+						let html = '<img data-video="'+result[1]+'" src="whataever">';
 						return html;
 					}
 				}
@@ -91,21 +92,95 @@
 				}
 				return '<a data-video="'+url+'" href="'+url+'">'+url+'</a>';
 			}
-			console.log(videoUrlToHtml('https://www.tiktok.com/@chantelleef/video/7112118342181276933?is_from_webapp=1&sender_device=pc&web_id=7073254106622838318'));
-
-			function media_url_resolver(data,resolve,reject) {
-				let html = videoUrlToHtml(data.url);
-				resolve({ html: html });
-			}
 
 
 			function tinymceSetup(editor) {
 
+				editor.ui.registry.addButton('insertImage', {
+					icon: 'image',
+					tooltip: 'Insert image',
+					onAction: function(api) {
+						editor.windowManager.open({
+							title: 'Insert Image',
+							body: {
+								type: 'panel',
+								items: [
+									{
+										type: 'urlinput',
+										name: 'src',
+										filetype: 'image',
+										label: 'Source URL'
+									},
+								]
+							},
+							buttons: [
+								{
+									type: 'cancel',
+									text: 'Cancel'
+								},
+								{
+									type: 'submit',
+									text: 'Save',
+									buttonType: 'primary'
+								}
+							],
+							onSubmit: function(dialogApi) {
+								let src = dialogApi.getData('src').src.value;
+								if(!src) return;
+								src = tinymce.DOM.encode(src);
+								let html = '<img src="' + src + '">';
+								dialogApi.close();
+								editor.insertContent(html);
+							}
+						});
+					},
+				});
+
+				editor.ui.registry.addButton('insertVideo', {
+					icon: 'embed',
+					tooltip: 'Insert video',
+					onAction: function(api) {
+						editor.windowManager.open({
+							title: 'Insert Video',
+							body: {
+								type: 'panel',
+								items: [
+									{
+										type: 'urlinput',
+										name: 'src',
+										filetype: 'image',
+										label: 'Source URL'
+									},
+								]
+							},
+							buttons: [
+								{
+									type: 'cancel',
+									text: 'Cancel'
+								},
+								{
+									type: 'submit',
+									text: 'Save',
+									buttonType: 'primary'
+								}
+							],
+							onSubmit: function(dialogApi) {
+								let src = dialogApi.getData('src').src.value;
+								if(!src) return;
+								let html = videoUrlToHtml(src);
+								//alert(html);
+								dialogApi.close();
+								editor.insertContent(html);
+							}
+						});
+					},
+				});
+
 				editor.ui.registry.addToggleButton('styleCode', {
 					icon: 'sourcecode',
 					tooltip: 'Code',
 					onAction: function(api) {
-						editor.execCommand('mceToggleFormat', false, 'code')
+						editor.execCommand('mceToggleFormat', false, 'code');
 					},
 					onSetup: function(api) {
 						api.setActive(editor.formatter.match('code'));
@@ -125,7 +200,9 @@
 					}
 				});
 
-				editor.on( 'init', function(e) {editor.focus()} );
+				editor.on( 'init', function(e) {
+					editor.focus();
+				} );
 			}
 
 			tinymce.init({
@@ -133,22 +210,15 @@
 				setup: tinymceSetup,
 				//menubar: false,
 				statusbar: false,
-				toolbar: 'link image media | styleCode bold italic underline strikethrough superscript styleText | blockquote numlist bullist',
+				toolbar: 'link insertImage insertVideo | styleCode bold italic underline strikethrough superscript styleText | blockquote numlist bullist',
 				plugins: ['link', 'image', 'media', 'lists', 'code', 'autoresize'],
 				autoresize_bottom_margin: 0,
 				link_target_list: false,
 				link_title: false,
-				image_description: false,
-				image_dimensions: false,
 				object_resizing: false,
 				contextmenu: false,
-				media_alt_source: false,
-				media_dimensions: false,
-				media_poster: false,
-				media_url_resolver: media_url_resolver,
 				text_patterns: false,
 				content_style: 'img {max-width: 500px;} p {margin: 0}',
-				//newline_behavior: 'linebreak',
 				extended_valid_elements: 'b,i',
 				formats: {
 					bold: { inline: 'b' },