Javascript 为什么这个最小Angular 的Licial.dev设置不起作用

发布于01月19日

我是在追随https://lexical.dev/docs/getting-started/quick-start

这似乎很直截了当.

import { createEditor } from 'lexical';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div contenteditable="true" #editable></div>
  `,
})
export class App implements AfterViewInit {
  private editor = createEditor();

  @ViewChild('editable') editable?: ElementRef<HTMLDivElement>;

  ngAfterViewInit() {
    const el = this.editable?.nativeElement;
    if (el) {
      this.editor.setRootElement(el);
      console.log('set');
    } else console.log('nop');
  }
}

Stackblitz个

我什么也得不到，也没有出错.我错过了什么吗？

推荐答案

仔细研究后，Lexical是一个所见即所得的复杂野兽，它需要自己的插件才能工作.

为了获得基本的文本输入，您需要安装一个单独的模块:

import { registerPlainText } from '@lexical/plain-text';

然后修改您的示例代码，如下所示:

export class App implements AfterViewInit {
  editor: LexicalEditor = createEditor();

  @ViewChild('editable') editable?: ElementRef<HTMLDivElement>;

  ngAfterViewInit() {
    if (this.editable) {
      this.editor.setRootElement(this.editable.nativeElement);
      registerPlainText(this.editor);
    }
  }
}

https://stackblitz.com/edit/stackblitz-starters-z7qv1j?file=src%2Fmain.ts个

附注，Lexical是由Meta维护的，旨在与Reaction一起使用.文档中的大多数示例都是REACTIVE，如果您没有使用REACTIVE，仅运行基本设置就需要相当多的代码.我建议使用不同的所见即所得，Angular 类似于Quill.