Mercurial Hosting > freedit

diff src/test/tiny.html @ 22:d87a8f9f43d7

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 Sun, 17 Jul 2022 21:47:55 -0600
parents
children cdcd1b70c15e
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/test/tiny.html	Sun Jul 17 21:47:55 2022 -0600
@@ -0,0 +1,68 @@
+<!doctype html>
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
+		<style>
+		</style>
+		<script>
+			var youtubePtn1 = new RegExp('https://youtu.be/([a-zA-Z0-9_-]+)(?:\\?t=([0-9]+))?');
+			var youtubePtn2 = new RegExp('https://www.youtube.com/watch\\?v=([a-zA-Z0-9_-]+)(?:\\?t=([0-9]+)s)?');
+			var bitchutePtn = new RegExp('https://www.bitchute.com/video/([a-zA-Z0-9]+)/');
+			var url2;
+
+			function media_url_resolver(data,resolve,reject) {
+				let html;
+				let url = data.url;
+				url2 = url;
+				let result;
+				if( result = url.match(youtubePtn1) || url.match(youtubePtn2) ) {
+					html = '<iframe data-url="'+url+'" width="560" height="315" src="https://www.youtube.com/embed/' + result[1];
+					if( result[2] )
+						html += '?start=' + result[2]
+					html += '" frameborder="0" allowfullscreen></iframe>';
+				} else if( result = url.match(bitchutePtn) ) {
+					html = '<iframe data-url="'+url+'" width="560" height="315" scrolling="no" frameborder="0" style="border: none;" src="https://www.bitchute.com/embed/' + result[1] + '/"></iframe>';
+				} else {
+					html = '<a href="'+url+'">'+url+'</a>';
+				}
+				resolve({ html: html });
+			}
+
+			tinymce.init({
+				selector: 'textarea',
+				plugins: ['link', 'image', 'media'],
+				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;}',
+				newline_behavior: 'linebreak',
+				//toolbar: 'image',
+				extended_valid_elements: 'b,i',
+				formats: {
+					bold: { inline: 'b' },
+					italic: {inline: 'i'},
+					underline: {inline: 'u'},
+				},
+			});
+
+			function log() {
+				console.log(tinymce.activeEditor.getContent());
+			}
+		</script>
+	</head>
+	<body>
+		<p>top</p>
+		<textarea></textarea>
+		<p><button onclick="log()">log</button></p>
+		<p>bottom</p>
+	</body>
+</html>