Add documentation for using Milkdown with various frameworks
- 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.
This commit is contained in:
48
milkdown-docs/recipes/angular.md
Normal file
48
milkdown-docs/recipes/angular.md
Normal file
@@ -0,0 +1,48 @@
|
||||
# Angular
|
||||
|
||||
We don't provide Angular support out of box, but you can use the vanilla version with it easily.
|
||||
|
||||
## Install the Dependencies
|
||||
|
||||
```bash
|
||||
# install with npm
|
||||
npm install @milkdown/kit
|
||||
npm install @milkdown/theme-nord
|
||||
```
|
||||
|
||||
## Create a Component
|
||||
|
||||
Create a component is pretty easy.
|
||||
|
||||
```html
|
||||
<!-- editor.component.html -->
|
||||
<div #editorRef></div>
|
||||
```
|
||||
|
||||
```typescript
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user