在 ACE 编辑器中更改行高？答案

【问题标题】：Changing line height in ACE editor?在 ACE 编辑器中更改行高？
【发布时间】：2016-06-22 16:54:25
【问题描述】：

ace 编辑器的行高如何改变？

是否有任何 API 可以做到这一点？增加行高也应该增加装订线高度和光标高度，但从他们的文档来看，它似乎丢失了。

虽然我写这篇文章没有运气，

editor.setOptions({
    lineHeight: "40px"
});

我做了一些 CSS hack，但它再次破坏了编辑器布局

div.ace_gutter-cell, div.ace_line {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 20px !important; 
    /* border: 1px solid #ccc; */
}

【问题讨论】：

标签： javascript ace-editor

【解决方案1】：

你可以使用

editor.container.style.lineHeight = 2
editor.renderer.updateFontSize()

类似于https://github.com/ajaxorg/ace/blob/v1.2.3/lib/ace/virtual_renderer.js#L1703-L1710的fontSize选项的作用

【讨论】：

【解决方案2】：

您可以简单地更改自动完成弹出容器的 css 中的 line-height 属性。

.ace_editor.ace_autocomplete {
    line-height: 36px;
}

以上代码将使下拉选项的高度为 36px。

【讨论】：

【解决方案3】：

改变字体大小会改变行高，包括光标和间距。

editor.setOptions({
        fontSize: "20px"    
    });

【讨论】：

不不，那是另一回事....我需要更改 top-line-height 和 bottom-line-height

【解决方案4】：

如果您想为应用中的每个ace-editor 实例全局设置fontSize，那么您可以使用

    ace.config.set('basePath', 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.9/');
    ace.config.set('fontSize', '25px');
    var htmlEditor = ace.edit("html-editor");

【讨论】：

所有解决方案的问题是令牌保持相同的大小