Şöyle bir örnek yaptım, istediğiniz bu şekilde mi?
test.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
main {
max-width: 960px;
margin: 0 auto;
margin-top: 100px;
}
.gallery-modal {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 11;
background: rgba(0,0,0,.5);
backdrop-filter: blur(2px);
align-items: center;
justify-content: center;
display: none;
opacity: 0;
}
.gallery {
position: relative;
background-color: #fff;
border-radius: 12px;
width: 960px;
height: 460px;
overflow: hidden;
}
.gallery iframe {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
border: 0;
}
</style>
</head>
<body>
<div class="gallery-modal">
<div class="gallery">
<iframe src="upload.php"></iframe>
</div>
</div>
<main>
<textarea></textarea>
</main>
<script src="jquery.js"></script>
<script src="tinymce/tinymce.min.js"></script>
<script>
$(".gallery-modal").click(function(){
$(".gallery-modal").animate({opacity: 0}, function(){ $(this).css("display", "none"); });
});
tinymce.PluginManager.add("gallery", function(editor, url) {
editor.ui.registry.addButton("gallery", {
text: "Fotoğraf Galerisi",
icon: "image",
onAction: function (){
$(".gallery-modal").css("display", "flex").animate({opacity: 1});
}
});
});
tinymce.init({
selector: 'textarea',
menubar: false,
entity_encoding : "raw",
spellchecker_active: false,
plugins: "gallery",
toolbar: 'code | undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help | gallery'
});
</script>
</body>
</html>upload.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body {
margin: 0;
padding: 35px;
}
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
ul li {
width: 240px;
height: 160px;
background-size: cover;
border-radius: 6px;
margin-right: 1em;
margin-bottom: 1em;
cursor: pointer;
}
img {
max-width: 100%;
height: 160px;
object-fit: cover;
}
</style>
</head>
<body>
<ul>
<li data-file="anjum-1ND336.jpg" style="background-image:url(anjum-1ND336.jpg);"></li>
<li data-file="anjum-22OGBI.jpg" style="background-image:url(anjum-22OGBI.jpg);"></li>
<li data-file="anjum-2X8MMI.jpg" style="background-image:url(anjum-2X8MMI.jpg);"></li>
</ul>
<script>
document.querySelectorAll("ul li").forEach(function(itemLi){
itemLi.addEventListener("click", function(){
parent.tinymce.activeEditor.insertContent("<img width=240 src=\"" + itemLi.getAttribute("data-file") + "\" />");
parent.document.querySelector(".gallery-modal").click();
});
});
</script>
</body>
</html>