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调用？

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

提前致谢

Answer 1

老问题，但仍然相关。

这是我的表现方式。我使用tinymce v4。

我在jQuery中找到了popup / 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
            }
         });
      }
   });
});

TinyMCE：从弹出窗口中检索信息

1 个答案: