Skip to content

Commit 01f731d

Browse files
tiny-ben-trantiny-ben-tran
authored
Merge pull request #68 from tinymce/feature/INT-3354
INT-3354: Update to work with TinyMCE 8
2 parents dab61ac + b3dee33 commit 01f731d

File tree

11 files changed

+71
-31
lines changed

11 files changed

+71
-31
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
66

77
## Unreleased
88

9+
### Changed
10+
- Set the default channel to `8`. INT-3354
11+
912
## 2.2.0 - 2025-05-29
1013

1114
### Added

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"esm": "^3.2.25",
4343
"express": "^4.18.2",
4444
"rollup": "^4.24.0",
45-
"tinymce": "^7.4.1",
45+
"tinymce": "^8.0.0",
4646
"ts-loader": "^9.4.2",
4747
"ts-node": "^10.9.1",
4848
"typescript": "~5.6.3",

‎src/demo/html/basic.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,14 @@
88

99
<body>
1010
<h1>TinyMCE Web Component Simple Demo Page</h1>
11-
<tinymce-editor promotion="false"></tinymce-editor>
11+
12+
<script>
13+
var editorConfig = {
14+
license_key: 'gpl'
15+
};
16+
</script>
17+
18+
<tinymce-editor config="editorConfig" promotion="false"></tinymce-editor>
1219
<script src="../../../node_modules/tinymce/tinymce.js"></script>
1320
<script src="../../../dist/tinymce-webcomponent.js"></script>
1421
</body>

‎src/demo/html/common-attributes.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,15 @@ <h1>TinyMCE Web Component Common Attributes Demo Page</h1>
3636
<li>icons_url</li>
3737
<li>setup</li>
3838
</ul>
39+
40+
<script>
41+
var editorConfig = {
42+
license_key: 'gpl'
43+
};
44+
</script>
45+
3946
<tinymce-editor
47+
config="editorConfig"
4048
height="500"
4149
menubar="false"
4250
plugins="advlist autolink lists link image charmap print preview anchor

‎src/demo/html/content.html‎

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,32 @@
77
</head>
88

99
<body>
10-
<h1>TinyMCE Web Component Content Demo Page</h1>
11-
<tinymce-editor promotion="false">
12-
&lt;p style=&quot;text-align: center;&quot;&gt;&lt;span style=&quot;color: #bdc3c7;&quot;&gt;&amp;rarr; This is a full-featured editor demo. Please explore! &amp;larr;&lt;/span&gt;&lt;/p&gt;
13-
&lt;p style=&quot;text-align: center;&quot;&gt;&amp;nbsp;&lt;/p&gt;
14-
&lt;h2 style=&quot;text-align: center;&quot;&gt;TinyMCE is the world's most customizable, and flexible, rich text editor.&lt;/h2&gt;
15-
&lt;p style=&quot;text-align: center;&quot;&gt;&lt;strong&gt; &lt;span style=&quot;font-size: 14pt;&quot;&gt; &lt;span style=&quot;color: #7e8c8d; font-weight: 600;&quot;&gt; A featherweight download, TinyMCE can handle any challenge you throw at it. &lt;/span&gt; &lt;/span&gt; &lt;/strong&gt;&lt;/p&gt;
16-
&lt;p style=&quot;text-align: center;&quot;&gt;&amp;nbsp;&lt;/p&gt;
17-
&lt;table style=&quot;border-collapse: collapse; width: 85%; margin-left: auto; margin-right: auto; border: 0;&quot;&gt;
18-
&lt;tbody&gt;
19-
&lt;tr&gt;
20-
&lt;td style=&quot;width: 25%; text-align: center; padding: 7px;&quot;&gt;&lt;span style=&quot;color: #95a5a6;&quot;&gt;🛠 50+ Plugins&lt;/span&gt;&lt;/td&gt;
21-
&lt;td style=&quot;width: 25%; text-align: center; padding: 7px;&quot;&gt;&lt;span style=&quot;color: #95a5a6;&quot;&gt;💡 Premium Support&lt;/span&gt;&lt;/td&gt;
22-
&lt;td style=&quot;width: 25%; text-align: center; padding: 7px;&quot;&gt;&lt;span style=&quot;color: #95a5a6;&quot;&gt;🖍 Custom Skins&lt;/span&gt;&lt;/td&gt;
23-
&lt;td style=&quot;width: 25%; text-align: center; padding: 7px;&quot;&gt;&lt;span style=&quot;color: #95a5a6;&quot;&gt;⚙ Full API Access&lt;/span&gt;&lt;/td&gt;
24-
&lt;/tr&gt;
25-
&lt;/tbody&gt;
26-
&lt;/table&gt;
27-
</tinymce-editor>
28-
<script src="../../../node_modules/tinymce/tinymce.js"></script>
29-
<script src="../../../dist/tinymce-webcomponent.js"></script>
10+
<h1>TinyMCE Web Component Content Demo Page</h1>
11+
12+
<script>
13+
var editorConfig = {
14+
license_key: 'gpl'
15+
};
16+
</script>
17+
18+
<tinymce-editor config="editorConfig" promotion="false">
19+
&lt;p style=&quot;text-align: center;&quot;&gt;&lt;span style=&quot;color: #bdc3c7;&quot;&gt;&amp;rarr; This is a full-featured editor demo. Please explore! &amp;larr;&lt;/span&gt;&lt;/p&gt;
20+
&lt;p style=&quot;text-align: center;&quot;&gt;&amp;nbsp;&lt;/p&gt;
21+
&lt;h2 style=&quot;text-align: center;&quot;&gt;TinyMCE is the world's most customizable, and flexible, rich text editor.&lt;/h2&gt;
22+
&lt;p style=&quot;text-align: center;&quot;&gt;&lt;strong&gt; &lt;span style=&quot;font-size: 14pt;&quot;&gt; &lt;span style=&quot;color: #7e8c8d; font-weight: 600;&quot;&gt; A featherweight download, TinyMCE can handle any challenge you throw at it. &lt;/span&gt; &lt;/span&gt; &lt;/strong&gt;&lt;/p&gt;
23+
&lt;p style=&quot;text-align: center;&quot;&gt;&amp;nbsp;&lt;/p&gt;
24+
&lt;table style=&quot;border-collapse: collapse; width: 85%; margin-left: auto; margin-right: auto; border: 0;&quot;&gt;
25+
&lt;tbody&gt;
26+
&lt;tr&gt;
27+
&lt;td style=&quot;width: 25%; text-align: center; padding: 7px;&quot;&gt;&lt;span style=&quot;color: #95a5a6;&quot;&gt;🛠 50+ Plugins&lt;/span&gt;&lt;/td&gt;
28+
&lt;td style=&quot;width: 25%; text-align: center; padding: 7px;&quot;&gt;&lt;span style=&quot;color: #95a5a6;&quot;&gt;💡 Premium Support&lt;/span&gt;&lt;/td&gt;
29+
&lt;td style=&quot;width: 25%; text-align: center; padding: 7px;&quot;&gt;&lt;span style=&quot;color: #95a5a6;&quot;&gt;🖍 Custom Skins&lt;/span&gt;&lt;/td&gt;
30+
&lt;td style=&quot;width: 25%; text-align: center; padding: 7px;&quot;&gt;&lt;span style=&quot;color: #95a5a6;&quot;&gt;⚙ Full API Access&lt;/span&gt;&lt;/td&gt;
31+
&lt;/tr&gt;
32+
&lt;/tbody&gt;
33+
&lt;/table&gt;
34+
</tinymce-editor>
35+
<script src="../../../node_modules/tinymce/tinymce.js"></script>
36+
<script src="../../../dist/tinymce-webcomponent.js"></script>
3037
</body>
3138
</html>

‎src/demo/html/demo.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,18 @@
77
</head>
88

99
<body>
10+
<script>
11+
var editorConfig = {
12+
license_key: 'gpl'
13+
};
14+
</script>
15+
1016
<h2>TinyMCE Web Component Demo Page</h2>
1117
<div id="ephox-ui">
1218
<h3>Attribute config</h3>
1319
<tinymce-editor autofocus
1420
toolbar="undo redo | bold"
21+
config="editorConfig"
1522
menubar="false"
1623
plugins="lists image"
1724
setup="editors.setupFn"
@@ -20,7 +27,7 @@ <h3>Attribute config</h3>
2027
promotion="false"
2128
></tinymce-editor>
2229
<h3>Default with readonly</h3>
23-
<tinymce-editor promotion="false" readonly>
30+
<tinymce-editor config="editorConfig" promotion="false" readonly>
2431
&lt;p&gt;The quick &lt;b&gt;brown&lt;/b&gt; fox.&lt;/p&gt;
2532
&lt;p&gt;Jumps over the &lt;i&gt;lazy&lt;/i&gt; dog.&lt;/p&gt;
2633
&lt;p&gt;&lt;img src=&quot;http://www.google.com/google.jpg&quot; onload=&quot;javascript: alert('hello');&quot;/&gt;&lt;/p&gt;

‎src/demo/html/disabled.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,18 @@
2626
editor.removeAttribute('readonly');
2727
}
2828
}
29+
var editorConfig = {
30+
license_key: 'gpl'
31+
}
2932
</script>
3033
<h2>TinyMCE WebComponent Demo: Disabled and Readonly</h2>
3134
<div id="ephox-ui">
3235
<h2>Readonly mode</h2>
3336
<button onclick="toggleReadonly()">Toggle readonly</button>
34-
<tinymce-editor id="readonly_mode" readonly></tinymce-editor>
37+
<tinymce-editor config="editorConfig" id="readonly_mode" readonly></tinymce-editor>
3538
<h2>Disabled state</h2>
3639
<button onclick="toggleDisabled()" plugins="help">Toggle disabled</button>
37-
<tinymce-editor id="disabled_state" disabled></tinymce-editor>
40+
<tinymce-editor config="editorConfig" id="disabled_state" disabled></tinymce-editor>
3841
</div>
3942
<script src="../../../node_modules/tinymce/tinymce.js"></script>
4043
<script src="../../../dist/tinymce-webcomponent.js"></script>

‎src/demo/html/events.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,17 @@
2121
};
2222
window['editors'] = editors;
2323
})();
24+
25+
var editorConfig = {
26+
license_key: 'gpl'
27+
};
2428
</script>
2529
</head>
2630

2731
<body>
2832
<h1>TinyMCE Web Component Events Demo Page</h1>
2933
<tinymce-editor
34+
config="editorConfig"
3035
setup="editors.setupFn"
3136
on-Init="editors.initFn"
3237
on-Change="editors.changeFn"

‎src/main/ts/component/Editor.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,7 @@ class TinyMceEditor extends HTMLElement {
287287
if (src) {
288288
return src;
289289
}
290-
const channel = this.getAttribute('channel') ?? '6';
290+
const channel = this.getAttribute('channel') ?? '8';
291291
const apiKey = this.hasAttribute('api-key') ? this.getAttribute('api-key') : 'no-api-key';
292292
return `https://cdn.tiny.cloud/1/${apiKey}/tinymce/${channel}/tinymce.min.js`;
293293

‎src/test/ts/browser/LoadTest.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Arr, Global } from '@ephox/katamari';
66

77
const makeTinymceElement = (attrs: Record<string, string>, content: string) => {
88
const ce = SugarElement.fromTag('tinymce-editor');
9-
Attribute.set(ce, 'channel', '6-testing');
9+
Attribute.set(ce, 'channel', '8');
1010
Attribute.setAll(ce, attrs);
1111
TextContent.set(ce, content);
1212
Insert.append(SugarBody.body(), ce);

0 commit comments

Comments
 (0)