srcmini本文概述
一些开发人员在将ACE Editor实施到他们的项目中时经常遇到的问题是, 该组件不允许通过用户的操作来动态地修改其大小。这很麻烦, 因为你需要自己实现此功能, 并注意调整窗口大小的事件, 拖放操作等。如果你开始实施该功能, 我们将与你分享一个非常基本的信息。使用jQuery实现ACE Editor的垂直可调整大小实例的实现。尽管还有其他实现, 但它们大多数仅支持ACE Editor的单个实例, 但是, 通过此代码段, 你将能够为ACE Editor的多个实例提供调整大小的支持。
在本文中, 我们将向你说明如何使用jQuery或Vanilla JavaScript在浏览器窗口中调整ACE Editor的单个或多个实例的大小。
A. jQuery版本
建议使用jQuery处理Ace Editor的大小调整功能, 因为在鼠标事件期间易于编写代码和动画(看上去比Vanilla JS版本更漂亮)。首先, 创建一个全局可访问对象, 该对象将存储要调整大小的ace编辑器实例的拖动状态。然后, 包括makeAceEditorResizable函数, 如下所示：
/**
* 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;
}
});
}然后, 使用此功能, 你可以将已经初始化的ace编辑器实例转换为可调整大小的实例, 其中包括以下标记：
<div id="editor_wrapper" class="app_editor_wrapper">
<div id="editor" class="app_editor">echo "Hello, this is some PHP code to edit";</div>
<div id="editor_dragbar" class="app_editor_dragbar"></div>
</div>请注意, 编辑器需要包装到div中, 该div具有与编辑器相同的ID, 后缀_wrapper相同。拖动栏div的编辑器ID和_dragbar的ID与后缀相同。获得标记后, 你可以轻松地初始化ace编辑器并将其转换为可调整大小的版本, 提供ace编辑器变量作为给定函数的参数：
makeAceEditorResizable(aceEditorInstance);这样, 你的编辑器现在应该可以垂直调整大小了。
现场例子
以下代码笔向你展示了使用2个可调整大小的Ace Editor实例进行游戏的难易程度。
请参阅CodePen上的Our Code World(@ourcodeworld)的Pen Resizable ACE Editor。
B.VanillaJS版本
与用jQuery编写的对应版本不同, vanillajs版本没有包含调整元素大小的不错的动画。你可以根据需要修改并添加它。该脚本的工作方式类似于jQuery脚本：
/**
* VanillaJS version to make ace editor vertically resizable.
*
* @param editor Ace Editor instance.
*/
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;
var action_mousedown = function(e) {
e.preventDefault();
window.draggingAceEditor[id_editor] = true;
// Set editor opacity to 0 to make transparent so our wrapper div shows
document.getElementById(id_editor).style.opacity = 0;
document.addEventListener("mousemove", action_document_mousemove);
};
var action_document_mousemove = function(e){
var _editor = document.getElementById(id_editor);
var rect = _editor.getBoundingClientRect();
var rsl = {
top: rect.top + document.body.scrollTop
};
var top_offset = rsl.top - wpoffset;
var actualY = e.pageY - wpoffset;
// editor height
var eheight = actualY - top_offset;
// Set wrapper height
document.getElementById(id_wrapper).style.height = eheight;
// Set dragbar opacity while dragging (set to 0 to not show)
document.getElementById(id_dragbar).style.opacity = 0.15;
};
document.getElementById(id_dragbar).addEventListener("mousedown", action_mousedown);
var action_mouseup = function(e){
if (window.draggingAceEditor[id_editor])
{
var ctx_editor = document.getElementById(id_editor);
var rect = ctx_editor.getBoundingClientRect();
var rsl = {
top: rect.top + document.body.scrollTop
};
var actualY = e.pageY - wpoffset;
var top_offset = rsl.top - wpoffset;
var eheight = actualY - top_offset;
document.removeEventListener("mousemove", action_document_mousemove);
// Set dragbar opacity back to 1
document.getElementById(id_dragbar).style.opacity = 1;
// Set height on actual editor element, and opacity back to 1
ctx_editor.style.height = eheight + "px";
ctx_editor.style.opacity = 1;
// Trigger ace editor resize()
editor.resize();
window.draggingAceEditor[id_editor] = false;
}
};
document.addEventListener("mouseup", action_mouseup);
}需要相同的标记样式：
<div id="editor_wrapper" class="app_editor_wrapper">
<div id="editor" class="app_editor">echo "Hello, this is some PHP code to edit";</div>
<div id="editor_dragbar" class="app_editor_dragbar"></div>
</div>请注意, 编辑器需要包装到div中, 该div具有与编辑器相同的ID, 后缀_wrapper相同。拖动栏div的编辑器ID和_dragbar的ID与后缀相同。获得标记后, 你可以轻松地初始化ace编辑器并将其转换为可调整大小的版本, 提供ace编辑器变量作为给定函数的参数：
makeAceEditorResizable(aceEditorInstance);这样, 你的编辑器现在应该可以垂直调整大小了。
现场例子
以下代码笔向你展示了使用Vanilla JS使用2个可调整大小的Ace Editor实例进行播放的过程是多么容易。
请参阅CodePen上我们代码世界(@ourcodeworld)的Vanilla JS与Pen Resizable ACE Editor。
在某些使用情况下, 例如, 当整个窗口都可滚动时, JavaScript的getBoundingClientRect方法生成的偏移量可能会出现问题。
编码愉快！
评论前必须登录！
注册