React MDBWysiwyg link and img problem

Topic: React MDBWysiwyg link and img problem

WingedImagination priority asked 1 month ago

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 .

Add comment

Mateusz Lazaru staff answered 1 month ago

0 0 Best answer

<ol>
<li>The error only occurs if you forget to import WYSIWYG's css styles. If that's not the case, please provide more details.</li>
<li>That's a bug, I'm adding a task to fix it.</li>
<li>That's also a bug, adding task.</li>
<li><p>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</p>

<pre class="prettyprint"><code>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>&nbsp;© 2020</p><p style="text-align: left;">'))
    }, 2000)
  })
}, [])

return (
   <MDBWysiwyg>
        <div dangerouslySetInnerHTML={{ __html: content }} />
    </MDBWysiwyg>
);
</code></pre></li>
</ol>

Please insert min. 20 characters.

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>&nbsp;© 2020</p><p style="text-align: left;">'))
    }, 2000)
  })
}, [])  

return (
   <MDBWysiwyg>
        <div dangerouslySetInnerHTML={{ __html: content }} />
    </MDBWysiwyg>
);

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB React
MDB Version: MDB5 9.0.0
Device: Macbook
Browser: Chrome
OS: MacOS
Provided sample code: Yes
Provided link: No

WingedImagination

60Support score
12Questions 2Answers 0Snippets