view src/test/tiny.html @ 23:cdcd1b70c15e

tinymce work
author Franklin Schmidt <fschmidt@gmail.com>
date Mon, 18 Jul 2022 23:50:48 -0600
parents d87a8f9f43d7
children fccbe5554fcc
line wrap: on
line source

<!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-video="'+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-video="'+url+'" width="560" height="315" scrolling="no" frameborder="0" style="border: none;" src="https://www.bitchute.com/embed/' + result[1] + '/"></iframe>';
				} else {
					html = '<a data-video="'+url+'" href="'+url+'">'+url+'</a>';
				}
				resolve({ html: html });
			}

			function tinymceSetup(editor) {
				editor.ui.registry.addButton('styleCode', {
					text: 'code',
					onAction: () => alert('Button clicked!')
				});
			}

			tinymce.init({
				selector: 'textarea',
				setup: tinymceSetup,
				plugins: ['link', 'image', 'media', 'lists'],
				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: 'link image media | styleCode bold | numlist bullist',
				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><a href="https://www.tiny.cloud/">TinyMCE</a></p>
		<textarea></textarea>
		<p><button onclick="log()">log</button></p>
	</body>
</html>