Skip to content

Commit 0b271ac

Browse files
committed
INT-3366: Restore Server.ts
1 parent ed1c122 commit 0b271ac

File tree

2 files changed

+96
-1
lines changed

2 files changed

+96
-1
lines changed

src/demo/ts/Server.ts

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
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/'));

src/main/ts/component/Editor.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -280,7 +280,7 @@ class TinyMceEditor extends HTMLElement {
280280
};
281281
// use target
282282
this._getTinymce().init(conf).catch((err) => {
283-
/* eslint-disable no-console */
283+
/* eslint-disable-next-line no-console */
284284
console.error('TinyMCE init failed', err);
285285
});
286286
}

0 commit comments

Comments
 (0)