在 jQuery UI 可调整大小的组件中嵌入 Ace 编辑器 [英] Embedding Ace Editor inside jQuery UI Resizable Component

查看：24 发布时间：2021/11/26 21:19:34 jquery html jquery-ui ace-editor

本文介绍了在 jQuery UI 可调整大小的组件中嵌入 Ace 编辑器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试通过将 ace 编辑器嵌入到可调整大小的组件中来使其可调整大小.我一直在尝试使用 jQuery UI Resizable 组件，但我无法让 ace 编辑器出现在可调整大小的组件内.

代码:

<html lang="zh-cn"><头><meta charset="utf-8"><title>Resizable Ace Editor 使用 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"><风格>#resizable { 宽度:500px;高度:500px；填充:5px；边框:3px 纯红色}#resizable h3 { 文本对齐:居中；边距:0；}</风格><脚本>$(document).ready(function() {editor = ace.edit('editor');editor.setTheme('ace/theme/monokai');editor.getSession().setMode('ace/mode/java');$( "#resizable" ).resizable({最大高度:600，最大宽度:500，最小高度:500，最小宽度:500});});<身体><div id="可调整大小"><h3 class="ui-widget-header">Ace 编辑器</h3><div id="编辑器"></div>

我还希望 ace 编辑器能够响应其容器大小的变化并调整自身大小以填充整个空间.这可以用 jQuery UI 实现吗?如果没有，我该如何实现?

解决方案

使用 CSS 来规定可调整大小的容器可以使用多少空间.

改变你的风格线:

#resizable { min-width: 500px;最小高度:500px；最大宽度:100%；最大高度:100%；填充:5px；边框:3px纯红色}

将此添加到您的内联样式表:

#editor { 位置:绝对；顶部:40px；填充:5px；左:0;底部:0;右:0；}

这将允许控件填充整个容器，但最小宽度和高度为 500 像素.

更改以下可调整大小的调用以不指定最小值/最大值

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

如果您需要响应式模板，请查看 Bootstrap

I'm trying to make an ace editor resizable by embedding it inside a resizable component. I've been trying to use the jQuery UI Resizable component, but I can't get the ace editor to appear inside the resizable component.

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 changes in its container's size and resize itself so that it fills the whole space. Is this possible with jQuery UI? If not, how can I accomplish this?

解决方案

Use CSS to dictate how much space the resizable container can use.

Change your 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 stylesheet:

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

This will allow the control to fill the whole container but have a minimum width and height of 500px.

Change the following resizable call to not specify the min/max

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

If you want a responsive template, check out Bootstrap

这篇关于在 jQuery UI 可调整大小的组件中嵌入 Ace 编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

在 jQuery UI 可调整大小的组件中嵌入 Ace 编辑器 [英] Embedding Ace Editor inside jQuery UI Resizable Component

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

在 jQuery UI 可调整大小的组件中嵌入 Ace 编辑器 [英] Embedding Ace Editor inside jQuery UI Resizable Component

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭