@bobbyquantum/ngx编辑器

Angular 21+ (无区域) 的丰富文本编辑器, 在ProseMirror上建

⚠️ 这是叉子 sibiraj-s/ngx编辑器

最初的项目似乎没有活动。 此叉已更新支持 角点 21 与 无区变化检测 和现代角图案。 它在一个范围为npm的软件包下发布,以独立发行.

有什么不同吗

• ✅ 角点 21 支助
• ✅ 无区变化检测 (单位:千美元)provideZonelessChangeDetection()(中文(简体) )
• ✅ 启动更改检测 所有组成部分
• ✅ 角信号 反应状态
• ✅ 现代控制流 (单位:千美元)@if, (中文(简体) ), @for 改为 *ngIf, (中文(简体) ), *ngFor(中文(简体) )
• ✅ inject() 模式 而不是构造器注入
• ✅ Ctrl/ Cmd+ 键 打开编辑器中的链接

开始

安装

npm install @bobbyquantum/ngx-editor

使用量

说明: 默认情况下,编辑器会带有最小的特性.

import {
  NgxEditorComponent,
  NgxEditorMenuComponent,
  Editor,
} from '@bobbyquantum/ngx-editor';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'editor-component',
  templateUrl: 'editor.component.html',
  styleUrls: ['editor.component.scss'],
  standalone: true,
  imports: [NgxEditorComponent, NgxEditorMenuComponent, FormsModule],
})
export class MyEditorComponent implements OnInit, OnDestroy {
  html = '';
  editor: Editor;

  ngOnInit(): void {
    this.editor = new Editor();
  }

  ngOnDestroy(): void {
    this.editor.destroy();
  }
}

然后在 HTML 中

<div class="NgxEditor__Wrapper">
  <ngx-editor-menu [editor]="editor"></ngx-editor-menu>
  <ngx-editor
    [editor]="editor"
    [ngModel]="html"
    [disabled]="false"
    [placeholder]="'Type here...'"
  ></ngx-editor>
</div>

无区设置

在您的应用程序配置中 :

import { provideZonelessChangeDetection } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [provideZonelessChangeDetection()],
};

浏览器兼容性

在所有常绿浏览器上工作:

• 谷歌颜色
• 微软边缘
• Mozilla Firefox 喷出火花
• 萨法里
• 歌剧

图标

图标来自 https://fonts.google.com/icons (中文(简体) )

原始项目

这是叉子 sibiraj-s/ngx编辑器. 全面表彰原作者优秀地基.

许可证

麻省理工学院-见 自由主义