iframe of TinyMCE editor is removed from DOM after moving the editor - reactjs

I have a sortable collection of TinyMce editors and when an editor is moved, this one doesn't work anymore.
The TinyMCE editor iframe turn empty after drag end event but I don't understand why.
The editor toolbar is here but doesn't work and the content disappear without possibility of typing in it again.
Is there a way to reinitialize the dragged editor with his initial content after drag end event.
I'm using Reactjs and #dnd-kit/sortable.

Moving the iFrame editor around the DOM is not supported. If you want to move the editor you can achieve this by removing the editor with remove() and reinitializing it with init() once it has been moved.
https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.root/#remove
https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.root/#init
The other alternative is to run TinyMCE in inline mode:
https://www.tiny.cloud/docs/tinymce/6/use-tinymce-inline/

Related

Elementor - how to prevent closing popup when clicking on background by css code?

I use some older version of elementor - there is no automatic button in advanced settings for that.
I'd like to know if there is an advanced css code I could use for my popup so I can prevent it from closing when clicking on the background.

React-Bootstrap Modal, Issue with highlighting text in Firefox

I'm using react-bootstrap 0.31.0 (can't update it cause this is a large legacy app with a bunch of things dependent on the version). Everything works fine in Chrome, but when I try to highlight text in a textarea inside a element in Firefox (using the mouse, keyboard works), instead of highlighting the text, the cursor just tries to drag the entire modal. Adding onMouseDown={event => event.stopPropagation(}) to the textarea didn't work.

Codenameone I want to display html inside a TextArea

I just want to display html text inside a textArea for exemple if I write <h1>Header</h1> I want it to be displayed as header not with the tags.
I tried with webBrowser but it didn't work.
Codename Ones text area doesn't support it. What you're looking for is a rich text edit which we don't have. What you can do is use the BrowserComponent and in it open an HTML rich edit and use that.
There used to be a CN1LIB that did that seamlessly but because JS frameworks break constantly it stopped working.

How to drag and drop into iFrame from parent webpage?

I'm working on a browser extension that injects an iframe into the webpage. Now the iframe elements are not responding to drag and drop events for webpage's elements though it is responding to drag and drop events from it's(iframe's) elements only. I've tried almost every solution but they didn't work. Can you give me any clue on how to fix this?
The iframe is built using reactjs

How to disable auto completion in ui.ace editor in Angular JS

I am using https://github.com/angular-ui/ui-ace directive to implement ace editor in my angular JS application.
Everything works well, i just want to know, how to disable the auto completion in the editor. I am using it in mode:html, and whenever I type in any opening tag like div, closing tag is added automatically. I want to disable this behaviour

Resources