ydy0615
d9ab341223
- Created a new document for using components in Milkdown. - Added a guide for using plugins in Milkdown, including toggling plugins programmatically and listing official plugins. - Introduced a recipe for integrating Milkdown with Angular, including installation steps and component creation. - Added a recipe for using Milkdown with Next.js, detailing installation and component setup. - Created a guide for integrating Milkdown with NuxtJS, including installation and component creation. - Added a comprehensive guide for using Milkdown with React, covering both Crepe and core Milkdown usage. - Introduced a recipe for SolidJS integration with Milkdown, including installation and component creation. - Added a guide for using Milkdown with Svelte, detailing installation and component setup. - Created a comprehensive guide for integrating Milkdown with Vue, covering both Crepe and core Milkdown usage. - Added a recipe for using Milkdown with Vue2, including installation and component creation.
1.0 KiB
1.0 KiB
Angular
We don't provide Angular support out of box, but you can use the vanilla version with it easily.
Install the Dependencies
# install with npm
npm install @milkdown/kit
npm install @milkdown/theme-nord
Create a Component
Create a component is pretty easy.
<!-- editor.component.html -->
<div #editorRef></div>
// editor.component.ts
import { Component, ElementRef, ViewChild } from "@angular/core";
import { defaultValueCtx, Editor, rootCtx } from "@milkdown/kit/core";
import { commonmark } from "@milkdown/kit/preset/commonmark";
import { nord } from "@milkdown/theme-nord";
@Component({
templateUrl: "./editor.component.html",
})
export class AppComponent {
@ViewChild("editorRef") editorRef: ElementRef;
defaultValue = "# Milkdown x Angular";
ngAfterViewInit() {
Editor.make()
.config((ctx) => {
ctx.set(rootCtx, this.editorRef.nativeElement);
ctx.set(defaultValueCtx, this.defaultValue);
})
.config(nord)
.use(commonmark)
.create();
}
}