如何在vue2-ace-editor中限制输入为单行?

使用vue2-ace-editor代码编辑器,要求不能换行,只能输入一行代码。

下面是我做的尝试中唯一一个接近真相的......
html:

<ace-editor
  ref="aceEditor"
  v-model="item.parameterValue"
  class="ace-editor"
  height="144"
  width="100%"
  lang="yaml"
  theme="monokai"
  :options="editorOptions"
  @init="editorInit"
/>

js

editorInit() {
  require('brace/theme/monokai');
  require('brace/theme/clouds');
  require('brace/ext/language_tools');
  require('brace/mode/java');
  require('brace/snippets/java');
  require('brace/theme/eclipse');
  require('brace/mode/yaml');
  require('brace/mode/properties');
  require('brace/snippets/json');
  this.$refs.aceEditor[0].editor.setShowFoldWidgets(true);
  this.$refs.aceEditor[0].editor.commands.addCommand({
  name: 'preventNewline',
  bindKey: { win: 'Enter', mac: 'Enter', linux: 'Enter' },
  exec: editor => {
    // 阻止 Enter 键的默认行为(即插入换行符)
    let value = editor.getValue();
    value = value.replace(/\r\n|\r|\n/g, '');
    editor.getSession().setValue(value);
    return false;
  },
  readOnly: true, // 这个命令在只读模式下也有效
  });
}

采用了addCommand的方法,但是发现赋值的时候会默认跳到第二行。
1710495959742.png

阅读 479
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题