更改 windowManager TinyMCE 上的按钮配置

Posted 2023-03-07

【中文标题】更改 windowManager TinyMCE 上的按钮配置

【英文标题】：Change configuration of button on windowManager TinyMCE

【发布时间】：2014-12-21 07:17:06

【问题描述】：

我已经为 tinyMCE 上的图像上传创建了一个文件管理器，并从另一个文件 (attachment_path) 获取表单上传和图像列表。首先，当我选择图像时，我已成功获取图像 url 并放入field_name。但是现在我想在选择图像时将禁用按钮（插入）更改为 false，并将图像的 url 放入按钮（使用自定义属性）。

index_path 上的脚本：

file_browser_callback: function(field_name, url, type, win) 
        tinymce.activeEditor.windowManager.open(
          title: 'My File Manager',
          file: "<%= attachments_path %>",
          width: 450,
          height: 305,
          resizable : "no",
          inline : "yes",
          close_previous : "no",
          buttons: [
              text: 'Insert',
              classes: 'widget btn primary first abs-layout-item',
              disabled: true,
              onclick: 'close',
              id: 'insertButton'
          , 
              text: 'Close',
              onclick: 'close',
              window : win,
              input : field_name
          ]
        , 
            oninsert: function(url) 
                win.document.getElementById(field_name).value = url; 
            ,
            onselect: function() 
                // 
            
        );

        return false;
    

这是选择图像时的脚本（在 attachment_path 上）：

$('a[data-rel="colorbox"]').on('click', function(e)
     e.preventDefault();
     var url = $(this).find('img:first').attr('src');
     // top.tinymce.activeEditor.windowManager.getParams().oninsert(url);
     top.tinymce.activeEditor.windowManager.getParams().onselect();
);

我能找到http://www.tinymce.com/wiki.php/api4:class.tinymce.WindowManager，但我找不到按钮的设置配置。

工作流程图片

当按钮设置为 disabled: true 时：

<div id="insertButton" class="mce-disabled mce-widget mce-btn mce-primary mce-first mce-abs-layout-item" tabindex="-1" aria-labelledby="insertButton" role="button" aria-disabled="true" style="left: 319px; top: 10px; width: 56px; height: 28px;">
   <button role="presentation" type="button" tabindex="-1" style="height: 100%; width: 100%;">Insert</button>
</div>

当按钮设置为 disabled: false 时：

<div id="insertButton" class="mce-widget mce-btn mce-primary mce-first mce-abs-layout-item" tabindex="-1" aria-labelledby="insertButton" role="button" aria-disabled="false" style="left: 319px; top: 10px; width: 56px; height: 28px;">
   <button role="presentation" type="button" tabindex="-1" style="height: 100%; width: 100%;">Insert</button>
</div>

所以，我尝试删除 onselect 函数上的类和更改属性，它可以单击插入按钮，但是当我单击该按钮时，模式不会关闭。

onselect: function() 
  var adiv = $('#insertButton').closest('div');
  adiv.removeClass('mce-disabled');
  adiv.attr('aria-disabled', 'false');

【参考方案1】：

为按钮提供某种唯一标识符，例如 Id，然后从回调中启用按钮。 例如，您可以这样做：

file_browser_callback: function(field_name, url, type, win) 
    tinymce.activeEditor.windowManager.open(
      title: 'My File Manager',
      file: "<%= attachments_path %>",
      width: 450,
      height: 305,
      resizable : "no",
      inline : "yes",
      close_previous : "no",
      buttons: [
          text: 'Insert',
          classes: 'widget btn primary first abs-layout-item',
          id: 'uniqueid',
          disabled: true,
          onclick: 'close'
      , 
          text: 'Close',
          onclick: 'close',
          window : win,
          input : field_name
      ]
    , 
        oninsert: function(url) 
            win.document.getElementById(field_name).value = url; 
        ,
        onselect: function() 
            // 
        
    );

    return false;

然后在回调中这样做：

$('a[data-rel="colorbox"]').on('click', function(e)
     e.preventDefault();
     $('#uniqueid').removeAttr('disabled');
     var url = $(this).find('img:first').attr('src');
     // top.tinymce.activeEditor.windowManager.getParams().oninsert(url);
     top.tinymce.activeEditor.windowManager.getParams().onselect();
);

【讨论】：

我在 tinyMCE 网站上找不到按钮配置。如果 id 不起作用，只需给按钮一个唯一的类名并使用它。

感谢您的回答，但实际上我在提出问题之前已经尝试过了，当我单击按钮（插入按钮）时模式没有关闭。

您能否在click 函数中启用插入按钮？

首先，当我为插入按钮设置disabled: true时，该按钮用于关闭模式，当我设置disabled: false并尝试使用onselect功能启用插入按钮时，插入按钮可以可以点击，但模式没有关闭。所以我想我应该将按钮 disabled: true 的配置更改为 disabled: false 但我找不到方法。

谢谢！在v4.8 中要注意，如果您为按钮分配了uniqueid 的ID，则按钮本身将具有uniqueid-button 的ID，而包装div 将具有uniqueid 的ID。按钮本身或包装 div 都没有 disabled 属性，但包装 div 有一个类 mce-disabled 使按钮变灰。删除它，按钮再次变为“活动”。然而;正如@itx 提到的，该按钮仍未真正启用，并且在该按钮上定义的任何 onclick 处理程序都不会触发。您必须通过侦听器手动关闭对话框。文档严重缺乏

【参考方案2】：

您可以使用win.statusbar 访问对话框底部的按钮。它有一个items() 方法，它返回一个tinymce.ui.Collection。

要启用和禁用第一个按钮（在您的情况下为“插入”），您可以使用

// Enable the button
win.statusbar.items().eq(0).disabled(false);
// Disable the button
win.statusbar.items().eq(0).disabled(true);

对于第二个按钮，将0 替换为1，依此类推。

据我所知，这是完全没有记录的。我必须阅读其中一个插件中的代码才能弄清楚如何实现它。

【参考方案3】：

好的，我有另一种方法，我不使用 TinyMCE 中的按钮（内容），而是在 attachment_path 中创建“插入按钮”并为所选图像制作一些 js，将 url 图像放入按钮，然后单击事件插入按钮。

场景：

选择了第一个图像，按钮上的属性禁用属性，并将 url 一个图像放到按钮 然后点击按钮，把属性data-url放到field_name，关闭windowManager

按钮：

<button class="btn btn-sm btn-primary no-radius" type="button" id="iButton" data-rel="tooltip" placeholder="You need to select an image" title="" data-placement="bottom" data-url="" disabled>
        <i class="ace-icon fa fa-plus-square-o"></i>
        Insert
</button>

javascript：

$('#iButton').on('click', function()
    if (($('#list-all-image li').hasClass('active')) && ($(this).attr('data-url') != ""))
        var url = $(this).attr('data-url');
        top.tinymce.activeEditor.windowManager.getParams().oninsert(url);
        top.tinymce.activeEditor.windowManager.close();
     else 
        alert('Please select an image first!');
    
);