Question

我在Razor页面中有这段代码：

<td>
      <textarea class="MSSQL" id="MyId">
          My code
      </textarea>
</td>

我正在使用jquery构建ace编辑器：

$('textarea.MSSQL').each(function () {
            var textarea = $(this);
            console.log(this);
            var editDiv2 = $('<div>', {
                position: 'absolute',
                width: "100%",
                height: "200px",
                'class': textarea.attr('class'),
                'Id': textarea.attr('id')
            }).insertBefore(textarea);
            textarea.css('visibility', 'hidden');
            var editor1 = ace.edit(editDiv2[0]);
            editor1.getSession().setValue(textarea.val().trim());
            editor1.getSession().setMode("ace/mode/sql");
            editor1.setTheme("ace/theme/sqlserver");
            editor1.setReadOnly(true);
            editor1.getSession().setUseWrapMode(true);
        });

一切正常，除了编辑器的光标，他的位置在实际文本之上，我用Google搜索了问题，大多数情况是光标在右边或者在在实际文本的左侧，解决方案是将字体更改为monospace。但事实并非如此。有什么建议吗？！

块引用

Answer 1

我在主css文件中发现了问题，有一个代码更改了Line-height的{{1}}，并且因为ace编辑器设置了跨度中的每个单词，因此导致这个职位的问题。

Ace编辑器，光标位置高于实际文本

1 个答案: