1. Home
  2. Forum
  3. React - EJ 2
  4. Rich Text editor with formik

Rich Text editor with formik

Dear supporter
Could you please help to give example on how to combined Rich text editor with formik
I use change event to get the value but it keep throw error 

Cannot read properties of undefined (reading 'isService')

    at ComponentBase.getInjectedServices (component-base.js:562:1)

    at ComponentBase.refreshChild (component-base.js:344:1)

    at ComponentBase.refreshProperties (component-base.js:160:1)

    at ComponentBase.updateProperties (component-base.js:149:1)

    at ComponentBase.shouldComponentUpdate (component-base.js:90:1)

<RichTextEditorComponent
id="resizeRTE"
ref={(richtexteditor) => {
rteObj = richtexteditor;
}}
enableResize={true}
toolbarSettings={toolbarSettings}
change={() => {
setFieldValue(field.name, rteObj.value);
}}
name={field.name}
value={field.value}
>
{field.value}
<Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
</RichTextEditorComponent>

8 Replies
KJ Kevin James August 30, 2022 01:48 PM UTC

We will use this package to include a "wysiwyg" editor inside our React project. draft-js will be used to manage the content written or uploaded in it. Now you just need to import the CSS to make the text editor components look good. Use “wrapperStyle” attribute to edit the editor's width or height.

GD Gokulraj Devarajan Syncfusion Team September 3, 2022 08:00 AM UTC

Hi Jay,

We have created a sample using RichTextEditor and Formik. In the sample, we have rendered the RichTextEditor component. We have gotten the values using getText public methods and set the save interval as "1" to get the modified value instantly. When we click the Submit button, we are shown the alert box with the values. Please see the sample and API links for further information.
Sample: https://codesandbox.io/s/optimistic-pine-85yvs4?file=/src/index.js

API Link:https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/#gettext

Blog: https://www.syncfusion.com/blogs/post/how-to-use-syncfusions-react-rich-text-editor-with-react-redux-form.aspx


Please check the above sample, and if you still face any problems, please share your full page code or runnable sample with the issue, which helps us to check and provide you with the solution at the earliest.


Regards
Gokulraj


AT Andrew Tacchi September 5, 2023 03:09 PM UTC

I'm getting the same error.  Some small investigation appears that

 - Create basic app using "Vite" and it works

 - Create basic app in "React Create App" it fails

 - Create a basic app in "Remix" and it fails

import { HtmlEditor, Inject, RichTextEditorComponent, Toolbar,Image, Link, QuickToolbar } from '@syncfusion/ej2-react-richtexteditor'

function App() {

  return (
    <>
      <div>
      <RichTextEditorComponent
        >
This is some text to edit
          <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />
        </RichTextEditorComponent>
      </div>

    </>
  )
}

export default App



Vite package

{
  "name": "vite-number-conversion",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@syncfusion/ej2-react-richtexteditor": "^22.2.12",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}


Remix package

{
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "remix build",
    "dev": "remix dev",
    "start": "remix-serve build",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@remix-run/css-bundle": "^1.19.3",
    "@remix-run/node": "^1.19.3",
    "@remix-run/react": "^1.19.3",
    "@remix-run/serve": "^1.19.3",
    "@syncfusion/ej2-react-richtexteditor": "^22.2.5",
    "isbot": "^3.6.8",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.19.3",
    "@remix-run/eslint-config": "^1.19.3",
    "@types/react": "^18.0.35",
    "@types/react-dom": "^18.0.11",
    "eslint": "^8.38.0",
    "typescript": "^5.0.4"
  },
  "engines": {
    "node": ">=14.0.0"
  }
}


create react app


{
  "name": "test-editor-cra",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@syncfusion/ej2-react-richtexteditor": "^22.2.12",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.48",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}








AT Andrew Tacchi replied to Gokulraj Devarajan September 6, 2023 07:47 AM UTC

For assistance, I've created a fork from the syncfusion's remix blog and updated to show the error

https://stackblitz.com/edit/node-wjruvn?file=package.json


VY Vinothkumar Yuvaraj Syncfusion Team September 6, 2023 02:17 PM UTC

Hi Andrew,


We have validated your reported query and found that the issue occurred when passing the value as text into the Rich Text Editor. To solve your problem, we suggest you wrap the text in an element and then insert it into the Rich Text Editor or use the value property to insert the text into the Rich Text Editor. Please refer to the following code and sample for your reference.


   <RichTextEditorComponent>

        <p>This is the default text</p>

        <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />

   </RichTextEditorComponent>


Sample: https://stackblitz.com/edit/node-pej2tf?file=app%2Fdatasource.tsx,app%2Froutes%2Findex.tsx


Value Property : 

export default function Index() {

  var value = "Rich Text Editor";

  return (

    <div>

      <RichTextEditorComponent value={value}>

        <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />

      </RichTextEditorComponent>

    </div>

  );

}


API Link: https://ej2.syncfusion.com/react/documentation/api/rich-text-editor/#value


Regards,

Vinothkumar


AT Andrew Tacchi replied to Vinothkumar Yuvaraj September 7, 2023 07:23 AM UTC

Thanks,

That is working in Chrome, but for some reason the components don't style in Edge.  Not sure if if that is something in my browser, issue in Edge or with your code issue.  Can you let me know if you get the same issues?


Image_4947_1694071253228Image_3975_1694071312705


Edge version is 

Microsoft Edge for BusinessLearn more about Microsoft Edge for BusinessVersion 116.0.1938.69 (Official build) (64-bit)

Chrome version is

Version 116.0.5845.141 (Official Build) (64-bit)


GD Gokulraj Devarajan Syncfusion Team September 8, 2023 06:47 AM UTC

We have faced the same issue it is due to Microsoft Edge security. However, you can open the sample in the New window to solve the issue. 


GD Gokulraj Devarajan Syncfusion Team September 8, 2023 06:47 AM UTC

Reference: 

https://stackoverflow.com/questions/35176082/why-are-cors-requests-failing-in-microsoft-edge-but-working-in-other-browsers




Loader.
Up arrow icon