如何在Angular 5中配置PrimeNG p-editor与Highlightjs？

我之前在Angular 5环境下搭配PrimeNG 5.x做过类似的SQL语法高亮配置，刚好能给你详细的步骤参考，完全适配你用的版本：

1. 安装兼容版本的依赖包 #

因为Angular 5对第三方库的版本兼容性要求比较严格，直接装最新版会报错，所以要指定适配的版本：

# 安装核心库
npm install highlight.js@9.18.1 quill@1.3.6 --save
# 安装TypeScript类型定义（开发依赖）
npm install @types/highlight.js@9.12.0 @types/quill@1.3.10 --save-dev

2. 引入样式文件到Angular配置 #

Angular 5用的是.angular-cli.json配置文件，找到styles数组，添加Quill和Highlight.js的样式：

"styles": [
  "../node_modules/quill/dist/quill.snow.css",
  "../node_modules/highlight.js/styles/atom-one-dark.css" // 可以换成你喜欢的高亮主题
]

3. 创建自定义Quill代码块模块 #

Quill的原生语法高亮需要自定义扩展，我们创建一个专门的模块来注册支持Highlight.js的代码块：
在src/app目录下新建quill-highlight.module.ts，内容如下：

import * as Quill from 'quill';
import hljs from 'highlight.js';

// 继承Quill的Block blot，自定义代码块
const BlockBlot = Quill.import('blots/block');
class CodeBlock extends BlockBlot {
  static blotName = 'code-block';
  static tagName = 'pre';
  static className = 'ql-syntax';

  static create(value: any) {
    const node = super.create(value);
    node.setAttribute('spellcheck', 'false');
    // 初始化时高亮代码
    if (value) {
      hljs.highlightBlock(node);
    }
    return node;
  }
}

// 注册自定义代码块到Quill
Quill.register(CodeBlock, true);

export class QuillHighlightModule {}

4. 配置组件中的p-editor #

在你使用p-editor的组件模块中，先导入我们刚才创建的自定义模块，然后在组件里配置Quill的参数：

import { Component, OnInit } from '@angular/core';
import { QuillHighlightModule } from './quill-highlight.module';

@Component({
  selector: 'app-sql-editor',
  templateUrl: './sql-editor.component.html'
})
export class SqlEditorComponent implements OnInit {
  sqlScript: string = ''; // 绑定SQL脚本的变量
  editorConfig: any;

  ngOnInit() {
    this.editorConfig = {
      modules: {
        syntax: false, // 关闭Quill原生语法高亮，用我们自定义的
        toolbar: [
          ['code-block'] // 工具栏只保留代码块按钮，可根据需求添加其他按钮
        ]
      },
      theme: 'snow'
    };
  }
}

5. 在模板中使用p-editor #

组件的HTML模板里这样写，绑定变量和配置：

<p-editor 
  [(ngModel)]="sqlScript" 
  [style]="{'height':'350px'}" 
  [modules]="editorConfig"
></p-editor>

6. 处理内容更新时的高亮 #

如果需要在用户修改SQL脚本后自动重新高亮，可以监听ngModelChange事件：
先在组件里添加ViewChild和处理方法：

import { ViewChild, ElementRef } from '@angular/core';
import hljs from 'highlight.js';

// 组件内添加
@ViewChild('editor') editorRef: ElementRef;

onSqlScriptChange() {
  // 找到所有代码块元素，重新高亮
  const codeBlocks = this.editorRef.nativeElement.querySelectorAll('pre.ql-syntax');
  codeBlocks.forEach((block: HTMLElement) => {
    hljs.highlightBlock(block);
  });
}

然后更新模板：

<p-editor 
  #editor
  [(ngModel)]="sqlScript" 
  (ngModelChange)="onSqlScriptChange()"
  [style]="{'height':'350px'}" 
  [modules]="editorConfig"
></p-editor>

这样配置完成后，你在p-editor中点击代码块按钮，输入的SQL脚本就会自动被Highlight.js高亮显示了。

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