Logo

菜单

发布于 2026-01-06 0 阅读
0

为 Angular 设置富文本编辑器

为 Angular 设置富文本编辑器

我们将使用ngx-editor来实现此目的。ngxEditor 是一个基于ProseMirror 的所见即所得编辑器。ProseMirror 是一个用于构建 Web 富文本编辑器的工具包。该编辑器扩展了 ProseMirror 的功能，默认提供大多数必需的功能，并公开了 API 以供扩展。

无需赘言，让我们整合编辑器吧。

安装

npm i ngx-editor
#or
yarn add ngx-editor
Enter fullscreen mode Exit fullscreen mode

源代码：https://github.com/sibiraj-s/ngx-editor

第一步：

将 NgxEditorModule 导入到您的应用程序中。

import { NgxEditorModule } from "ngx-editor";

@NgModule({
  imports: [NgxEditorModule],
})
export class AppModule {}
Enter fullscreen mode Exit fullscreen mode

第二步：

创建编辑器实例并在组件中使用它。

import { Editor } from "ngx-editor";

export class EditorComponent implements OnInit, OnDestroy {
  editor: Editor;
  html: "<p>Hello World!</p>";

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

  // make sure to destory the editor
  ngOnDestroy(): void {
    this.editor.destroy();
  }
}
Enter fullscreen mode Exit fullscreen mode

在 HTML 中

<div class="NgxEditor__Wrapper">
  <ngx-editor-menu [editor]="editor"> </ngx-editor-menu>
  <ngx-editor
    [editor]="editor"
    [ngModel]="html"
    [editable]="true"
    [placeholder]="Type here..."
  ></ngx-editor>
</div>
Enter fullscreen mode Exit fullscreen mode

NgxEditor_Wrapper 是模块公开的一个可选辅助 CSS 类，用于包装菜单栏和编辑器。

步骤 3：

就是这样，就这么简单。上面的代码会生成以下结果。

编辑预览

请参考 stackblitz 示例https://ngx-editor.stackblitz.io/获取运行示例。

命令

编辑器还公开了一些内部使用的实用命令，以便您可以通过编程方式更新内容或创建自定义菜单等。

this.editor.commands
  .textColor("red")
  .insertText("Hello world!")
  .focus()
  .scrollIntoView()
  .exec();
Enter fullscreen mode Exit fullscreen mode

这些命令可以链式执行。在命令末尾调用 exec 函数来执行这些命令。

自定义工具栏

工具栏默认启用所有可用选项。您可以通过向其中添加项目数组来对其进行自定义。此外，工具栏中的预设调色板也可以自定义。

export class AppComponent implements OnInit, OnDestroy {
  editor: Editor;
  toolbar: Toolbar = [
    // default value
    ["bold", "italic"],
    ["underline", "strike"],
    ["code", "blockquote"],
    ["ordered_list", "bullet_list"],
    [{ heading: ["h1", "h2", "h3", "h4", "h5", "h6"] }],
    ["link", "image"],
    ["text_color", "background_color"],
    ["align_left", "align_center", "align_right", "align_justify"],
  ];
  colorPresets = ["red", "#FF0000", "rgb(255, 0, 0)"];

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

  ngOnDestroy(): void {
    this.editor.destroy();
  }
}
Enter fullscreen mode Exit fullscreen mode

然后是HTML

<ngx-editor-menu
  [editor]="editor"
  [toolbar]="toolbar"
  [colorPresets]="colorPresets"
>
</ngx-editor-menu>
Enter fullscreen mode Exit fullscreen mode

向工具栏添加自定义项。

您可以向工具栏添加自定义组件，扩展其现有功能。您可以通过创建自定义模板并通过 input 属性将其引用到菜单中来实现customMenuRef。

<ngx-editor-menu
  [editor]="editor"
  [toolbar]="toolbar"
  [customMenuRef]="customMenu"
>
</ngx-editor-menu>

<!-- Create template reference -->
<ng-template #customMenu>
  <app-custom-menu [editor]="editor"></app-custom-menu>
</ng-template>
Enter fullscreen mode Exit fullscreen mode

您可以在自定义组件中使用编辑器提供的命令，也可以创建自定义命令。编辑器还提供视图功能。您可以点击此处了解更多信息：https://prosemirror.net/docs/ref/#view

new Editor().view;
Enter fullscreen mode Exit fullscreen mode

有了这些工具，你应该能够将功能齐全的富文本编辑器集成到你的 Angular 应用程序中。

您好👋

文章来源：https://dev.to/sibiraj/setting-up-a-rich-text-editor-for-angular-3phh
A Brief Summary o...
五大开源电子商务框架（2025 年...