Issue
I was following the https://lexical.dev/docs/getting-started/quick-start
It seem straightforward.
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');
}
}
And I'm getting nothing and no errors. What am I missing here?
Solution
After looking into it, Lexical is a complex beast of a WYSIWYG, that requires its own plugins to work.
Just to get basic text entry, you need to install a separate module:
import { registerPlainText } from '@lexical/plain-text';
and then alter your example code like so:
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
Side note, Lexical is maintained by Meta and meant to be used with react. Most of the examples in the docs are react, and it requires quite a lot of code just to get a basic setup running if you are not using react. I would suggest using a different WYSIWYG in angular like Quill.
Answered By - inorganik
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.