Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Metronic & CkEditor in modal


Good afternoon,

I have a modal with a form that has a textarea (ckeditor), in this when I try to insert an image by URL, I get this modal disabled and the cursor is seen in my modal behind.
What can it be? How can I solve it?


<link rel="stylesheet" href="https://cdn.ckeditor.com/ckeditor5/43.1.1/ckeditor5.css" />

<script type="importmap">
{
"imports": {
"ckeditor5": "https://cdn.ckeditor.com/ckeditor5/43.1.1/ckeditor5.js",
"ckeditor5/": "https://cdn.ckeditor.com/ckeditor5/43.1.1/"
}
}
</script>

<script type="module">
import { ClassicEditor, Essentials, Bold, Italic, Strikethrough, Subscript, Superscript, Underline,
Font, Paragraph, Image, ImageInsert, Alignment, Highlight, RemoveFormat, List, Indent, IndentBlock } from "ckeditor5";

window.addEventListener("load", (event) => {
let CkeditorExpl;
ClassicEditor
.create( document.querySelector("#explicacionId"), {
plugins: [ Essentials, Bold, Italic, Strikethrough, Subscript, Superscript, Underline,
Font, Paragraph, Image, ImageInsert, Alignment, Highlight, RemoveFormat, List, Indent, IndentBlock ],
toolbar: [
"undo", "redo", "|",
"bold", "italic", "underline", "strikethrough", "subscript", "superscript", "|",
"alignment", /*"alignment:left", "alignment:right", "alignment:center", "alignment:justify"*/, "|",
"numberedList", "bulletedList", "indent", "outdent", "|",
"fontSize", /*"fontFamily",*/ "fontColor", "fontBackgroundColor", "|",
"removeFormat", "|",
"insertImage", "highlight", "|"
],
image: {
insert: {
integrations: [ "url" ]
}
},
} )
.then(editor => {
CkeditorExpl = editor;
})
.catch(error => {
console.error(error);
});
});
</script>


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Hey everyone! First of all, it's important that the registration process is simple. I recently tried creating an account on Banzaibet, and honestly, it was super easy. You just need to fill in your details, like name, email, and phone number, and then set a strong password. You can activate your account in the way that's most convenient for you. Check out more about it here: https://banzaibet-online.in/registration/ . After registration, you get immediate access to games, bonuses, and other services—without any hassle!



I'm new here. Just started coding stuffs for a few days getaway shootout
And to be honest, I couldn't understand this difficult knowledge. How can you guys learn this??



Hi,

Can you try to remove tabindex="-1" attribute from Modal and retry ?

if you need any further help can you please share a test page via private link for us to check it ?

Regards,
Sean


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(