Code bellow works fine in Chrome and Edge but fails in firefox. I'm getting the error "iw._ is undefined". This is because in default Rich text Editor config (rte.js) they check if the object is null in a[209] but, the didn't check is a is null. I can fix that, but the same issue is repeated several times and I would not like to change the base code from a library I am using.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<html>
<body>
<textarea id="inp_editor1">
<div>
<div>
<p style="margin-top:0pt; margin-bottom:9pt; widows:0; orphans:0; font-size:9pt">
<span style="font-family:'Times New Roman'">es una prueba</span>
</p>
<p style="margin-top:9pt; margin-bottom:9pt; widows:0; orphans:0; font-size:9pt">
<img src="http://localhost:8080/t.001.jpeg" width="198" height="120" alt="" style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline" />
<img src="http://localhost:8080/t.002.jpeg" width="152" height="208" alt="" style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline" />
<img src="http://localhost:8080/t.003.jpeg" width="480" height="360" alt="" style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline" />
</p>
</div>
</div>
</textarea>
<link rel="stylesheet" href="richtexteditor/rte_theme_default.css" />
<script type="text/javascript" src="richtexteditor/rte.js"></script>
<script type="text/javascript" src="richtexteditor/plugins/all_plugins.js"></script>
<script type="text/javascript">
var editor1cfg = {};
editor1cfg.toolbar = "mytoolbar";
editor1cfg.toolbar_mytoolbar =
"{bold,italic,underline,forecolor,backcolor}|{justifyleft,justifycenter,justifyright,justifyfull}|{insertorderedlist,insertunorderedlist,indent,outdent,insertblockquote}" +
" \#{paragraphs:toggle,fontname:toggle,fontsize:toggle,inlinestyle,lineheight}" +
" / {removeformat,cut,copy,paste,delete,find}|{inserttable,insertimage,selectall}" +
"\#{toggleborder,fullscreenenter,fullscreenexit,undo,redo,togglemore}";
var editor1 = new RichTextEditor("#inp_editor1", editor1cfg, { editorResizeMode: "both" });
</script>
</body>
</html>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
</script>
</body>
</html>
Besides, code bellow fails in firefox only in modals windows, it doesn't fails in regular windows.
<html>
<body>
<textarea id="inp_editor1">
<div>
<div>
<p style="margin-top:0pt; margin-bottom:9pt; widows:0; orphans:0; font-size:9pt">
<span style="font-family:'Times New Roman'">es una prueba</span>
</p>
<p style="margin-top:9pt; margin-bottom:9pt; widows:0; orphans:0; font-size:9pt">
<img src="http://localhost:8080/t.001.jpeg" width="198" height="120" alt="" style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline" />
<img src="http://localhost:8080/t.002.jpeg" width="152" height="208" alt="" style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline" />
<img src="http://localhost:8080/t.003.jpeg" width="480" height="360" alt="" style="-aw-left-pos:0pt; -aw-rel-hpos:column; -aw-rel-vpos:paragraph; -aw-top-pos:0pt; -aw-wrap-type:inline" />
</p>
</div>
</div>
</textarea>
<link rel="stylesheet" href="richtexteditor/rte_theme_default.css" />
<script type="text/javascript" src="richtexteditor/rte.js"></script>
<script type="text/javascript" src="richtexteditor/plugins/all_plugins.js"></script>
<script type="text/javascript">
var editor1cfg = {};
editor1cfg.toolbar = "mytoolbar";
editor1cfg.toolbar_mytoolbar =
"{bold,italic,underline,forecolor,backcolor}|{justifyleft,justifycenter,justifyright,justifyfull}|{insertorderedlist,insertunorderedlist,indent,outdent,insertblockquote}" +
" \#{paragraphs:toggle,fontname:toggle,fontsize:toggle,inlinestyle,lineheight}" +
" / {removeformat,cut,copy,paste,delete,find}|{inserttable,insertimage,selectall}" +
"\#{toggleborder,fullscreenenter,fullscreenexit,undo,redo,togglemore}";
var editor1 = new RichTextEditor("#inp_editor1", editor1cfg, { editorResizeMode: "both" });
</script>
this is how you can modify your code by delaying the initialization until the modal is shown, you give the Rich Text Editor a better chance to work correctly in Firefox modal windows
<!-- Add an ID to the textarea for easier selection -->
<textarea id="inp_editor1"></textarea>
<!-- ... other HTML code ... -->
<script type="text/javascript">
$('#exampleModal').on('shown.bs.modal', function () {
// Initialize the Rich Text Editor after the modal is shown
var editor1cfg = {};
// Configure your editor options here
var editor1 = new RichTextEditor("#inp_editor1", editor1cfg, { editorResizeMode: "both" });
});
</script>