Mercurial Hosting > freedit

comparison 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
comparison
equal deleted inserted replaced
21:33731231093a 22:d87a8f9f43d7
1 <!doctype html>
2 <html>
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1">
5 <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
6 <style>
7 </style>
8 <script>
9 var youtubePtn1 = new RegExp('https://youtu.be/([a-zA-Z0-9_-]+)(?:\\?t=([0-9]+))?');
10 var youtubePtn2 = new RegExp('https://www.youtube.com/watch\\?v=([a-zA-Z0-9_-]+)(?:\\?t=([0-9]+)s)?');
11 var bitchutePtn = new RegExp('https://www.bitchute.com/video/([a-zA-Z0-9]+)/');
12 var url2;
13
14 function media_url_resolver(data,resolve,reject) {
15 let html;
16 let url = data.url;
17 url2 = url;
18 let result;
19 if( result = url.match(youtubePtn1) || url.match(youtubePtn2) ) {
20 html = '<iframe data-url="'+url+'" width="560" height="315" src="https://www.youtube.com/embed/' + result[1];
21 if( result[2] )
22 html += '?start=' + result[2]
23 html += '" frameborder="0" allowfullscreen></iframe>';
24 } else if( result = url.match(bitchutePtn) ) {
25 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>';
26 } else {
27 html = '<a href="'+url+'">'+url+'</a>';
28 }
29 resolve({ html: html });
30 }
31
32 tinymce.init({
33 selector: 'textarea',
34 plugins: ['link', 'image', 'media'],
35 link_target_list: false,
36 link_title: false,
37 image_description: false,
38 image_dimensions: false,
39 object_resizing: false,
40 contextmenu: false,
41 media_alt_source: false,
42 media_dimensions: false,
43 media_poster: false,
44 media_url_resolver: media_url_resolver,
45 text_patterns: false,
46 content_style: 'img {max-width: 500px;}',
47 newline_behavior: 'linebreak',
48 //toolbar: 'image',
49 extended_valid_elements: 'b,i',
50 formats: {
51 bold: { inline: 'b' },
52 italic: {inline: 'i'},
53 underline: {inline: 'u'},
54 },
55 });
56
57 function log() {
58 console.log(tinymce.activeEditor.getContent());
59 }
60 </script>
61 </head>
62 <body>
63 <p>top</p>
64 <textarea></textarea>
65 <p><button onclick="log()">log</button></p>
66 <p>bottom</p>
67 </body>
68 </html>