【问题标题】:TinyMCE 4 can't type in provided plugin text fieldsTinyMCE 4 无法输入提供的插件文本字段
【发布时间】: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 现在有一个焦点陷阱。

【问题讨论】:

    标签: javascript jquery tinymce tinymce-4


    【解决方案1】:

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

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

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

    【讨论】:

    • 如果其他人有更好的答案,我很乐意重新分配答案批准。
    • This 似乎是一个更好的解决方案。
    • 试过你的小提琴并且它有效 - 有一个问题:你在第一个字段中键入的文本出现在第二个字段中。在 chrome 和 opera 中测试。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-03-14
    • 1970-01-01
    • 2011-04-11
    相关资源
    最近更新 更多