TinyMCE：從彈出窗口檢索信息

Question

我在TinyMCE插件開發文檔上遇到問題。 我只是想顯示一個彈出框來選擇內部鏈接/外部鏈接，然後選擇網站上的另一個頁面或讓用戶插入一個外部鏈接。

要啓動的窗口，我用下面的代碼：

tinymce.PluginManager.add('insumolinks', function(editor, url) { 
    // Add a button that opens a window 
    editor.addButton('insumolinks', { 
     text: 'Link', 
     icon: false, 
     onclick: function() { 
      // Open window 
      editor.windowManager.open({ 
       title: 'Insert Link', 
       url: '/admin/pages/add_link', 
       onsubmit: function(e) { 
        // Insert content when the window form is submitted 
        // editor.insertContent('<a href="#">' + editor.selection.getContent() + '</a>'); 
        console.log(e.data);      
       } 
      }); 
     } 
    }); 
}); 

正在被加載的窗口中的頁面是：

<div> 
    <select name="link_type" class="link_type" style="margin-top: 20px;"> 
    <option value="none">No Link</option> 
    <option value="other-page">Other Page</option> 
    <option value="external-link">External Link</option> 
</select> 
</div> 

<div> 
    <select name="link" class="resource-link" style="display: none;"> 
    <?php foreach($pages as $page) : ?> 
     <option value="<?= $page->id ?>" data-url="<?= $page->url ?>"> 
     <?= $page->title ?> 
    </option> 
    <?php endforeach; ?> 
</select> 
</div> 

<div> 
    <input type="text" name="link" class="resource-link" value="http://" style="display: none;"> 
</div> 

<div> 
<button type="submit" class="btn btn-primary">Add Link</button> 
</div> 

我會得到什麼代碼運行發送鏈接值通過onsubmit調用？

在他們所使用的窗口管理器來創建頁面，但我無法找到有關如何創建不同的元素多的信息的文檔。

在此先感謝

Answer 1

老問題，但仍然相關。

下面是我做到的。我正在使用tinymce v4。

我發現jQuery的彈出/ iframe中，但它可以很容易地在香草JS來完成。

我創造了我的JS插件，在我的初始化部分包括其外部

tinymce.init({ 
    selector: "textarea.tinymce", 
    external_plugins: { 'myplugin': 'url-to-my-plugin' } 
}); 

插件：

tinymce.PluginManager.add('myplugin', function(editor, url) { 
    // Adds a menu item to the tools menu 
    editor.addMenuItem('myplugin', { 
     id: 'myPluginId', 
     text: 'My Plugin Menu Title', 
     context: 'insert', 
     onclick: function() { 
     editor.windowManager.open({ 
      title: 'Title Of My Plugin', 
      url: 'myplugin.html', 
      //we create the submit buttons here instead of in our HTML page 
      buttons: [{ 
        text: 'Submit', 
        onclick: 'submit' 
       }, { 
        text: 'Cancel', 
        onclick: 'close' 
       }], 
      width: 500, 
      height: 325, 
      onsubmit: function(e) { 
       //find the popup, get the iframe contents and find the HTML form in the iFrame 
       form = $('#myPluginId iframe').contents().find('form'); 

       //once you have the form, you can do whatever you like with the data from here 
      } 
     }); 
     } 
    }); 
});