Skip to content

Commit 1c50bb7

Browse files
committed
Update cloud and bundle docs of react
1 parent 414b426 commit 1c50bb7

File tree

5 files changed

+115
-158
lines changed

5 files changed

+115
-158
lines changed
Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
= Using TinyMCE from the Tiny Cloud CDN with the React framework
1+
= Using TinyMCE from Tiny Cloud in React
22
:navtitle: React
3-
:description: A guide on integrating TinyMCE from the Tiny Cloud into the React framework.
4-
:keywords: integration, integrate, react, reactjs, vite, tinymce-react
3+
:description: A guide on integrating TinyMCE from the Tiny Cloud into React.
4+
:keywords: integration, integrate, react, reactjs, vite, tinymce-react, tinymce
55
:productSource: cloud
66

7+
8+
This guide shows how to integrate TinyMCE from Tiny Cloud into a React project using link:https://github.com/tinymce/tinymce-react[{productname} React component]
9+
710
include::partial$integrations/react-quick-start.adoc[]
Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
= Bundle with TinyMCE and the React framework
2-
:navtitle: Using a package manager with bundling
3-
:description: A guide on integrating the TinyMCE package into the React framework by bundling it.
1+
= Bundle TinyMCE in React
2+
:navtitle: Bundle TinyMCE in a React project using a module bundler
3+
:description: A guide on integrating the TinyMCE package into React by bundling it.
44
:keywords: integration, integrate, react, reactjs, vite, tinymce-react, bundle
55
:productSource: package-manager
66
:productUse: bundle
77

8+
This guide shows how to bundle TinyMCE in a React project with link:https://github.com/tinymce/tinymce-react[{productname} React component]
9+
810
include::partial$integrations/react-quick-start.adoc[]
Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
= Lazy load TinyMCE with the React framework
1+
= Self-host TinyMCE in React
22
:page-aliases: react-pm.adoc
3-
:navtitle: Using a package manager with hosting
4-
:description: A guide on integrating the TinyMCE package into the React framework by self-hosting it.
3+
:navtitle: Self-host TinyMCE in React
4+
:description: A guide on integrating TinyMCE into React by self-hosting it.
55
:keywords: integration, integrate, react, reactjs, vite, tinymce-react, host
66
:productSource: package-manager
77
:productUse: host
88

9+
This guide shows how to self-host TinyMCE in a React project using link:https://github.com/tinymce/tinymce-react[{productname} React component]
10+
911
include::partial$integrations/react-quick-start.adoc[]
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// Ensure to import tinymce first as other components expect
2+
// a global variable `tinymce` to exist
3+
import 'tinymce/tinymce';
4+
// DOM model
5+
import 'tinymce/models/dom/model'
6+
// Theme
7+
import 'tinymce/themes/silver';
8+
// Toolbar icons
9+
import 'tinymce/icons/default';
10+
// Editor styles
11+
import 'tinymce/skins/ui/oxide/skin';
12+
13+
// if you use a plugin that is not listed here the editor will fail to load
14+
import 'tinymce/plugins/anchor';
15+
import 'tinymce/plugins/advlist';
16+
import 'tinymce/plugins/autolink';
17+
import 'tinymce/plugins/charmap';
18+
import 'tinymce/plugins/code';
19+
import 'tinymce/plugins/media';
20+
import 'tinymce/plugins/visualblocks';
21+
import 'tinymce/plugins/fullscreen';
22+
import 'tinymce/plugins/insertdatetime';
23+
import 'tinymce/plugins/preview';
24+
import 'tinymce/plugins/help';
25+
// Include resources that a plugin lazy-loads at the run-time
26+
import 'tinymce/plugins/help/js/i18n/keynav/en';
27+
import 'tinymce/plugins/image';
28+
import 'tinymce/plugins/link';
29+
import 'tinymce/plugins/lists';
30+
import 'tinymce/plugins/searchreplace';
31+
import 'tinymce/plugins/table';
32+
import 'tinymce/plugins/wordcount';
33+
34+
// Content styles, including inline UI like fake cursors
35+
import 'tinymce/skins/content/default/content';
36+
import 'tinymce/skins/ui/oxide/content';

0 commit comments

Comments
 (0)