可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm trying to make an ace editor resizable by embedding it inside a resizable component. I've been trying to use the jQuery UI Resizable component, but I can't get the ace editor to appear inside the resizable component.

Code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
  <title>Resizable Ace Editor Using jQuery</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #resizable { width: 500px; height: 500px; padding: 5px; border: 3px solid red}
  #resizable h3 { text-align: center; margin: 0; }
  </style>
  <script>
  $(document).ready(function() {
    editor = ace.edit('editor');
    editor.setTheme('ace/theme/monokai');
    editor.getSession().setMode('ace/mode/java');

  $( "#resizable" ).resizable({
      maxHeight: 600,
      maxWidth: 500,
      minHeight: 500,
      minWidth: 500
    });
});
</script>
</head>
<body>

<div id="resizable">
  <h3 class="ui-widget-header">Ace Editor</h3>
  <div id="editor"></div>
</div>


</body>
</html>

I would also like the ace editor to be able to respond to changes in its container's size and resize itself so that it fills the whole space. Is this possible with jQuery UI? If not, how can I accomplish this?

回答1:

Use CSS to dictate how much space the resizable container can use.

Change your style line:

#resizable { min-width: 500px; min-height: 500px; max-width: 100%; max-height: 100%; padding: 5px; border: 3px solid red}

Add this to your inline stylesheet:

#editor { position: absolute; top: 40px; padding: 5px; left:0; bottom:0; right: 0; }

This will allow the control to fill the whole container but have a minimum width and height of 500px.

Change the following resizable call to not specify the min/max

$( "#resizable" ).resizable();

If you want a responsive template, check out Bootstrap

回答2:

you need to make #editor node the same size as #resizable node

  <style>
  #resizable{position: relative}
  #editor{position: absolute; top:0;left:0;right:0;bottom:0;}
  </style>

and when size of container node changes, notify editor about that by calling editor.resize();

    $( "#resizable" ).resizable({
      resize: function( event, ui ) {
        editor.resize();
      }
    });

see http://jsbin.com/ojijeb/645/edit

Embedding Ace Editor inside jQuery UI Resizable Co

问题:

回答1:

回答2:

收藏的人(0)

Embedding Ace Editor inside jQuery UI Resizable Co

问题:

回答1:

回答2:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮