修改Ace编辑器间距div
Ace编辑器是一个基于Web的代码编辑器，具有丰富的功能和可扩展性。要修改Ace编辑器的间距，可以通过以下步骤进行操作：
- 首先，确保你已经将Ace编辑器集成到你的项目中，并且可以正常显示和使用。
- 打开你的HTML文件或者相关的CSS文件，找到Ace编辑器所在的div元素。
- 使用CSS样式来修改div元素的间距。你可以使用margin属性来设置div元素的外边距，或者使用padding属性来设置div元素的内边距。例如，如果你想增加div元素的上边距和下边距，可以使用以下样式：
div.ace-editor {
margin-top: 10px;
margin-bottom: 10px;
}这样就会在Ace编辑器的上方和下方增加10像素的间距。
- 如果你想要修改Ace编辑器内部的行间距或者字符间距，可以使用Ace编辑器提供的API进行设置。具体的API方法可以参考Ace编辑器的官方文档。
总结： Ace编辑器是一个基于Web的代码编辑器，可以通过修改div元素的外边距和内边距来调整编辑器的间距。此外，还可以使用Ace编辑器提供的API来修改行间距和字符间距。更多关于Ace编辑器的信息和使用方法，你可以参考腾讯云的产品介绍页面：Ace编辑器产品介绍。
相关·内容
2回答
我在我的单个页面上实现了两个ACE编辑器。第一个编辑器： $('#custom_css').val(custom_css_editor.getSession().getValue()); 返回我键入的所有代码，但不幸的是，另一个编辑器： $('#custom_script').val(custom_js_editor.getSession().getValue()); 仅返回一行。您认为这类故障的原因是什么？ 下面是我想要展示的： ? 以下是我拥有的代码： var custom_css_editor = ace.edit("custom_c
浏览 32提问于2019-05-26得票数 0
2回答
我正在处理需要多个ace编辑器实例运行的项目，所有这些都启用了自动完成功能
我想增加一个单独呈现的建议窗口的宽度。使用下面的类更改宽度是可行的，但它适用于所有的错误实例，这是我不需要的。
div.ace_editor.ace_autocomplete {
width: 40%
}
有没有一种方法可以让我只针对一个特定的ace编辑器实例？
浏览 0提问于2017-06-28得票数 0
有什么方法可以在使用ace编辑器时删除行号吗？
类似于移除打印页边距，如下所示？
editor.setShowPrintMargin(false);
浏览 0提问于2015-02-03得票数 19
回答已采纳
我试图用input type=range更改ace编辑器中某些元素中的文本，但当我再次编写时，编辑器返回到使用javascript修改之前的值。
var editordiv = document.getElementById("editor");
var editor = ace.edit("editor");
editor.getSession().setMode("ace/mode/javascript");
var elem;
editordiv.onmousedown=function(e){
if(e.target.clas
浏览 2提问于2016-07-16得票数 1
回答已采纳
我试图用selenium和python来自动填写AWS函数，但是，我无法将文本输入到ace编辑器中。
编辑器的html如下所示：
<div class="codeditorHolder ace_editor aceFocus ace-cloud9-day" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code
浏览 4提问于2018-01-05得票数 1
在我的应用程序中，所有的查询编辑器都是Ace编辑器，我需要使用WebDriver输入查询。我试过使用发送键，但似乎不起作用。有没有其他方法可以将我的输入发送到Ace编辑器，从而实现自动化？
下面是我的HTML代码
<div class="" ng-show="queryType=='Spark Query'">
<pre class=" ace_editor ace-xcode">
<textarea class="ace_text-input" wrap="o
浏览 2提问于2015-06-22得票数 5
1回答
我使用的是ace9编辑器，最初一切都很完美，但我刚刚注意到，从上个星期开始，该编辑器在google中没有正常工作，因为火狐或IE很好，但没有使用chrome，我正在阅读，而且似乎问题总是与单空间字体有关，但我试图在一个例子中将问题隔离开来，而且还无法修复它。
Ace9和我正在使用没有requireJS的src文件夹。
这是我的代码，如果有人能看到修复它的方法。
JS
<script type="text/javascript">
function initializeAceEditor(){
var editor = ace.edit(&#
浏览 2提问于2017-01-16得票数 0
回答已采纳
我正在交互式计算机编程教程(codeavengers.com)中使用ACE编辑器。
对于一些课程，我试图一次显示2个ACE编辑器。它在火狐和Chrome上运行良好，但不能在Safari5.1或IE9上运行(我不介意IE8和IE7)。
以下是我的测试页面的代码。
<!doctype html>
<html><head>
<script src="ace/src/ace.js" type="text/javascript" charset="utf-8"></script>
<sty
浏览 0提问于2012-04-16得票数 1
回答已采纳
5回答
我在另一个div中有一个ace div，我想让ace编辑器将它的宽度和高度调整为父div。我调用了editor.resize()，但是什么也没有发生。
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#editor {
top:
浏览 1提问于2015-03-01得票数 25
1回答
在下面的示例中，拆分按钮应该删除所有分号，并创建一个新的编辑器，其中包含以下文本，直到下一个分号。
然而，有一个奇怪的bug，除了第一个编辑器之外，所有编辑器的光标都在行尾闪烁，但只有最后一个字段实际获得了光标(例如，按下split后输入将把文本放在最后一个字段中)。我如何防止这种情况发生？
$(function() {
function aceinit() {
var e = ace.edit(this),
t = $(this);
e.setTheme("ace/theme/sqlserver");
e.setOptions({
浏览 13提问于2018-08-10得票数 0
所以..。这太奇怪了？！当我尝试在以下上下文中使用google chrome中的ACE编辑器时：
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
body {
background-color: rgb(0, 0, 0);
}
.preview {
posi
浏览 4提问于2016-03-20得票数 0
回答已采纳
问题：
当我在文本字符串中得到一个html字符串并插入/或设置ACE.js编辑器值，并使用美化来整理/缩进代码时，我想知道ACE.js提供的ext-beautify.js是否支持HTML、css、js美化？我在这里做错什么了？
var htmlString = "<div class="row"><div class="col-sm-12"><span>chrome</span></div></div>";
var editor = ace.edit("editor
浏览 1提问于2017-07-20得票数 3
我有一个div，它实例化了一个ace编辑器对象。
我正在尝试drag and drop一些来自HTML draggable的文本。
我已经创建了ui-ace div droppable，并希望从drop的事件目标中获取编辑器的当前实例。
我怎样才能做到这一点？？
<div id="id1" ui-ace droppable=true ondrop="handleDrop(event,this)"></div>
JS函数
function handleDrop(e,obj){
// need code to get current
浏览 0提问于2014-08-22得票数 9
我有以下代码，它基本上加载了三个JavaScript ace编辑器会话：
但问题是，对于每个会话，它都会为相同模式的创建新的网络请求。我应该在一个页面中设置10到30个JavaScript的编辑程序，以便在不同的地方用JavaScript编写不同的函数，因此这会消耗内存，并使我的Chrome浏览器崩溃，因为它每次都要求工作人员采用相同的模式。
下面是我的示例html文件：(带有角应用程序)
<!DOCTYPE <!DOCTYPE html>
<html ng-app="editorApp">
<head>
<title&g
浏览 3提问于2015-10-17得票数 0
回答已采纳
1回答
当我试图用一个不是' editor‘的id加载ace编辑器时，编辑器将不会出现。
<div style="position:relative;min-height:400px;">
<div id="editor-fr">
</div>
</div>
{{ HTML::script('js/ace-builds/src-noconflict/ace.js') }}
<script>
var editor = ace.edit("
浏览 1提问于2016-03-31得票数 9
2回答
我使用引导默认示例主题：
我想通过ace编辑器而不是中央块，但是ace编辑器不能工作(空空间)：
...
<div class="container-narrow">
<div class="masthead">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
</ul>
浏览 4提问于2014-09-13得票数 2
3回答
我之前已经成功地创建了一个Ace编辑器，但最近我正在制作一个名为CodeProjects的网站，我想放一个Ace编辑器进去。无论我何时尝试，它都只显示文本function foo(items) { var x = "All this is syntax highlighted"; return x; }。在页面上，它显示您只需要以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</titl
浏览 0提问于2013-07-29得票数 1
我已经成功地将ACE编辑器嵌入到我的站点中，但是它一直恢复为只读模式。当我第一次把光标放到编辑器中时，我可以输入文本，但是如果我移动鼠标并将光标放在另一个位置，我就不能再键入了。当我检查编辑器的属性时，read only似乎已设置为true。
更新
看起来它可能与只读无关(只是它表现出了相同的行为)。我注意到，当我将光标放在编辑器中时，它接受我输入的文本。当我将光标设置到另一个位置时，textarea位置将被更新，从那时起，我键入的任何文本都会产生"ding“的声音，就像您不能在这里键入声音一样。就像一个窗口警告信息。
无论如何，我将一个div容器设置为不同的显示或位置类型，然后它突然
浏览 1提问于2013-07-18得票数 0
回答已采纳
这是我的控制器代码
$scope.aceOptions = {
workerPath: 'http://localhost:50871/Scripts/app/vendor/',
useWrapMode: true,
showGutter: true,
theme: 'chrome',
firstLineNumber: 1,
onLoad: function (_editor) {
$scope.script = {};
$scope.s
浏览 2提问于2015-12-14得票数 5
我似乎不能添加多个编辑器div，所以有没有办法添加三个呢？然而，"ace.js“和"ace.c9.io”只允许一个div通过id成为编辑器div，那么有没有办法在一个页面中拥有多个编辑器div呢？
浏览 39提问于2021-06-08得票数 1
1回答
我正在构建一个带有Twitter引导的小型在线IDE，但由于Ace的高度问题，我未能实现正确的布局。
<body>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<
浏览 2提问于2013-08-25得票数 1
回答已采纳
我正在尝试创建一个ace编辑器，它在角材料中使用时会抛出一个错误
ace.edit找不到div #javascript编辑器
我这里有我的代码 (检查控制台中的错误)
app.component.html
<mat-tab-group>
<mat-tab label="Editor">
<h4>Custom Editor</h4>
<div id="javascript-editor" style="height: 300px;"></div>
浏览 0提问于2019-10-07得票数 3
回答已采纳
我正在使用的ui-ace库：
标记：
<div class="ace-directive"
ng-model="template.value"
style="width: 100%; font-size:15px;"
ui-ace="{
useWrapMode : true,
showGutter: true,
mode: ace.theme,
onLoad : ace.loaded,
onChange: ace.changed
浏览 3提问于2014-12-01得票数 0
1回答
我想做一个拖拉的编辑。但是，当我试图拖动光标时，编辑器会“粘住”光标。对于普通的div来说很好。
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'
浏览 1提问于2013-12-19得票数 1
回答已采纳
我尝试在一个文档重写引擎中使用Ace编辑器。ace编辑器如下所示：
在运行document.write重写页面后，我在javascript控制台上得到了以下内容，但没有错误：
我不能解释为什么我需要document.write，我只是想找到一种方法让它工作。看起来ace在页面重新加载后崩溃了。
下面是最小的重现示例：
<html>
<head>
<script>
function loadAceEditor() {
var aceeditor = ace.edit("aceeditor
浏览 10提问于2019-07-25得票数 0
2回答
我试图在单击按钮时将ace编辑器动态加载到我的angular2应用程序中，但看起来ace编辑器在控制台上产生了以下错误：
错误: ace.edit找不到div #编辑器
下面是一个示例代码：
main.ts
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
@Component({
selector: 'app',
template: `<div [innerHTML]="htm
浏览 8提问于2016-04-01得票数 4
回答已采纳
1回答
我建立了一个允许用户上传.txt文件的django网站，我想通过集成ACE (或任何其他编辑器建议？)来添加编辑功能。
我有一个我上传的文件列表，我想要一个编辑按钮，以重定向到编辑器页面与加载编辑页面中的文件内容。
我想知道如何将文件内容加载到ace编辑器中？
我发现了一些关于上传文件并在编辑器中直接显示的代码。()然而，我想要的是重定向到一个新的编辑器页面，通过点击‘编辑’按钮来加载已经上传的文件。
{% extends 'base.html' %}
{% block content %}
<h1>Mechanism {{ object.id }} detail
浏览 20提问于2019-07-07得票数 0
3回答
我有两个ace编辑器在同一个界面上。内容被动态加载到ace编辑器中- on click。
我想清空编辑器以便清除屏幕。但是，当我这样做时，后续内容将不会加载到ace编辑器中。
# code used to initiate the ace editor
function initAceEditor(){
var editor1 = ace.edit("editor1");
editor1.setTheme("ace/theme/dreamweaver");
document.getElementById('editor1').style.font
浏览 6提问于2017-10-05得票数 1
回答已采纳
我想使用ACE：和CSP (内容安全策略).目前，ACE编辑器正在工作，当我允许不安全的内联样式: style-src‘不安全-内联’时。
有没有一种不用内联样式就可以使用Ace编辑器的方法？(我从ace.js下载了文件)
我的守则：
<body>
<script src="{{url_for('static', filename='ace.js')}}" type="text/javascript" charset="utf-8"></script>
<h2>Co
浏览 1提问于2020-11-01得票数 0
回答已采纳
我有一个Vue/Vuefify项目，我使用vkbeutify库格式化XML，然后在Ace编辑器中显示它。编辑器在一个模式对话框(全屏模式)中打开，当XML数量较少时，所有编辑器都可以正常工作。
我必须解析它的2.5MB+ (当用Notepad++格式化时，大约有25万个字符)，然后Ace变得不可用(它最终会显示XML，但需要很长时间)。
我用文本区域和编辑器创建了一个简单的测试页面，格式和显示速度非常快。该页面所做的事情与以下内容完全相同： (这使用了Ace和vkbeautify来格式化xml)。
在将XML传递给子对话框之前，我试着在文本区域中预先格式化XML，然后尝试通过直接获取DOM内容
浏览 0提问于2021-04-29得票数 0
回答已采纳
1回答
我试着在一个随机的网站上获取和设置一个ace编辑器的值。但我不知道实例名。而且，在任何div上都没有ID。是否有一种方法可以找到一个或所有实例，以便我可以访问api，例如：
var editor = ace.edit("...");
谢谢你的建议:)
浏览 2提问于2015-09-14得票数 3
回答已采纳
我创建了一个，它与集成，并通过角指令嵌入。但是，尽管编辑器出现了，但它不接受输入。在Chrome/Chrome中，只有在打开或关闭开发工具之后，编辑器才会对输入做出响应(编辑器必须对浏览器状态AFAICT中的某些变化做出反应)。
基本上，我如何修复我的应用程序，使Ace组件工作并接受输入？我的应用程序的完整源代码可以在上找到。
代码
HTML
angular.html
<div class="content pure-g-r" data-ng-controller="MeteorCtrl">
<header>
&l
浏览 3提问于2013-09-03得票数 0
回答已采纳
1回答
我正在尝试将Ace编辑器集成到我的应用程序中，我希望有多个选项卡。然而，我让它工作的唯一方法是提前定义元素。举个例子：
HTML：
<div id='editors'>
<div id='editor1'></div>
<div id='editor2'></div>
</div>
然后是Javascript：
var editor1 = ace.edit('editor1');
var editor2 = ace.edit('editor2&
浏览 0提问于2015-04-07得票数 2
正如问题所述，我想提交编辑器的代码，但我不知道如何使用laravel形式。我发现我可以用editor.getValue() ，但是我不知道如何用它和laravel。我有以下代码
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 150px;
right: 150px;
bottom: 150px;
left: 150px;
}
.ace_editor
浏览 7提问于2020-05-29得票数 3
回答已采纳
4回答
我希望实现一个web应用程序，它的特点是“编码-竞争”的-styled接口与两个不同的代码编辑器在一个屏幕上。一个是只读的，另一个是活动的，允许用户编辑。
我目前使用的是Ace编辑器，我觉得它很棒，而且使用起来很简单。
然而，这是我的问题。--我试图在一个页面中实现两个不同的编辑器时出现了一个错误。
未指定的RangeError:超过最大调用堆栈大小
js脚本中的变量“编辑器”是一个限制词，还是与使用哪个变量名无关？
以下是我的JS文件中的代码：
var editorFirst = ace.edit("editorFirst");
var editorSecond= a
浏览 1提问于2013-03-27得票数 11
回答已采纳
请检查我的问题的图像或图像链接！ When I write my code in Ace Editor like this then Brython gives the correct result! When I extend my code or the div resizes and hides the code like in this case 'pri' of print is hidden because of extending code, it gives an error I have also tried wrapping the text but t
浏览 84提问于2021-09-17得票数 0
1回答
保存和显示HTML文本
、、、
下面是我的编辑器代码，当用户按下“显示编辑器文本”按钮时，div标记中的文本必须保存，相同的文本必须显示在同一个页面上。如何在HTML中实现这一点？
<!DOCTYPE html>
<html>
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0
浏览 3提问于2014-02-13得票数 0
回答已采纳
我正在使用Angular 12和ACE编辑器开发一个web组件。我一步一步地遵循了教程(下面的链接)，但最终得到了奇怪的结果。我最终将编辑器放在了一个灰色的细列中--而且它并没有连接到-in。(https://blog.shhdharmen.me/how-to-setup-ace-editor-in-angular) 你知道为什么会发生这种事吗？ seite.html <div class="app-ace-editor"
style="width: 500px;height: 250px;"
#editor></div&
浏览 103提问于2021-10-23得票数 1
回答已采纳
1回答
我是HTML中的一个傀儡。在我的项目中，我想使用ACE编辑器来允许用户编辑和保存文件。我成功地加载了文件，并用ACE编辑器打开它。问题是如何保存它。对于这部分，我需要你的帮助。
下面是我编写的使用ACE的代码。
<?php
if(isset($_POST["save_modification"])){
$file = "./".$_POST["file_name"];
$file_ptr=fopen($file,"w");
fwrite($file_ptr,$_POST["content"]);
fclose
浏览 26提问于2014-04-10得票数 6
我正在尝试运行一个自动化测试，测试用例的步骤之一是清除Ace Editor并在其中插入文本。
早些时候，我有常规的内容可编辑的DIV，我可以在其中插入文本，但切换到Ace Editor后就不能再插入文本了。
我所要做的就是在元素上调用"clear“方法，然后调用"sendText”。我试着在clear之前添加"click“方法，以确保Ace Editor确实具有焦点，并且它确实将焦点带到了Ace Editor，但它仍然抛出一个错误，即元素应该是用户可编辑的，以清除它。
我还试着在清除它之前设置5秒的睡眠，以防在Ace使div可编辑之前触发clearing。
准确地说，这
浏览 0提问于2017-12-20得票数 3
当我使用ng2-ace-editor时。有配置 <div ace-editor
[(text)]="text"
[mode]="'sql'"
[theme]="'eclipse'"
[options]="options"
[readOnly]="false"
[autoUpdateContent]="true"
[durationBeforeCallback]=
浏览 42提问于2019-04-17得票数 4
2回答
我一直试图创建一个代码片段网站，我所需要的只是一个漂亮的开源代码编辑器，并突出显示语法。我找到了，但当我通过编辑器脚本传递PHP时，它似乎不起作用；
运行在CodeEditor中的PHP代码：
<div id="editor"><?php echo 'test'; ?></div>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor
浏览 2提问于2014-09-05得票数 0
回答已采纳
这是Ace编辑器的GitHub回购：
我猜所需的文件是：
JS
主题
A模式
工人
执行情况如下：
<script src="/static/js/ace/ace.js"></script>
<div class="my_ace_editor">function foo(items) {
var x = "All this is syntax highlighted";
return x;
}
</div>
CSS
#my_ace_editor {
position: absolute
浏览 1提问于2014-01-01得票数 7
回答已采纳
1回答
因此，我试图构建一个代码编辑器，它在iframe中显示html的输出。但也有一些麻烦。我以前使用过codemirror，现在我正在使用ACE，但是这里出现了一些问题，因为它不断地显示"xxxxxx“和数字。使用它的正确方法是什么？
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script&
浏览 2提问于2018-01-15得票数 0
回答已采纳
我想添加一个带有ace代码编辑器的div容器。
为此我创造了这个
<div id="editor" class="codeeditor">
<div id="editor-nav" class="codeeditor-nav">HTML | Javascript | CSS | PHP </div>
<div id="editor-code" class="codeeditor-codearea"></div>
&l
浏览 0提问于2019-02-11得票数 0
4回答
如何更改ace编辑器的行高？ ? 有什么API可以做到这一点吗？另外，增加行高也应该增加间距高度和光标高度，但从他们的文档中似乎缺少这一点。 虽然我写这篇文章不走运， editor.setOptions({
lineHeight: "40px"
}); 我做了一些CSS攻击，但它再次破坏了编辑器布局 div.ace_gutter-cell, div.ace_line {
padding-top: 10px;
padding-bottom: 10px;
height: 20px !important;
/* border: 1p
浏览 278提问于2016-06-23得票数 2
回答已采纳
1回答
我想知道是否可以在Ace编辑器中隐藏行？
基本上，我想在编辑器中放置一个预代码，但我不希望用户看到它。
下面是我的代码，我想在编辑器中隐藏前5行：
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
浏览 1提问于2021-06-08得票数 0
1回答
我使用的是带有指令的角js Ace插件
<div ng-model="fileContent" ui-ace="aceOptions"></div>
我已经将文件内容设置为一个作用域上的fileContent变量。
我看到编辑带着数据出现了。但我无法在编辑器中获得修改过的文件内容。如何获得更改后的fileContent模型的内容。
我也得到了。当我将实际值设置为模型时。
Error: [$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.
浏览 6提问于2015-01-12得票数 0
1回答
我在我的角度应用程序中使用ace编辑器作为JSON编辑器，ace编辑器有一个功能来检测任何丢失的符号([]，{}，""，等等)。根据
我找到了一个帖子，它建议使用webpack，但我无法实现与屏幕截图显示的相同。添加了以下代码行
import "ace-builds/webpack-resolver";
ace.config.setModuleUrl('ace/mode/json_worker', require('file-loader!ace-builds/src-noconflict/worker-json'))
ace
浏览 4提问于2020-05-21得票数 0
2回答
当用户单击“查看代码”按钮时，我只是试图简单地将所有代码编辑器的代码显示到控制台。
尝试通过状态传递值，但没有运气。对如何做到这一点有什么想法吗？
到目前为止，我得到的代码如下：
import React from "react";
import ReactDOM from "react-dom";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-no
浏览 1提问于2019-11-13得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
