Topic: React MDBWysiwyg link and img problem
Hi,
1) In MDBWysiwyg Textarea is displayed above the editor ?...
2) In MDBWysiwyg, it's not possible to add links – a modal appears with fields to enter the URL and description, but after confirming, the link is not added. Additionally, someone forgot to disable the onChange console.log – anything typed displays in the console.
3) In MDBWysiwyg, images can only be added at the beginning of the editor – it’s not possible to insert them within the main content of the page (as it works on your website). Additionally, a warning pops up:
Popper: CSS "margin" styles cannot be used to apply padding between the popper and its reference element or boundary. To replicate margin, use the offset modifier, as well as the padding option in the preventOverflow and flip modifiers. Error Component Stack at ui (mdb-react-ui-kit.esm.js:1125:1) at div () at io (mdb-react-ui-kit.esm.js:998:1) at ro (mdb-react-ui-kit.esm.js:953:1) at ii (mdb-react-ui-kit.esm.js:1021:1) at div () at mdb-react-ui-kit.esm.js:240:1 at div () at A (mdb-react-wysiwyg.esm.js:314:1) at div () at div () at mdb-react-wysiwyg.esm.js:497:1 at div () at mdb-react-ui-kit.esm.js:262:1 at Test (Test.jsx:20:1) at RenderedRoute (hooks.tsx:649:1) at Routes (components.tsx:501:1) at Suspense () at ErrorBoundary (ErrorBoundary.jsx:3:1) at div () at div () at Layout (Layout.jsx:6:1) at div () at Router (components.tsx:410:1) at BrowserRouter (index.tsx:778:1) at App (App.js:47:1)
4) Using the onChange method, I can save changes to the state, and then to the database. How can I display the data from the state (e.g., loaded from the database) within the MDBWysiwyg body in a formatted version instead of HTML, for purposes such as page editing? The version loaded from the database (the one we receive as an argument in onChange) causes the entire component to hang if it’s passed inside .
- The error only occurs if you forget to import WYSIWYG's css styles. If that's not the case, please provide more details.
- That's a bug, I'm adding a task to fix it.
- That's also a bug, adding task.
It would be better if the plugin accepted the content in a prop, but at the moment it does not have such option. There is a workaround you can use. Make sure the content contains proper code for the safe render
const [content, setContent] = React.useState(''); useEffect(() => { new Promise((resolve) => { setTimeout(() => { resolve(setContent('<br><p style="text-align: center;"><img src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp" class="img-fluid"></p><h1 style="text-align: center;">MDBootstrap</h1><p style="text-align: center;">WYSIWYG Editor</p><p style="text-align: center;"><a href="https://mdbootstrap.com" target="_blank" contenteditable="false" style="font-size: 1rem; text-align: left;">MDBootstrap.com</a> © 2020</p><p style="text-align: left;">')) }, 2000) }) }, []) return ( <MDBWysiwyg> <div dangerouslySetInnerHTML={{ __html: content }} /> </MDBWysiwyg> );
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 9.0.0
- Device: Macbook
- Browser: Chrome
- OS: MacOS
- Provided sample code: No
- Provided link: No