Tinymce için Resim seçme galerisi yapmak

Herşeyi tamam ama json adresini tinymce.inite atayamıyorum eklenti içinde kullanamıyorum daha önce tinymce eklenti geliştiren oldu mu? Ücretli destekte alabilirim

örnek json adresi ve kodlarınızı eklerseniz başlık altından yardımcı olabilirim.

tinymce.PluginManager.add('media-gallery', function(editor, url) {
         var  galleryInıt= function (_) {
                $('#image').val('');
                $.when().done(function(ajaxSend){
                var veriler=JSON.parse(ajaxSend);
                var string=`<input type="hidden" id="image"/>`;
                $.each(veriler.veri, function(ksira, resimler) {
                        console.log(xx);
                        string+=`<div class='col-xs-4'><img class="col-xs-4 img-responsive item" src='${resimler.resim_link}'/></div>`;
                });
                
                $(".gallery-div").html(string);
                });
                tinyMCE.activeEditor.windowManager.open({
                    title: 'My Gallery', // The dialog's title - displayed in the dialog header
                    size: 'large',
                    body: {
                        type: 'panel', // The root body type - a Panel or TabPanel
                        items: [ // A list of panel components
                            {
                                type: 'htmlpanel', // A HTML panel component
                                html: '<div class="gallery-div"></div>'
                            }
                        ]
                    },
                    buttons: [
                        {
                            type: 'cancel',
                            name: 'closeButton',
                            text: 'Cancel'
                        },
                        {
                            type: 'submit',
                            name: 'submitButton',
                            text: 'Insert To Editor',
                            primary: true
                        }
                    ],
                    onSubmit: function (api) {
                        var data = api.getData();
                        let source = $('#image').val();

                        if(source != ''){
                            editor.focus();
                            editor.selection.setContent('<img src="'+source+'" />');
                            api.close();
                        }else{
                            alert("Please select an image.");
                        }
                    }
                });
            }
    var ajaxFireInıt=function(){
        return $.post("http://davulgablog/webdavulganet/galeri",{}, function(sonuc, durum) {
                    return sonuc;
            });
    }
$(document).on('click', '.gallery-div > .item', function () {
    $('.gallery-div > .item').removeClass('active');
    $(this).addClass('active');
    $('#image').val($(this).attr('src'));
    console.log($(this).attr('src'));
});
$(document).on('click', '.gallery-div > .item', function () {
    $('.gallery-div > .item').removeClass('active');
    $(this).addClass('active');
    $('#image').val($(this).attr('src'));
    console.log($(this).attr('src'));
});
    var openDialog = function () {
      return editor.windowManager.open({
        title: 'Akordiyon Menü oluştur',
        body: {
          type: 'panel',
          items: [
            {
              type: 'input', name: 'my_count', layout: 'flow',
              label: 'Kaç Adet akordiyon Menü eklemek istersiniz?'
            }
          ]
        },
        buttons: [
          {
            type: 'cancel',text: 'Close'
          },
          {
            type: 'submit',text: 'Save',primary: true
          }
        ],
        onSubmit: function onsubmit(e) {
          var curAccordion = Date.now();
          var curAcc       = [];
          var accordionCount = parseInt(e.getData().my_count);
          if(typeof accordionCount==="number" && accordionCount>0){
            createAccordion(accordionCount-1,[]);
            e.close();
          }else{
            e.close();
            createalert({alert_title:'Hata',alert_text:"Lütfen oluşturacağınız akordiyon menü adetini giriniz",alert_level:'success',timeout:3500});
           
            setTimeout(() => {
            openDialog();
           }, 3000);
            
          }
        
          
        }
      });
    };
    var dataInsertbs5=function(veri){
      var data=[];
      var accordionCount=veri.length;
      var accordionCurr=Date.now();
      for(i=0; i<veri.length; i++){
        var temp=veri[i];
        var panel = `<div class="accordion-item">
        <h2 class="accordion-header" id="afyheadAccordion${i}">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          ${temp.baslik} 
          </button>
        </h2>
        <div id="afycollapseAccordion${i}" class="accordion-collapse collapse show" aria-labelledby="afyheadAccordion${i}" data-bs-parent="#accordionContainer${accordionCurr}">
          <div class="accordion-body">
          ${temp.makale}
          </div>
        </div>
      </div>`;
          data.push(panel);
      }
      var dJoin=data.join();
      var accordion = `<div class="accordion" id="accordionContainer${accordionCurr}">${dJoin} </div>`;
      editor.insertContent(accordion);
     return veri;
    }
    var dataInsert=function(veri){
      var data=[];
      var accordionCurr=Date.now();
      for(i=0; i<veri.length; i++){
        var curId="afyAccordion"+accordionCurr;
        var temp=veri[i];
        var ifopen=(temp.aktif==true ? " show":"");
        var panel = ` <div class="card card-border">
      <div class="card-header" id="${curId}heading${i}">
        <h2 class="mb-0">
          <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" 
          data-target="#${curId}collapse${i}" aria-expanded="true" aria-controls="${curId}collapse${i}">
          ${temp.baslik} 
          </button>
        </h2>
      </div>
  
      <div id="${curId}collapse${i}" class="collapse${ifopen}" aria-labelledby="${curId}heading${i}" data-parent="#accordionContainer${accordionCurr}">
        <div class="card-body">
        ${temp.makale}
        </div>
      </div>
    </div `;
          data.push(panel);
      }
  
      var dJoin=data.join();
      var accordion = `<div class="accordion" id="accordionContainer${accordionCurr}">${dJoin} </div>`;
      editor.insertContent(accordion);
     return veri;
    }
    var createAccordion = function (id,veri) {
      return editor.windowManager.open({
        title: 'Akordiyon Menü İçeriği',
        body: {
          type: 'panel',
          items: [
            {
              type: 'input', name: 'acc_baslik', layout: 'flow',
              label: 'Başlık'
            },
            
            {
              type: 'textarea', name: 'acc_bilgi', layout: 'flow',
              label: 'Makale'
            },
            {
              type: 'checkbox', name: 'acc_ifopen', layout: 'flow',
              label: 'Bu menü açık olsun'
            }         
          ]
        },
        buttons: [
          {type: 'cancel',text: 'Close'},
          {type: 'submit',name:'save_brn',text: 'Save',primary: true}
        ],
        onSubmit: function onsubmit(e) {
          var gData=e.getData();
          var bilgi= gData.acc_bilgi;
          var baslik= gData.acc_baslik;
          var control= gData.acc_ifopen;
          if(typeof bilgi !=="string" || typeof baslik !=="string"){
            createalert({alert_level:'error',alert_icon:'warning',alert_text:"Veritipi hatası gelişti",timeout:3500});
            return createAccordion(id,veri);
        }
          else if(baslik.trim().length===0 || baslik.trim().length===0){
            createalert({alert_text:"Formda Boş yer bırakmayın",alert_icon:'warning',timeout:3500});
          return createAccordion(id,veri);
          }
          else {
            e.close();
            createalert({alert_title:'Başarılı',alert_text:"İşlem başarılı",alert_level:'success',timeout:3500});
            if(typeof id==="number"){
              if(id>0){
                  id=id-1;
                  veri.push({"makale":bilgi,"baslik":baslik,"aktif":control});
                  return createAccordion(id,veri);;
              }
              else{
                veri.push({"makale":bilgi,"baslik":baslik,"aktif":control});
                dataInsert(veri);
              }
            }
           return {};
          }
        }
      });
    };
    var timeoutClose= function(e,time=3000){
        setTimeout(() => {
          e.close();
        }, time);
    };
    var createalert=function(ayar){
      var ayarlar = $.extend({
        alert_title:"Hata",
        alert_level:'error',
        alert_text:'Bir uyarı tanımlayın',
        btn_text:'Kapat',
        alert_url:'',
        alert_icon:'question',
        timeout:3000}, ayar);
      var edit= editor.windowManager.open({
          title:ayarlar.alert_title,
          body:{
            type:'panel',
            items:[{
              type: 'alertbanner', // component type
              level:ayarlar.alert_level,
              text: ayarlar.alert_text,
              url:  ayarlar.alert_url,
              icon: ayarlar.alert_icon
            }] 
          },
        buttons: [
          {type: 'cancel',text: ayarlar.btn_text,primary:true}
        ]
      });
      timeoutClose(edit,ayarlar.timeout);
      return edit;
    }
    editor.ui.registry.addButton('accordion', {
      text: 'Akordiyon Menü',
      icon: 'border-width',
      onAction: function () {
        openDialog();
      }
    });
    editor.ui.registry.addMenuItem('accordion', {
      text: 'Example plugin',
      onAction: function() {
        // Open window
        openDialog();
      }
    });
  
    return {
      getMetadata: function () {
        return  {
          name: "accordion plugin",
          url: "http://exampleplugindocsurl.com"
        };
      }
    };
  });

bu resim adresini dinamik almak istiyorum sabit olmaması lazım

Hocam bu konuya bakabildiniz mi?

Maalesef, ben sorununuzu daha farklı anlamıştım. Hizmet verenlerden destek almanızı öneririm.

Bu sorun çözülmediyse ilgileneceğim?

Çözülmedi malesef

Şö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>

Merhaba hocam bahsi geçen konu hakkında deneme yaptım ama bişeyde takıldım
Sorun şu 50 adet resim var bu resimleri tek tek listeleyince alan yetmiyor bunun için onAction alanın open dialogla yapmanın bi yolu yokmu?