如何在ngx-editor 4.1.0版本中为<div>添加样式？

DevOps 小满

2026-8-26

在ngx-editor 4.1.0中为

添加样式的方案

针对你无法升级到ngx-editor 5+的情况，以下是适配4.1.0版本的几种可行方案：

方案1：全局样式穿透（最简单直接）

ngx-editor 4.x的编辑内容区域默认带有.ngx-editor-content类，你可以通过全局样式或组件内穿透样式来给其中的

设置样式：

方法A：组件内样式穿透

在使用编辑器的组件的styles中添加：

:host ::ng-deep .ngx-editor-content div {
  margin: 1rem 0;
  padding: 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  /* 其他你需要的样式 */
}

::ng-deep用于突破Angular的样式隔离，确保样式能作用到编辑器内部的DOM元素。

方法B：全局样式文件

在项目的styles.css（或styles.scss）中直接添加：

.ngx-editor-content div {
  /* 你的样式规则 */
}

这种方式不需要穿透，样式会全局生效到所有编辑器实例中的

。

方案2：自定义编辑器命令（允许手动给
加样式）

如果需要让用户手动给指定

应用样式，可以注册自定义命令并添加到工具栏：

注册自定义命令
在组件中注入EditorService并注册命令：

import { Component, OnInit } from '@angular/core';
import { EditorService, Command } from 'ngx-editor';

@Component({
  selector: 'app-your-editor-component',
  templateUrl: './your-editor-component.html',
  styleUrls: ['./your-editor-component.css']
})
export class YourEditorComponent implements OnInit {
  toolbar = [
    ['bold', 'italic'],
    ['customDivStyle'] // 将自定义命令加入工具栏
  ];

  constructor(private editorService: EditorService) {}

  ngOnInit(): void {
    const customDivCommand: Command = {
      name: 'customDivStyle',
      icon: '<span style="padding: 2px 4px; border:1px solid #3b82f6;">Div样式</span>', // 自定义工具栏图标
      execute: () => {
        const selection = window.getSelection();
        if (selection.rangeCount === 0) return;

        const range = selection.getRangeAt(0);
        const targetDiv = range.commonAncestorContainer.closest('div');
        if (targetDiv) {
          // 切换样式类
          targetDiv.classList.toggle('editor-custom-div');
        }
      },
      isActive: () => {
        const selection = window.getSelection();
        if (selection.rangeCount === 0) return false;

        const targetDiv = selection.getRangeAt(0).commonAncestorContainer.closest('div');
        return targetDiv?.classList.contains('editor-custom-div') ?? false;
      }
    };

    this.editorService.registerCommand(customDivCommand);
  }
}

定义样式类
在全局样式文件中添加：

.editor-custom-div {
  background-color: #f3f4f6;
  padding: 0.75rem;
  border-left: 4px solid #3b82f6;
}

模板中配置工具栏

<ngx-editor [toolbar]="toolbar" [(ngModel)]="editorContent"></ngx-editor>

方案3：预处理编辑器内容（渲染时自动添加样式）

如果是要在编辑器输出内容渲染时统一给

加样式，可以通过DomSanitizer处理内容：

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-content-renderer',
  template: `<div [innerHTML]="processedContent"></div>`
})
export class ContentRendererComponent {
  rawContent = 'Image material<div><img src="data:image/webp;base64,UklGRvbHBABXRUJQVlA4IOrHBACQnhKdASqABzgEPkkgjkSioiEqJxGrwUAJCWVtfsPeD5/GZ/V6EP8nDf5pwbP4vVF0PlVs/6uT1A5t7fli/awETFU4E/E13+teWhz3+2eC/7f/6P855G/Tg47CKAag1P1VUpxdES/CG7Wms2taPD7TbtfknPLWiCWa6YAAAAA==" style="letter-spacing: -0.1px;"><br></div>';
  processedContent: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    // 替换所有<div>标签为带样式类的标签
    const modifiedContent = this.rawContent.replace(/<div>/g, '<div class="rendered-custom-div">');
    this.processedContent = this.sanitizer.bypassSecurityTrustHtml(modifiedContent);
  }
}

然后在全局样式中定义：

.rendered-custom-div {
  /* 渲染时的样式规则 */
}

内容的提问来源于stack exchange，提问作者Aunik Islam

如何在ngx-editor 4.1.0版本中为<div>添加样式？

方案1：全局样式穿透（最简单直接） #

方法A：组件内样式穿透 #

方法B：全局样式文件 #

方案2：自定义编辑器命令（允许手动给加样式） #

方案3：预处理编辑器内容（渲染时自动添加样式） #

方案1：全局样式穿透（最简单直接）

方法A：组件内样式穿透

方法B：全局样式文件

方案2：自定义编辑器命令（允许手动给
加样式）

方案3：预处理编辑器内容（渲染时自动添加样式）