diff --git a/modules/ROOT/partials/integrations/react-quick-start.adoc b/modules/ROOT/partials/integrations/react-quick-start.adoc index 20e60ed330..6339586930 100644 --- a/modules/ROOT/partials/integrations/react-quick-start.adoc +++ b/modules/ROOT/partials/integrations/react-quick-start.adoc @@ -18,6 +18,7 @@ This procedure requires https://nodejs.org/[Node.js (and npm)]. + [source,sh] ---- +# npm 7+, extra double-dash is needed npm create vite@5 tinymce-react-demo -- --template react-swc ---- . Change to the newly created directory. @@ -28,11 +29,11 @@ cd tinymce-react-demo ---- ifeval::["{productSource}" == "cloud"] -. Install the `+@tinymce/tinymce-react+` package and save it to your `+package.json+` with `+--save+`. +. Install the `+@tinymce/tinymce-react+` package. + [source,sh] ---- -npm install --save @tinymce/tinymce-react +npm install @tinymce/tinymce-react ---- . Using a text editor, open `+./src/App.jsx+` and replace the contents with: @@ -50,11 +51,12 @@ export default function App() { console.log(editorRef.current.getContent()); } }; + return ( <> editorRef.current = editor} + apiKey='no-api-key' + onInit={ (_evt, editor) => editorRef.current = editor } initialValue="

This is the initial content of the editor.

" init={{ height: 500, @@ -83,11 +85,11 @@ This JavaScript file will create a component "`+App+`" containing a {productname endif::[] ifeval::["{productSource}" == "package-manager"] ifeval::["{productUse}" == "host"] -. Install the `+tinymce+`, `+@tinymce/tinymce-react+` and `+fs-extra+` packages and save them to your `+package.json+` with `+--save+`. +. Install the `+tinymce+`, `+@tinymce/tinymce-react+` and `+fs-extra+` packages. + [source,sh] ---- -npm install --save tinymce @tinymce/tinymce-react fs-extra +npm install tinymce @tinymce/tinymce-react fs-extra ---- . Setup a `postinstall` script to copy {productname} to the public directory for hosting @@ -175,11 +177,11 @@ export default function App() { endif::[] ifeval::["{productUse}" == "bundle"] -. Install the `+tinymce+` and `+@tinymce/tinymce-react+` packages and save them to your `+package.json+` with `+--save+`. +. Install the `+tinymce+` and `+@tinymce/tinymce-react+` packages + [source,sh] ---- -npm install --save tinymce @tinymce/tinymce-react +npm install tinymce @tinymce/tinymce-react ---- . Using a text editor, create `+./src/BundledEditor.jsx+` and set the contents to: @@ -265,6 +267,7 @@ export default function App() { console.log(editorRef.current.getContent()); } }; + return ( <> ---- @@ -229,7 +229,7 @@ Such as: [source,jsx,subs="attributes+"] ---- @@ -663,7 +663,7 @@ function MyComponent({initialValue}) { CAUTION: The controlled component can have performance problems on large documents as it requires converting the entire document to a string on each keystroke or modification. -To use the editor as a https://reactjs.org/docs/forms.html#controlled-components[controlled component], both the `+value+` and `+onEditorChange+` props are required. +To use the editor as a https://legacy.reactjs.org/docs/forms.html#controlled-components[controlled component], both the `+value+` and `+onEditorChange+` props are required. The `+value+` prop is used to set and re-set the editor content. If it is not updated to the latest version of the editor content, the editor will rollback any changes. @@ -767,7 +767,7 @@ function MyComponent({initialValue, limit}) { }; ---- -For information on controlled components in React, see: https://reactjs.org/docs/forms.html#controlled-components[React Docs - Controlled Components]. +For information on controlled components in React, see: https://legacy.reactjs.org/docs/forms.html#controlled-components[React Docs - Controlled Components]. [[event-binding]] == Event binding