Arhn - архитектура программирования

Как изменить размер редактора ACE вручную, как текстовое поле html

Я использую jquery-ace внутри twitter-bootstrap модальный.

Есть ли способ изменить размер редактора ace пользователем без использования jquery-ui.

Или, если это невозможно, я хочу, чтобы отображались минимальные и максимальные строки, я нашел эту демонстрацию, но кажется, что jquery-ace неправильно задокументирован, так как я не мог получить доступ к объекту ace для вызова setOption

var decorator = $('.my-code-area').data('ace');
var aceInstance = decorator.ace; // this is wrong
// decorator.editor.ace --> this is more correct but it doesn't have setOption()
jquery twitter-bootstrap ace-editor
13.01.2015

Ответы:


1

Потратил кучу времени, пытаясь найти способ изменить размер окна редактора Ace без дрожания, используя jQuery UI или любые другие дополнительные библиотеки (поскольку это просто дополнительное раздувание), поэтому в итоге я придумал свое собственное решение для Это.

Перетаскивание обрабатывается элементом div высотой 2 пикселя, который при наведении мыши устанавливает opacity в 0 в редакторе, а затем обратно в 1 при наведении мыши.

По сути, это приводит к тому, что div-оболочка отображается во время перетаскивания, а затем скрывается. Выгода!

var editor = ace.edit( "smyles_editor" );
var dragging = false;
var wpoffset = 0;

// If using WordPress uncomment line below as we have to
// 32px for admin bar, minus 1px to center in 2px slider bar
// wpoffset = 31;

editor.setTheme("ace/theme/monokai");
// inline must be true to syntax highlight PHP without opening <?php tag
editor.getSession().setMode( { path: "ace/mode/php", inline: true } );
                  
$( '#smyles_dragbar' ).mousedown( function ( e ) {
	e.preventDefault();
	window.dragging = true;

	var smyles_editor = $( '#smyles_editor' );
	var top_offset = smyles_editor.offset().top - wpoffset;

	// Set editor opacity to 0 to make transparent so our wrapper div shows
	smyles_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
		$( '#smyles_editor_wrap' ).css( 'height', eheight);
		
		// Set dragbar opacity while dragging (set to 0 to not show)
		$( '#smyles_dragbar' ).css( 'opacity', 0.15 );
		
	} );

} );

$( document ).mouseup( function ( e ) {

	if ( window.dragging )
	{
		var smyles_editor = $( '#smyles_editor' );

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

		$( document ).unbind( 'mousemove' );
		
		// Set dragbar opacity back to 1
		$( '#smyles_dragbar' ).css( 'opacity', 1 );
		
		// Set height on actual editor element, and opacity back to 1
		smyles_editor.css( 'height', eheight ).css( 'opacity', 1 );
		
		// Trigger ace editor resize()
		editor.resize();
		window.dragging = false;
	}
	
} );
body {
  margin: 40px;
}

#smyles_editor {
  height: 300px;
}

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

#smyles_dragbar {
	background-color: #222222;
	width: 100%;
	height: 2px;
	cursor: row-resize;
	opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>
  Vertically Resizable Ace Editor
</h2>
<br/>
<div id="smyles_editor_wrap">
	<div id="smyles_editor">function foo($awesome) {

	$x = 'Smyles make resizable window for youuuuu!';

	if( $awesome === TRUE ){
		$x = 'Enjoy!';
	}

	return x;
}</div>
	<div id="smyles_dragbar"></div>
</div>

http://jsfiddle.net/tripflex/knnv5e7s/

29.03.2017

2

Обновление встроенного ace из последней сборки устраняет проблему.

Вот рабочий пример автоматического изменения размера, когда коды длинные

var aces = el.find('textarea.code.json:enabled')
aces.ace({ theme: 'eclipse', lang: 'json' }).each(function(idx,editor){
    var ace = $(editor).data('ace').editor.ace;
    ace.setOption("maxLines", 10);
    ace.setOption("minLines", 2);
});
13.01.2015
Новые материалы
Коллекции публикаций по глубокому обучению
Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
Представляем: Pepita
Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
Советы по коду Laravel #2
1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
3 способа решить квадратное уравнение (3-й мой любимый) -
1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
Создание VR-миров с A-Frame
Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
Демистификация рекурсии
КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..