- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用jquery-ace里面twitter-bootstrap模态。
有没有一种方法可以让用户在不使用 jquery-ui 的情况下调整 ace 编辑器的大小。
或者如果不可能,我想设置最小-最大行出现,我发现了这个 demo ,但似乎 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()
最佳答案
花了很多时间试图找出一种方法来调整 Ace 编辑器窗口的大小而不抖动,使用 jQuery UI 或任何其他附加库(因为这只是额外的膨胀),所以我最终想出了自己的方法为其定制解决方案。
拖动是由一个 2px 高的 div 处理的,当鼠标按下时,它会将编辑器上的 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>
关于jquery - 如何让 ACE Editor 手动调整大小,就像 html 的文本区域一样,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27914804/
我最近在浏览 https://github.com/ory/editor/blob/master/packages/ui/src/Trash/index.js#L89 发现了一种我不明白的论点。完整代
我已经在 D 中编程了一段时间 (http://www.digitalmars.com/d/)现在。比起 Java,我更喜欢它,因为它更快。但是,我还没有找到支持代码完成和调试(Step-Over、S
如何使用 Ace 编辑器执行以下操作。 用户输入“@”字符 弹出自动完成 用户从下拉列表中进行选择 既然已经做出选择,“@”就会被删除 我基本上希望 @ 作为自动完成的触发器,但我不希望它在之后徘徊。
您可以使用 monaco.languages.typescript.typescriptDefaults.addExtraLib 添加您在 TypeScript 解析期间可能需要的任何 *.d.ts
我们公司正在使用 swagger 来记录他们的 API,目前有几个开发人员正在他们的 PC 上使用在线 swagger 编辑器。 我想将这部分设计过程移到我们的标准开发环境中,该环境位于没有互联网访问
我正在 monaco-editor 中定义新语言.我希望它会自动突出显示匹配的括号和圆括号,因为默认情况下 matchBrackets选项是真的。 我还需要做些什么吗? 示例代码: 看 this pa
我正在尝试在我目前正在开发的项目中使用 Microsoft 的 Monaco Editor。我查看了文档,发现您可以使用自定义代码完成和语法突出显示来设置自定义语言,但我找不到任何关于如何向自定义语言
我非常喜欢 Notepad++ 中的一个功能,按 Alt并用鼠标选择启用矩形选择,就像桌面上的选择...想不出一个合适的术语,也许rectangular selection或 vertical sel
有没有办法将插入符号位置作为源代码字符串中的索引? 我知道我可以获得位置,它会给我一个包含行和列的对象,但是有没有办法获取或将行 + 列转换为字符串字符索引? 例如,如果我有: using Syste
我一直在用 Balsamiq创建模型。我使用的是试用版,所以我将所有屏幕都放在一个模型中,而不是多个文件中。我想将这些模型的导出发送给我的团队,以便他们可以对其进行评论。他们需要能够轻松地添加箭头、标
默认为 CRLF。我想在处理 BASH 脚本时将其更改为 LF。请帮忙。 我已经浏览了文档,但找不到任何解决方案或示例。 最佳答案 //https://github.com/Microsoft/vsc
将任何回调附加到 editor.onDidChangeModelContent(event) 到 Monaco 实例后,如何删除(或取消绑定(bind))此函数? 例如,ACE 编辑器提供了 func
我已经将编辑器设置为只读,它是只读的,但它显示了一个光标。我想以编程方式隐藏光标(除非以编程方式,否则不通过样式)。 最佳答案 以下是建议答案的作用,用于视觉比较: 这是以前的样子: 添加: edit
我有一个用例,用户单击按钮在当前光标位置插入文本。 但是在使用 session.insert(cursorPosition, textToAdd) 插入文本之后, 光标位置移动到第一个字符。 我尝试使
我正在使用 monaco-editor 库为自定义编程语言实现网络编辑器。 我已经实现了一个 CompletionItemProvider 来提供自定义完成建议。 总的来说效果很好。但是,在执行片段时
我正在使用 monaco-editor,我想包含来自多个文件的建议。我不确定最好的方法是什么,但基本上,我希望当我在 file2.js 中导出一些函数时,能够从建议中的另一个 file1.js 访问它
我正在为我的应用程序添加 TypeScript 支持 Data-Forge Notebook . 它是一个笔记本风格的 JavaScript 应用程序。当我在代码单元格中使用“等待”关键字时,摩纳哥将
Monaco Editor 中是否有用于文本选择的事件? 我需要响应用户在编辑器中选择部分代码? 有没有更好的解决方案来使用计时器来获取选择范围? 文件似乎没有提到它。 最佳答案 您可以使用 onDi
我正在使用 monaco-editor 来显示本地代码文件的内容,这些文件可能是用各种语言编写的,所以我想知道如何根据文件的扩展名或文件的第一行动态设置/更改 monaco 编辑器的语言没有扩展名(如
在 Monaco Editor 中,使用标准初始化,例如: monaco.editor.create(document.getElementById("container"), { value
我是一名优秀的程序员,十分优秀!