3

我在使用 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 调用？

在文档中，他们使用 WindowManager 创建页面，但我找不到太多关于如何创建不同元素的信息。

提前致谢

4

1 回答 1

6

老问题，但仍然相关。

这就是我的做法。我正在使用tinymce v4。

我在 jQuery 中找到弹出窗口/iframe，但它可以很容易地在 vanilla JS 中完成。

我创建了我的 JS 插件，将它外部包含在我的 init 部分中

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
            }
         });
      }
   });
});
于 2014-10-09T16:01:07.210 回答