1+ import * as path from 'path' ;
2+ import express from 'express' ;
3+
4+ const app = express ( ) ;
5+
6+ // Parse URL-encoded bodies (as sent by HTML forms)
7+ app . use ( express . urlencoded ( ) ) ;
8+
9+ /**
10+ * Encode XML entities
11+ * @param {string } value the value
12+ * @return {string } the value with the main HTML entities encoded.
13+ */
14+ const encodeHtmlEntities = ( value : string ) => value . replace ( / & / g, '&' ) . replace ( / < / g, '<' ) . replace ( / > / g, '>' ) . replace ( / " / g, '"' ) ;
15+
16+ /**
17+ * Generate some HTML for display.
18+ * @param {string } editor1Value the value of the first editor.
19+ * @param {string } editor2Value the value of the second editor.
20+ * @return {string } the page HTML.
21+ */
22+ const page = ( editor1Value : string , editor2Value : string , editor3Value : string , editor4Value : string ) => `
23+ <!DOCTYPE html>
24+ <html lang="en">
25+ <head>
26+ <meta charset="utf-8"/>
27+ <title>TinyMCE WebComponent Form Demo Page</title>
28+ <link rel="icon" href="data:;base64,iVBORw0KGgo=">
29+ <script>
30+ class TinyMceEditorNested extends HTMLElement {
31+ connectedCallback() {
32+ const count = parseInt(this.getAttribute('nested') || '1', 10);
33+ const content = this.getAttribute('value');
34+ const shadow = this.attachShadow({ mode: 'open' });
35+ const target = document.createElement('tinymce-editor' + (count > 1 ? '-nested' : ''));
36+ [...this.attributes].forEach( attr => { target.setAttribute(attr.nodeName, attr.nodeValue) });
37+ target.setAttribute('nested', count - 1);
38+ target.appendChild(document.createTextNode(content));
39+ shadow.appendChild(target);
40+ }
41+ }
42+ window.customElements.define('tinymce-editor-nested', TinyMceEditorNested);
43+ </script>
44+ </head>
45+ <body>
46+ <h1>TinyMCE WebComponent in Form</h1>
47+ <h2>Editor 1 (outside form with form attribute)</h2>
48+ <tinymce-editor name="editor1" form="myform">${ encodeHtmlEntities ( editor1Value ) } </tinymce-editor>
49+ <h2>Editor 2 (nested in shadow dom, outside form with form attribute)</h2>
50+ <tinymce-editor-nested nested="2" name="editor2" form="myform" value="${ encodeHtmlEntities ( editor2Value ) } "></tinymce-editor-nested>
51+ <form id="myform" method="POST" action="/">
52+ <h2>Editor 3 (inside form)</h2>
53+ <tinymce-editor name="editor3">${ encodeHtmlEntities ( editor3Value ) } </tinymce-editor>
54+ <h2>Editor 4 (nested in shadow dom, inside form)</h2>
55+ <tinymce-editor-nested nested="2" name="editor4" value="${ encodeHtmlEntities ( editor4Value ) } "></tinymce-editor-nested>
56+ <input type="submit" value="Submit">
57+ </form>
58+
59+ <h2>Posted Content</h2>
60+ <h3>Editor 1 value</h3>
61+ <div style="border: 1px solid black">${ editor1Value } </div>
62+ <h3>Editor 2 value</h3>
63+ <div style="border: 1px solid black">${ editor2Value } </div>
64+ <h3>Editor 3 value</h3>
65+ <div style="border: 1px solid black">${ editor3Value } </div>
66+ <h3>Editor 4 value</h3>
67+ <div style="border: 1px solid black">${ editor4Value } </div>
68+ <script src="/tinymce/tinymce.js"></script>
69+ <script src="/dist/tinymce-webcomponent.js"></script>
70+ </body>
71+ </html>
72+ ` ;
73+
74+ const tinyPath = path . normalize ( path . join ( __dirname , '..' , '..' , '..' , 'node_modules' , 'tinymce' ) ) ;
75+ const distPath = path . normalize ( path . join ( __dirname , '..' , '..' , '..' , 'dist' ) ) ;
76+
77+ /* eslint-disable-next-line no-console */
78+ console . log ( 'Serving /tinymce from: ' + tinyPath ) ;
79+ /* eslint-disable-next-line no-console */
80+ console . log ( 'Serving /dist from: ' + distPath ) ;
81+
82+ app . use ( '/tinymce' , express . static ( tinyPath ) ) ;
83+ app . use ( '/dist' , express . static ( distPath ) ) ;
84+
85+ app . get ( '/' , ( request , response ) => {
86+ response . send ( page ( '' , '' , '' , '' ) ) ;
87+ } ) ;
88+
89+ // Access the parse results as request.body
90+ app . post ( '/' , ( request , response ) => {
91+ response . send ( page ( request . body . editor1 as string , request . body . editor2 as string , request . body . editor3 as string , request . body . editor4 as string ) ) ;
92+ } ) ;
93+
94+ /* eslint-disable-next-line no-console */
95+ app . listen ( 3000 , ( ) => console . log ( 'http://localhost:3000/' ) ) ;
0 commit comments