2013-09-23 60 views
3

我在TinyMCE插件开发文档上遇到问题。 我只是想显示一个弹出框来选择内部链接/外部链接,然后选择网站上的另一个页面或让用户插入一个外部链接。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调用?

在他们所使用的窗口管理器来创建页面,但我无法找到有关如何创建不同的元素多的信息的文档。

在此先感谢

+0

好问题。我试图找出相同的。 – TheTC

回答

5

老问题,但仍然相关。

下面是我做到的。我正在使用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 
      } 
     }); 
     } 
    }); 
});