单行Ace编辑器

Question

我正在尝试设置只有一行文本的Ace编辑器.

这个想法是模仿一个<input type="text">盒子的行为,但是使用语法着色:

目前,如果用户Enter在编辑器中按下,则会创建一个新行:

所以我的问题是:

如何将Ace设置为仅允许一行,就像标准文本输入框一样？

以下是我到目前为止所尝试的内容,以及它没有成功的原因.

• 调用editor.undo()上change如果e.lines.length > 1

  问题是,在增量中应用实际更改之前change触发,因此在此处不起作用(或者它涉及先前的增量)undo()

• 取消keypressifEvent.which = 13

  它有点工作,但非常脏,它不处理粘贴多行文本的情况,所以我们也需要处理paste事件 - 这将使这个解决方案更加肮脏.我也非常有信心会考虑更多边缘情况.

• 试图"空" e在on("change", function(e) { ... })

  例如,e = {}在回调函数中说,只要它e只是对实际对象的引用.没有任何影响.

• 试图在Ace编辑器中找到一个内置参数来做到这一点

  找到这样的参数还没有成功......

Answer 1

您可以使用以下代码使编辑器的行为类似于input type ="text"(主要取自https://github.com/ajaxorg/ace/blob/v1.2.0/demo/kitchen-sink/layout.js# L103)

var el = document.getElementById("textbox")
var editor = ace.edit(el);
editor.setOptions({
    maxLines: 1, // make it 1 line
    autoScrollEditorIntoView: true,
    highlightActiveLine: false,
    printMargin: false,
    showGutter: false,
    mode: "ace/mode/javascript",
    theme: "ace/theme/tomorrow_night_eighties"
});
// remove newlines in pasted text
editor.on("paste", function(e) {
    e.text = e.text.replace(/[\r\n]+/g, " ");
});
// make mouse position clipping nicer
editor.renderer.screenToTextCoordinates = function(x, y) {
    var pos = this.pixelToScreenCoordinates(x, y);
    return this.session.screenToDocumentPosition(
        Math.min(this.session.getScreenLength() - 1, Math.max(pos.row, 0)),
        Math.max(pos.column, 0)
    );
};
// disable Enter Shift-Enter keys
editor.commands.bindKey("Enter|Shift-Enter", "null")

#textbox {
    font-size: 30px;
    border:solid 2px gray;
}
body{
   background: #161619;
   padding: 40px 20px
}

<script src="https://ajaxorg.github.io/ace-builds/src/ace.js"></script>


<div id=textbox>var a = 1</div>

Answer 2

出于某种原因,既不e.preventDefault也不e.stopPropagation作品在变化的事件处理程序.但你可以找到 - 替换.

请参阅小提琴:http://jsfiddle.net/vittore/3rLfdtxb/

 var editor = ace.edit("editor");
 editor.setTheme("ace/theme/monokai");
 editor.getSession().setMode("ace/mode/javascript");
 editor.setFontSize(30)
 editor.getSession().on('change', function(e) {
    console.log(e)
    if (e.data.text.charCodeAt(0) === 10 && e.data.action == "insertText") {
      console.log('cancel event')
      //e.preventDefault() // doesnt work
      //e.stopPropagation()  // doesnt work
      editor.find(String.fromCharCode(10))
      editor.replaceAll(''); // this work
    }
 })

您甚至可以if从处理程序中删除语句,并在任何更改时替换换行符,无论如何.

当你在变化中找到 - 替换时,你会从光标到所选行的末尾.为了在使用后取消选择它:

editor.selection.clearSelection()