TinyMCE 4 无法输入提供的插件文本字段

Posted 2023-05-07

【中文标题】TinyMCE 4 无法输入提供的插件文本字段

【英文标题】：TinyMCE 4 can't type in provided plugin text fields

【发布时间】：2014-12-01 07:35:23

【问题描述】：

在 JS 下使用 TinyMCE 4.1.5（带有 JQuery 1.11.1 和几个 JQuery 插件，如 form 和 ui）。我使用的 TinyMCE 版本不是嵌入 JQuery 的版本。

编辑器运行良好，我可以直接输入它而不会出现问题。仅使用 tinymce 提供的插件，所有使用按钮或非文本字段控件的功能都可以正常工作。

但是，插件中的文本字段（例如链接或插入视频）不允许我在字段中输入或选择其他文本字段（因此这似乎是焦点问题）。

http://fiddle.tinymce.com/bzeaab/16 有一个小提琴，这是应用程序中更具体的初始化代码：

var _clear_css_cache;
_clear_css_cache = '/javascripts/canonical/tinymce/skins/lightgray/' +
                   'content.min.css?' +
                   new Date().getTime();

var _toolbar_1, _toolbar_2;
_toolbar_1 = 'formatselect, |, ' +
             'bold, italic, underline, strikethrough, ' +
                'subscript, superscript, |,' +
             'outdent, indent, blockquote, |,' +
             'alignleft, aligncenter, alignright, alignjustify';

_toolbar_2 = 'bullist, numlist, table, charmap, emoticons |,' +
             'link, unlink, |,' +
             'image, media, |,' +
             'code, preview |,' +
             'pasteword, print |,' +
             'undo, redo,';

var _contextmenu;
_contextmenu = 'link image inserttable | ' +
               'cell row column deletetable';

tinymce.init(
  selector: 'textarea.tinymce',
  toolbar: [_toolbar_1, _toolbar_2],
  plugins: [
    'advlist autolink autosave code charmap contextmenu emoticons image', 
    'lists link media paste preview print table'
  ],
  contextmenu: _contextmenu,
  theme: 'modern',
  content_css: _clear_css_cache,
  menubar: false,
  statusbar: false,
  convert_urls: false,
  relative_urls: false,
  invalid_elements: 'script'
);

为了插入目标​​ div（带有 'textarea.tinymce' 的子级），我使用了一个非常标准的调用：

function do_wysiwyg(_div) 
  tinymce.execCommand('mceAddEditor', true, $(_div).attr('id'));
);

我已经在本地和 BrowserStack 中尝试了几种浏览器，但没有一个插件文本字段可以在其中任何一个中使用，即使编辑器可以。

另见using tinymce with blockui。

想法？提前致谢。

更新（2014 年 10 月 7 日）：想知道 z-index 是否有干扰，但目前在实验过程中没有运气。这是对非常旧的 tinymce 安装的升级，插件在那里运行良好，因此预计除了 tinymce 代码/调用本身之外不会进行任何转换。

更新 2（2014 年 10 月 7 日）：现在有一个小提琴：http://fiddle.tinymce.com/bzeaab/16。似乎只在使用 BlockUI 时发生！我打赌 BlockUI 现在有一个焦点陷阱。

【参考方案1】：

一个似乎可行的解决方案是在 .blockUI 调用中传递 bindEvents = false 作为选项（以及 msg 等。请参阅 http://fiddle.tinymce.com/bzeaab/17 了解如何修改原始小提琴 (http://fiddle.tinymce.com/bzeaab/16) 以允许插上电源。

我担心的是这种方法会取消绑定 blockUI 覆盖中的所有内容，而不仅仅是 tinymce 插件，因此可能过于夸张。

如果您有比这更好的建议，请发表评论或发布不同的答案。在其他人有机会参与之前，我不会接受这个作为答案。谢谢！

【讨论】：

如果其他人有更好的答案，我很乐意重新分配答案批准。

This 似乎是一个更好的解决方案。

试过你的小提琴并且它有效 - 有一个问题：你在第一个字段中键入的文本出现在第二个字段中。在 chrome 和 opera 中测试。