Geek Answers Handbook

Insert Ace editor inside jQuery UI mutable component

I am trying to change the ace editor by pasting it inside the resizable component. I am trying to use the jQuery UI Resizable component, but I cannot make the ace editor appear inside the resizable component.

the 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 resizing the container and resizing it so that it fills the entire space. Is this possible with jQuery UI? If not, how can I do this?

+4
jquery html jquery-ui ace-editor
source share
2 answers

Use CSS to determine how much space a resizable container can use.

Change the 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 style sheet:

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

This will allow the control to fill the entire container, but has a minimum width and height of 500 pixels.

Resize the following resize method to not specify min / max

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

If you need a responsive template, select Bootstrap

+1
source share

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 the size of the node container changes, let the editor know by calling editor.resize();

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

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

+6
source share

More articles:


All Articles