Angular14项目中PrimeNG p-editor工具栏添加创建表格功能方法咨询

PrimeNG的p-editor基于Quill实现，原生Quill无内置表格模块，第三方模块易出现兼容性问题，以下是无需依赖第三方模块的轻量实现方案：

1. 修改模板，添加表格按钮 #

在p-header工具栏末尾新增表格按钮区块：

<p-editor
  #editor
  id="campo_texto"
  name="texto"
  formControlName="texto"
>
  <p-header>
    <span class="ql-formats">
      <select class="ql-size">
        <option value="small">Small</option>
        <option selected></option>
        <option value="large">Large</option>
        <option value="huge">Huge</option>
      </select>
    </span>
    <span class="ql-formats">
      <button class="ql-bold" aria-label="Bold"></button>
      <button class="ql-italic" aria-label="Italic"></button>
      <button class="ql-underline" aria-label="Underline"></button>
      <button class="ql-strike" aria-label="Strike"></button>
    </span>
    <span class="ql-formats">
      <button class="ql-list" value="ordered"></button>
      <button class="ql-list" value="bullet"></button>
      <select title="Text Alignment" class="ql-align">
        <option selected>Left</option>
        <option value="center" label="Center"></option>
        <option value="right" label="Right"></option>
        <option value="justify" label="Justify"></option>
      </select>
    </span>
    <!-- 新增表格按钮 -->
    <span class="ql-formats">
      <button class="ql-table" (click)="insertTable()" aria-label="Insert Table"></button>
    </span>
  </p-header>
</p-editor>

2. 组件类实现表格插入逻辑 #

通过ViewChild获取编辑器实例，编写插入基础表格的方法：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { Editor } from 'primeng/editor';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  @ViewChild('editor') editor!: Editor;

  ngAfterViewInit(): void {
    // 确保编辑器实例初始化完成
    if (this.editor.quill) {
      this.editor.quill.root.setAttribute('contenteditable', 'true');
    }
  }

  insertTable(): void {
    const quill = this.editor.quill;
    const range = quill.getSelection();
    
    if (range) {
      // 插入2行2列的基础表格，可按需调整结构和样式
      const tableHTML = `
        <table style="border-collapse: collapse; width: 100%;">
          <thead>
            <tr style="border: 1px solid #ddd;">
              <th style="border: 1px solid #ddd; padding: 8px; background-color: #f5f5f5;">标题1</th>
              <th style="border: 1px solid #ddd; padding: 8px; background-color: #f5f5f5;">标题2</th>
            </tr>
          </thead>
          <tbody>
            <tr style="border: 1px solid #ddd;">
              <td style="border: 1px solid #ddd; padding: 8px;">单元格1</td>
              <td style="border: 1px solid #ddd; padding: 8px;">单元格2</td>
            </tr>
          </tbody>
        </table>
        <p><br></p>
      `;
      
      // 在光标位置插入表格HTML
      quill.insertEmbed(range.index, 'html', tableHTML);
      // 将光标移动到表格后方
      quill.setSelection(range.index + 1);
    }
  }
}

3. 给表格按钮添加样式（可选） #

在组件CSS中添加样式，让按钮更直观：

.ql-table::before {
  content: '⊞'; /* 用表格符号作为按钮标识 */
  font-size: 18px;
  line-height: 1;
}

.ql-table:hover {
  background-color: #f0f0f0;
}

此方案直接通过插入HTML实现基础表格，无需额外依赖，用户可直接在编辑器中编辑表格内容，完全满足简单表格需求。

内容的提问来源于stack exchange，提问作者Anderson Benício