Mercurial Hosting > freedit

diff 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
line wrap: on
line diff
--- a/src/test/tiny.html	Tue Aug 02 20:46:02 2022 -0600
+++ b/src/test/tiny.html	Wed Aug 03 14:13:12 2022 -0600
@@ -2,8 +2,12 @@
 <html>
 	<head>
 		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<script src="/site.js"></script>
 		<script src="http://tinymce.luan.software/tinymce.min.js" xreferrerpolicy="origin"></script>
 		<style>
+			input[type="file"] {
+				display: none;
+			}
 		</style>
 		<script>
 			function videoIframe(url) {
@@ -93,9 +97,64 @@
 				return '<a data-video="'+url+'" href="'+url+'">'+url+'</a>';
 			}
 
+			function uploaded(input,url,filename) {
+				input.parentNode.parentNode.querySelector('input[type="url"]').value = url;
+			}
+
+			let imageFileHtml = '<input type=file accept="image/*" onchange="upload(this,uploaded)">';
+			imageFileHtml += '<button class="tox-button tox-button--secondary" onclick="fileButtonClick(this)">Upload Image</button>';
+
+			let videoFileHtml = '<input type=file accept="video/*" onchange="upload(this,uploaded)">';
+			videoFileHtml += '<button class="tox-button tox-button--secondary" onclick="fileButtonClick(this)">Upload Video</button>';
 
 			function tinymceSetup(editor) {
 
+				editor.ui.registry.addButton('insertLink', {
+					icon: 'link',
+					tooltip: 'Insert link',
+					onAction: function(api) {
+						editor.windowManager.open({
+							title: 'Insert Link',
+							body: {
+								type: 'panel',
+								items: [
+									{
+										type: 'urlinput',
+										name: 'src',
+										label: 'URL'
+									},
+									{
+										type: 'input',
+										name: 'text',
+										label: 'Text to display'
+									},
+								]
+							},
+							buttons: [
+								{
+									type: 'cancel',
+									text: 'Cancel'
+								},
+								{
+									type: 'submit',
+									text: 'Save',
+									buttonType: 'primary'
+								}
+							],
+							onSubmit: function(dialogApi) {
+								let data = dialogApi.getData();
+								let src = data.src.value;
+								if(!src) return;
+								src = tinymce.DOM.encode(src);
+								let text = data.text;
+								let html = '<a href="' + src + '">' + text + '</a>';
+								dialogApi.close();
+								editor.insertContent(html);
+							}
+						});
+					},
+				});
+
 				editor.ui.registry.addButton('insertImage', {
 					icon: 'image',
 					tooltip: 'Insert image',
@@ -111,6 +170,10 @@
 										filetype: 'image',
 										label: 'Source URL'
 									},
+									{
+										type: 'htmlpanel',
+										html: imageFileHtml
+									},
 								]
 							},
 							buttons: [
@@ -125,7 +188,7 @@
 								}
 							],
 							onSubmit: function(dialogApi) {
-								let src = dialogApi.getData('src').src.value;
+								let src = dialogApi.getData().src.value;
 								if(!src) return;
 								src = tinymce.DOM.encode(src);
 								let html = '<img src="' + src + '">';
@@ -148,9 +211,13 @@
 									{
 										type: 'urlinput',
 										name: 'src',
-										filetype: 'image',
+										filetype: 'media',
 										label: 'Source URL'
 									},
+									{
+										type: 'htmlpanel',
+										html: videoFileHtml
+									},
 								]
 							},
 							buttons: [
@@ -165,7 +232,7 @@
 								}
 							],
 							onSubmit: function(dialogApi) {
-								let src = dialogApi.getData('src').src.value;
+								let src = dialogApi.getData().src.value;
 								if(!src) return;
 								let html = videoUrlToHtml(src);
 								//alert(html);
@@ -211,7 +278,7 @@
 				//menubar: false,
 				statusbar: false,
 				plugins: ['link', 'image', 'media', 'lists', 'code', 'autoresize'],
-				toolbar: 'link insertImage insertVideo | styleCode bold italic underline strikethrough superscript styleText | blockquote numlist bullist',
+				toolbar: 'link insertLink insertImage insertVideo | styleCode bold italic underline strikethrough superscript styleText | blockquote numlist bullist',
 				autoresize_bottom_margin: 0,
 				link_target_list: false,
 				link_title: false,
@@ -233,7 +300,10 @@
 		</script>
 	</head>
 	<body>
-		<p><a href="https://www.tiny.cloud/">TinyMCE</a></p>
+		<p>
+			<a href="https://www.tiny.cloud/">TinyMCE</a>
+			<a href="https://github.com/tinymce/tinymce">source</a>
+		</p>
 		<textarea></textarea>
 		<p><button onclick="log()">log</button></p>
 	</body>