Редактор Ace Editor

Авто высота редактора Ace Editor. Вариант 1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Editor</title>
</head>
<body>
	<pre id="editor" style="width:100%;height:400px;">function foo(items) {
    var i;
    for (i = 0; i &lt; items.length; i++) {
        alert("Ace Rocks " + items[i]);
    }
}</pre>
	<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
	<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
	<script>
		$(document).ready(function() {

			var editor = ace.edit("editor");

			editor.setTheme("ace/theme/twilight");

			editor.getSession().setMode("ace/mode/javascript");

			var heightUpdateFunction = function() {

				// http://stackoverflow.com/questions/11584061/
				var newHeight =
					editor.getSession().getScreenLength() * editor.renderer.lineHeight + editor.renderer.scrollBar.getWidth();

				$('#editor').height(newHeight.toString() + "px");
				$('#editor-section').height(newHeight.toString() + "px");

				// This call is required for the editor to fix all of
				// its inner structure for adapting to a change in size
				editor.resize();
			};

			// Set initial size to match initial content
			heightUpdateFunction();

			// Whenever a change happens inside the ACE editor, update
			// the size again
			editor.getSession().on('change', heightUpdateFunction);

		});
	</script>
</body>
</html>

Авто высота редактора Ace Editor. Вариант 2

Код

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.6/ace.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="editor1_wrapper" class="app_editor_wrapper">
  <div id="editor1" class="app_editor">echo "Hello";</div>
  <div id="editor1_dragbar" class="app_editor_dragbar"></div>
</div>
<br><br><br>
<div id="editor2_wrapper" class="app_editor_wrapper">
  <div id="editor2" class="app_editor">echo "Hello 2";</div>
  <div id="editor2_dragbar" class="app_editor_dragbar"></div>
</div>

body {
  margin: 40px;
}

.app_editor {
  height: 300px;
}

.app_editor_wrapper {
  background-color: #cccccc;
  border-bottom: 1px solid #222222;
}

.app_editor_dragbar {
  background-color: #222222;
  width: 100%;
  height: 2px;
  cursor: row-resize;
  opacity: 1;
}

var aceEditorInstance = ace.edit( "editor1" );
var aceEditorInstance2 = ace.edit( "editor2" );

aceEditorInstance.setTheme("ace/theme/monokai");
// inline must be true to syntax highlight PHP without opening <?php tag
aceEditorInstance.getSession().setMode( { path: "ace/mode/php", inline: true } );

aceEditorInstance2.setTheme("ace/theme/monokai");
// inline must be true to syntax highlight PHP without opening <?php tag
aceEditorInstance2.getSession().setMode( { path: "ace/mode/php", inline: true } );

/**
 * Global variable to store the ids of the status of the current dragged ace editor.
 */
window.draggingAceEditor = {};

function makeAceEditorResizable(editor){
    var id_editor = editor.container.id;
    var id_dragbar = '#' + id_editor + '_dragbar';
    var id_wrapper = '#' + id_editor + '_wrapper';
    var wpoffset = 0;
    window.draggingAceEditor[id_editor] = false;

    $(id_dragbar).mousedown(function(e) {
        e.preventDefault();

        window.draggingAceEditor[id_editor] = true;

        var _editor = $('#' + id_editor);
        var top_offset = _editor.offset().top - wpoffset;

        // Set editor opacity to 0 to make transparent so our wrapper div shows
        _editor.css('opacity', 0);

        // handle mouse movement
        $(document).mousemove(function(e){
            var actualY = e.pageY - wpoffset;
            // editor height
            var eheight = actualY - top_offset;

            // Set wrapper height
            $(id_wrapper).css('height', eheight);

            // Set dragbar opacity while dragging (set to 0 to not show)
            $(id_dragbar).css('opacity', 0.15);
        });
    });

    $(document).mouseup(function(e){
        if (window.draggingAceEditor[id_editor])
        {
            var ctx_editor = $('#' + id_editor);

            var actualY = e.pageY - wpoffset;
            var top_offset = ctx_editor.offset().top - wpoffset;
            var eheight = actualY - top_offset;

            $( document ).unbind('mousemove');

            // Set dragbar opacity back to 1
            $(id_dragbar).css('opacity', 1);

            // Set height on actual editor element, and opacity back to 1
            ctx_editor.css('height', eheight).css('opacity', 1);

            // Trigger ace editor resize()
            editor.resize();

            window.draggingAceEditor[id_editor] = false;
        }
    });
}


makeAceEditorResizable(aceEditorInstance);
makeAceEditorResizable(aceEditorInstance2);

Результат

Редакторы PHP