解决ngx-editor表情自动换行问题，实现单行输入样式

我在ngx-editor-menu中新增了表情功能按钮，但添加表情时表情总是显示在新行，无法与现有文本同行。此外，我希望将编辑器外观改为单行输入框样式，禁止多行输入。尝试通过patchValue方法追加表情后仍出现换行问题，现寻求解决方案。

HTML代码 #

<form [formGroup]="form">
    <div class="editor">
      <ngx-editor [editor]="editor" formControlName="editorContent" name="myEditor" ngDefaultControl>
      </ngx-editor>
      <ngx-editor-menu
      [editor]="editor"
      [toolbar]="toolbar"
      [customMenuRef]="customMenu"
    >
    </ngx-editor-menu>
    </div>
  </form>

  <emoji-mart
    (emojiClick)="addEmoji($event)"
    *ngIf="showEmojiPicker"
    emoji="point_up"
  ></emoji-mart>

  <ng-template #customMenu>
    <button (click)="toggleEmojiPicker()">emoji dropdown1</button>
  </ng-template>

TS代码 #

editor: Editor;
  showEmojiPicker = false;
  toolbar: Toolbar = [
    ['bold', 'italic'],
    ['text_color', 'background_color'],
    ['align_left', 'align_center', 'align_right', 'align_justify'],
  ];
  emoji;
  addEmoji($event) {
    let data = this.emoji;
    console.log('editorContent', this.form);
    this.form.patchValue({editorContent: this.form.value.editorContent + $event.emoji.native});
  }

  toggleEmojiPicker() {
    this.showEmojiPicker = !this.showEmojiPicker;
  }

  form = new FormGroup({
    editorContent: new FormControl(
      { value: '', disabled: false },
      Validators.required()
    ),
  });

1. 修复表情换行问题 #

ngx-editor的内容基于HTML结构，直接用patchValue拼接文本会破坏原有格式，导致表情被追加到新行。正确做法是使用编辑器内置的insertText方法，在当前光标位置插入表情：

修改addEmoji方法：

addEmoji($event) {
  // 调用编辑器命令在光标位置插入表情
  this.editor.commands.insertText($event.emoji.native).exec();
}

该方法会将表情直接插入到用户当前输入的位置，避免换行问题。

2. 实现单行输入框样式并禁止多行输入 #

步骤1：初始化编辑器时配置单行限制 #

在组件的ngOnInit中初始化编辑器，添加键盘快捷键拦截和自定义类名：

import { Editor } from 'ngx-editor';

ngOnInit() {
  this.editor = new Editor({
    attributes: {
      class: 'single-line-editor'
    },
    keyboardShortcuts: {
      // 阻止回车键和Shift+Enter触发换行
      'Enter': () => false,
      'Shift+Enter': () => false
    }
  });
}

步骤2：添加CSS样式实现单行外观 #

在组件样式文件中添加以下样式：

.single-line-editor {
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 0.375rem 0.75rem;
  min-height: auto !important;
  height: calc(1.5em + 0.75rem + 2px);
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.single-line-editor p {
  margin: 0;
  display: inline;
}

• white-space: nowrap 强制文本不换行
• overflow-x: auto 内容过长时显示横向滚动条
• display: inline 消除编辑器默认p标签的块级换行行为

步骤3：额外限制（可选） #

如果仍存在换行情况，可以监听编辑器的keydown事件，进一步阻止换行操作：

// 在组件中添加监听
@ViewChild(EditorComponent) editorComponent: EditorComponent;

ngAfterViewInit() {
  this.editorComponent.editorView.dom.addEventListener('keydown', (e: KeyboardEvent) => {
    if (e.key === 'Enter') {
      e.preventDefault();
    }
  });
}

内容的提问来源于stack exchange，提问作者techguy