@kolkov/angular-editor v1.2.0在Angular11下项目符号与编号功能失效

开发者阿泽

2026-10-9

问题修复方案

方案1：修正编辑器配置项
你当前配置中defaultParagraphSeparator为空值，该参数是@kolkov/angular-editor列表功能正常运行的必要依赖，空值会导致插入列表时无法正确识别内容区块，修改配置如下：

export const editorConfig: AngularEditorConfig = {
  // 其余原有配置保持不变
  defaultParagraphSeparator: 'p', // 将原来的空字符串改为p或者div均可
}

方案2：验证依赖模块导入完整性
确认业务模块中已经完整导入FormsModule、ReactiveFormsModule和AngularEditorModule，双向绑定逻辑异常会导致工具栏按钮的交互指令无法正常触发，模块导入示例：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AngularEditorModule } from '@kolkov/angular-editor';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, AngularEditorModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

方案3：调整显隐控制逻辑
你当前用*ngIf控制编辑器显隐，组件频繁销毁重建可能导致内部状态绑定丢失，建议替换为[hidden]属性控制，避免组件重复初始化：

<div class="pr-2">
  <angular-editor
    [hidden]="!isDisplay"
    [(ngModel)]="content"
    [config]="editorConfig"
  ></angular-editor>
</div>
<div class="content-container" [hidden]="isDisplay">
  <div
    class="content-wrapper"
    [innerHTML]="content ? content : 'Enter description here'"
    (click)="onStartEdit()"
  ></div>
</div>