changeset 35:1ce75c5ab0f7

minor
author Franklin Schmidt <fschmidt@gmail.com>
date Wed, 03 Aug 2022 14:13:12 -0600
parents c8d47981c74f
children b54e9e2212b7
files src/site.js src/test/tiny.html src/test/upload.html src/thread.html.luan
diffstat 4 files changed, 83 insertions(+), 16 deletions(-) [+]
line wrap: on
line diff
--- a/src/site.js	Tue Aug 02 20:46:02 2022 -0600
+++ b/src/site.js	Wed Aug 03 14:13:12 2022 -0600
@@ -52,7 +52,7 @@
 		let response = JSON.parse(request.responseText);
 		let filename = file.name;
 		let url = 'https://ucarecdn.com/' + response.file + '/' + filename;
-		callback(url,filename);
+		callback(input,url,filename);
 	};
 	let formData = new FormData();
 	formData.append( 'UPLOADCARE_PUB_KEY', 'fe3d30f3088a50941d45' );
--- 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>
--- a/src/test/upload.html	Tue Aug 02 20:46:02 2022 -0600
+++ b/src/test/upload.html	Wed Aug 03 14:13:12 2022 -0600
@@ -7,7 +7,7 @@
 		</style>
 		<script src="/site.js"></script>
 		<script>
-			function uploaded(url,filename) {
+			function uploaded(input,url,filename) {
 				console.log(url);
 				let a = document.querySelector('a');
 				a.textContent = filename;
--- a/src/thread.html.luan	Tue Aug 02 20:46:02 2022 -0600
+++ b/src/thread.html.luan	Wed Aug 03 14:13:12 2022 -0600
@@ -84,14 +84,11 @@
 				ajax('save_edit.js',postData);
 			}
 
-			function gotFile(input) {
-				function uploaded(url,filename) {
-					let postDiv = getPostDiv(input);
-					let textarea = postDiv.querySelector('textarea');
-					textarea.focus();
-					textarea.setRangeText(url,textarea.selectionStart,textarea.selectionEnd,'select');
-				}
-				upload(input,uploaded);
+			function uploaded(input,url,filename) {
+				let postDiv = getPostDiv(input);
+				let textarea = postDiv.querySelector('textarea');
+				textarea.focus();
+				textarea.setRangeText(url,textarea.selectionStart,textarea.selectionEnd,'select');
 			}
 
 			function deletePost(span) {
@@ -152,7 +149,7 @@
 		<div hidden edit>
 			<textarea></textarea>
 			<p>
-				<input type=file onchange="gotFile(this)">
+				<input type=file onchange="upload(this,uploaded)">
 				<button onclick="fileButtonClick(this)">Upload File</button>
 				<button onclick="saveEdit(this)">save</button>
 				<button onclick="cancelEdit(this)">cancel</button>