如何使ACE Editor实例由用户使用拖放条动态调整大小 _JavaScript开发

本文概述

A. jQuery版本
B.VanillaJS版本

一些开发人员在将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 heightvar 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 1ctx_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 showsdocument.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 heightvar eheight = actualY - top_offset; // Set wrapper heightdocument.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 1document.getElementById(id_dragbar).style.opacity = 1; // Set height on actual editor element, and opacity back to 1ctx_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>

makeAceEditorResizable(aceEditorInstance);

这样, 你的编辑器现在应该可以垂直调整大小了。
现场例子
以下代码笔向你展示了使用Vanilla JS使用2个可调整大小的Ace Editor实例进行播放的过程是多么容易。
请参阅CodePen上我们代码世界(@ourcodeworld)的Vanilla JS与Pen Resizable ACE Editor。
在某些使用情况下, 例如, 当整个窗口都可滚动时, JavaScript的getBoundingClientRect方法生成的偏移量可能会出现问题。
【如何使ACE Editor实例由用户使用拖放条动态调整大小】编码愉快！