javascript - Ace 编辑器 + jQueryUI 选项卡杀死了我的浏览器

标签 javascript jquery-ui-tabs ace-editor

我有以下问题:更改选项卡后我的浏览器 (Chrome) 没有响应。参见 fiddle here .我没有用其他浏览器进行测试,也没有必要这样做,因为 Chrome 是我的目标,让它工作。

我的目标是将编辑器放在第二个选项卡中,而不是第一个选项卡中。这是我使用的代码:

HTML:

<div id="tabs">
  <ul>
    <li><a href="#tab1">Tab without</a></li>
    <li><a href="#tab2">Tab with</a></li>
  </ul>
  <div id="tab1">

  </div>
  <div id="tab2">
    <textarea id="ta"></textarea>
  </div>
<div>

JavaScript:

$(function(){
  $("#tabs").tabs({
    activate: function(event,ui){
      if (ui.newPanel.attr("id") == "tab2") {
        setTimeout(function(){
          var editor = ace.edit("ta");
          editor.setTheme("ace/theme/twilight");
          editor.session.setMode("ace/mode/xml");
        },10);
      }
    }
  });
});

此行失败:var editor = ace.edit("ta");

在我将选项卡切换到第二个选项卡后,浏览器“卡住”并且在一分钟内将 RAM 填充到大约 2.5 GB 左右并且没有任何渲染。然后即使操作系统也非常慢,直到我中断进程。

在我的实现中,我只在第一次运行时执行此激活;在这里我排除了这一点以简化代码。

感谢您提供的任何帮助。

最佳答案

尝试使用div而不是textarea,ace网站上的事件你可以看到他们使用div

关于javascript - Ace 编辑器 + jQueryUI 选项卡杀死了我的浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22346190/

相关文章:

JavaScript 函数默认参数值

asp.net - 使用带有选项卡的 jQuery 验证引擎?

css - jquery 选项卡 css 流体布局

requirejs - 在没有 requireJS 的情况下创建 ace-editor 的自定义模式

javascript - 王牌编辑器着色词

javascript - 智能手机浏览器中的 ACE 编辑器

javascript - resolve(thenable) 和 resolve ('non-thenable-object' ) 之间有什么区别?

javascript - React reducer(将对象键添加到对象)

javascript - 自动添加然后POST的HTML表单

javascript - jQuery 的 UI 选项卡的事件监听器?