@tinymce/tinymce-webcomponent 2.4.0 → 2.4.1-feature.20260923022858935.sha5bdae0b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +48 -12
  2. package/package.json +11 -4
package/README.md CHANGED
@@ -1,19 +1,55 @@
1
+ # Official Web Component for TinyMCE
1
2
 
2
- # Official TinyMCE Web Component
3
+ ## About
3
4
 
4
- Web Components are a set of built-in browser capabilities that let developers create custom HTML elements in a similar manner to what is available in frameworks like React or Angular.
5
+ `tinymce-webcomponent` component is a thin wrapper for [TinyMCE](https://www.npmjs.com/package/tinymce) that makes integrating TinyMCE into a web page easy and seamless.
5
6
 
6
- Web Components comprise 3 basic capabilities:
7
- - Shadow DOM
8
- - Custom Elements
9
- - HTML Templating
7
+ Once installed, creating an editor instance is as simple as adding a `<tinymce-editor></tinymce-editor>` tag to the page. This tag is used in place of calling tinymce.init(). Many of the standard configuration properties can be specified as attributes to this tag, instead of using JavaScript code.
10
8
 
11
- Shadow DOM provides the ability to create a "sandboxed" area of a web page, in a similar manner to iframes. An HTML element can have a "shadow root" attached to it, which is a tree of elements that are separate to the main document. Shadow roots are useful for having an area of the document that doesn't inherit styles from the main document. This is particularly handy for rich components like TinyMCE which have their own complex stylesheets and have to fit into any of our customer's web apps.
12
9
 
13
- Custom Elements allow a developer to register a new tag/element that can be included in the HTML of the page. The custom element's behaviour is defined in JavaScript code and then registered for use in HTML.
14
- TinyMCE for Web Components provides the Custom Element, building on the experimental Shadow DOM support added in TinyMCE 5.4.
10
+ ## Quickstart
15
11
 
16
- Once the TinyMCE custom element is installed on a web page, creating an editor instance is as simple as adding a `<tinymce-editor></tinymce-editor>` tag to the page. This tag is used in place of calling tinymce.init(). Many of the standard configuration properties can be specified as attributes to this tag, instead of using JavaScript code.
12
+ ### Cloud CDN
17
13
 
18
- TinyMCE for Web Components is available for free under an Apache 2.0 license, and can be installed via NPM. It is compatible with open source TinyMCE, Tiny Cloud, and TinyMCE commercial self-hosted offerings.
19
- At this stage, TinyMCE for Web Components is an experimental integration - we would love to hear your [feedback](https://github.com/tinymce/tinymce-webcomponent/issues) on how it can be improved.
14
+ In your project:
15
+
16
+ 1. [Sign up for a Tiny Cloud account](https://www.tiny.cloud/pricing/) to receive a Tiny Cloud API key.
17
+ 2. Include the following script tag to load the Web Component from the CDN:
18
+
19
+ ```html
20
+ <script src="https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent/dist/tinymce-webcomponent.min.js"></script>
21
+ ```
22
+
23
+ 3. Add the `tinymce-editor` element with your API key and configuration as HTML attributes:
24
+
25
+ ```html
26
+ <tinymce-editor
27
+ api-key="your-api-key"
28
+ plugins="lists link image table code help wordcount"
29
+ >
30
+ <p>Welcome to TinyMCE</p>
31
+ </tinymce-editor>
32
+ ```
33
+
34
+ 4. Update the `api-key` attribute to include your Tiny Cloud API key.
35
+
36
+ For more information: [Using TinyMCE with Web Components - Cloud CDN](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-cloud/)
37
+
38
+ ### Self hosted via NPM package
39
+
40
+ Using TinyMCE from NPM with the Web Component requires a couple of extra steps. See the documentation for more information: [Using TinyMCE with Web Components - Self hosted via NPM](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-pm/)
41
+
42
+ ## Detailed documentation
43
+
44
+ * [TinyMCE Web Component Technical Reference](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/).
45
+ * [TinyMCE Documentation](https://www.tiny.cloud/docs/tinymce/latest/).
46
+
47
+ ## Issues
48
+
49
+ Have you found an issue with `tinymce-webcomponent` or do you have a feature request? Open up an [issue](https://github.com/tinymce/tinymce-webcomponent/issues) and let us know or submit a [pull request](https://github.com/tinymce/tinymce-webcomponent/pulls). *Note: for issues concerning TinyMCE please visit the [TinyMCE repository](https://github.com/tinymce/tinymce).*
50
+
51
+ ## License
52
+
53
+ `tinymce-webcomponent` is licensed under the MIT License. See the LICENSE.txt file for details.
54
+
55
+ Depending on use case, the TinyMCE core editor can be used under either GPL-2.0-or-later or a commercial license. See the [tinymce package](https://www.npmjs.com/package/tinymce) for details.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "description": "Official TinyMCE Web Component",
3
- "version": "2.4.0",
3
+ "version": "2.4.1-feature.20260923022858935.sha5bdae0b",
4
4
  "name": "@tinymce/tinymce-webcomponent",
5
5
  "repository": {
6
6
  "url": "https://github.com/tinymce/tinymce-webcomponent"
@@ -19,10 +19,17 @@
19
19
  "serve": "yarn tsx src/demo/ts/Server.ts"
20
20
  },
21
21
  "keywords": [
22
- "TinyMCE",
23
- "webcomponent"
22
+ "tinymce",
23
+ "webcomponent",
24
+ "component",
25
+ "editor",
26
+ "wysiwyg",
27
+ "rich-text-editor",
28
+ "html",
29
+ "javascript",
30
+ "browser"
24
31
  ],
25
- "author": "Tiny Technologies",
32
+ "author": "Ephox Corporation DBA Tiny Technologies, Inc.",
26
33
  "license": "MIT",
27
34
  "devDependencies": {
28
35
  "@ephox/agar": "^8.0.1",