pluton-html-angular-6-8

Editor HTML híbrido para Angular 6–8 com suporte a templates EJS: modo Visual (contenteditable com chips) e modo Código (Monaco + preview ao vivo).

Pacote pré-compilado — contém apenas bundles compilados (ViewEngine), tipos TypeScript e estilos SCSS (sem código-fonte). Integração via NgModule.

Pacote npm: pluton-html-angular-6-8

Para Angular 21+, use pluton-html-angular-21-22.

Recursos principais

• Variáveis EJS (<%= ... %>) e lógica de template (<% if (...) { %>, <% } %>, loops, etc.) como chips no modo visual
• Toolbar sincronizada com a seleção (negrito, itálico, sublinhado, tachado, alinhamento)
• Formatação em variáveis — negrito, itálico, cores e tamanho acumulam no style do chip
• Tamanho de fonte personalizado (ex.: 27px) além da lista fixa
• Layout de página — Automático (largura máxima, padrão), A4/A3/Letter, retrato/paisagem, múltiplas folhas e quebra de página
• Config global + local com defaults exportáveis e botões customizados na toolbar
• Modo código com altura dobrada: editor Monaco e preview em 50% / 50%

Instalação

js-beautify já vem como dependência da lib (não precisa instalar à parte).

npm install pluton-html-angular-6-8 [email protected] [email protected] --save

[email protected] — declare explicitamente no package.json do app.
js-beautify e tslib vêm como dependências transitivas do Pluton — não precisa instalá-los à parte.

Versões suportadas

Recomendado: Angular 6.1.x · Node 8.17.0

| Angular | Node.js (consumidor) | |---------|----------------------| | 6.0 – 6.1 | ≥ 8.9 · 8.17 recomendado | | 7.x | ≥ 10.9 · 10.13+ recomendado | | 8.x | ≥ 10.9 · 10.13+ recomendado |

Angular ≤ 5 e ≥ 9 não são suportados por este pacote.

| Pacote | Versão | |--------|--------| | ngx-monaco-editor | 6.0.0 | | monaco-editor | 0.15.6 | | rxjs | ^6.2.0 | | zone.js | ^0.8.26 |

Configuração do Monaco (obrigatório)

Em .angular-cli.json (Angular 6) ou angular.json, adicione os assets do Monaco:

{
  "glob": "**/*",
  "input": "../node_modules/ngx-monaco-editor/assets/monaco",
  "output": "./assets/monaco/"
}

O caminho relativo de input pode variar conforme a estrutura do projeto (node_modules/ngx-monaco-editor/assets/monaco em apps com angular.json na raiz).

Registre o módulo Monaco no AppModule:

import { MonacoEditorModule } from 'ngx-monaco-editor';

@NgModule({
  imports: [MonacoEditorModule.forRoot()],
})
export class AppModule {}

Estilos dos blocos e chips EJS (opcional)

Importe o SCSS no styles.scss do app se quiser a aparência padrão dos chips EJS e de HTML legado com classes .pluton-*:

@import '~pluton-html-angular-6-8/styles/editor-blocks';

| Conteúdo | Precisa do import? | |----------|-------------------| | Tabela, card, colunas, HR (toolbar) | Não — a lib gera style inline no HTML | | Chips EJS no modo visual | Recomendado — .pluton-editor-var, .pluton-editor-template | | Templates antigos com .pluton-header, .pluton-card | Sim, se ainda existirem |

Sem esse import, a inserção de blocos e a edição continuam funcionando; chips EJS aparecem sem o fundo colorido de destaque.

TypeScript 2.7 (Angular 6.0)

Se ng build falhar em tipos com import('./...').Type nos .d.ts do pacote, adicione um script postinstall no app consumidor.

Crie scripts/patch-pluton-html-dts.js:

#!/usr/bin/env node
'use strict';
var fs = require('fs');
var path = require('path');
var target = path.join(__dirname, '..', 'node_modules', 'pluton-html-angular-6-8', 'lib', 'models', 'editor-config.model.d.ts');
if (!fs.existsSync(target)) process.exit(0);
var content = fs.readFileSync(target, 'utf8');
var next = content
  .replace(
    "import { CardBlockOptions, FontFamilyOption, FontSizeOption, LineHeightOption, LinkInsertOptions, MarginOptions, PageLayoutOptions, TableInsertOptions, TextTransformOption } from './block-options.model';",
    "import { CardBlockOptions, FontFamilyOption, FontSizeOption, LineHeightOption, LinkInsertOptions, MarginOptions, PageLayoutOptions, PageSizeSettings, TableInsertOptions, TextTransformOption } from './block-options.model';",
  )
  .replace(
    "pageSize?: Partial<import('./block-options.model').PageSizeSettings>;",
    'pageSize?: Partial<PageSizeSettings>;',
  );
if (next !== content) fs.writeFileSync(target, next);

No package.json:

"postinstall": "node scripts/patch-pluton-html-dts.js"

Apps com TypeScript ≥ 2.9 normalmente não precisam desse patch.

Uso mínimo

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MonacoEditorModule } from 'ngx-monaco-editor';
import { PlutonHtmlEditorModule } from 'pluton-html-angular-6-8';

@NgModule({
  imports: [
    BrowserModule,
    MonacoEditorModule.forRoot(),
    PlutonHtmlEditorModule.forRoot({ theme: 'vs-dark' }),
    PlutonHtmlEditorModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

<pluton-html-editor
  [content]="html"
  (contentChange)="html = $event">
</pluton-html-editor>

export class AppComponent {
  html = '<p>Olá <%= user.name %></p>';
}

Importe PlutonHtmlEditorModule (sem .forRoot()) em feature modules que usam o editor. Use .forRoot() apenas uma vez no AppModule para a config global.

Reactive Forms (formControlName)

O componente não implementa ControlValueAccessor. Para usar com Reactive Forms, crie um wrapper que implemente CVA e repasse [content] / (contentChange) ao <pluton-html-editor>.

Exemplo com configuração global e local

A configuração é mesclada nesta ordem (o último vence em chaves de primeiro nível; objetos aninhados são mesclados em profundidade):

1. DEFAULT_PLUTON_HTML_EDITOR_CONFIG — defaults exportados pela biblioteca
2. PlutonHtmlEditorModule.forRoot(...) — config global do app
3. [config] no <pluton-html-editor> — config local da instância

// app.module.ts
import { PlutonHtmlEditorModule } from 'pluton-html-angular-6-8';

@NgModule({
  imports: [
    MonacoEditorModule.forRoot(),
    PlutonHtmlEditorModule.forRoot({
      theme: 'vs-dark',
      minifyOnEmit: false,
      defaultViewMode: 'visual',
      features: {
        insertPageBreak: true,
        debugCss: true,
      },
      defaults: {
        typography: {
          fontSize: '16px',
          fontFamily: 'Arial, sans-serif',
          foreColor: '#1e293b',
        },
        pageLayout: {
          pageSize: { preset: 'A4', orientation: 'portrait' },
          margin: { top: '16px', right: '16px', bottom: '16px', left: '16px' },
        },
      },
    }),
    PlutonHtmlEditorModule,
  ],
})
export class AppModule {}

<pluton-html-editor
  [content]="html"
  [height]="720"
  [config]="{
    theme: 'vs',
    features: { insertImage: true },
    defaults: { typography: { fontSize: '18px' } }
  }"
  (contentChange)="html = $event">
</pluton-html-editor>

Chips EJS no modo visual

| Tipo | Sintaxe | Classe CSS | Aparência | |------|---------|------------|-----------| | Variável / saída | <%= data.name %> | pluton-editor-var | Chip cinza | | Lógica de template | <% if (x) { %>, <% } %>, <% for (...) { %> | pluton-editor-template | Chip violeta |

Edição

• Duplo clique no chip abre edição inline da expressão ou do bloco de lógica
• Enter confirma, Esc cancela

Formatação na seleção

• Selecione o chip (ou texto dentro dele) e use B, I, U, S, cores ou tamanho
• Vários estilos acumulam no atributo style do chip (ex.: negrito + itálico + 27px)
• Clicar de novo no mesmo botão remove só aquele estilo (toggle)
• Tags EJS digitadas como texto são promovidas a chips automaticamente

Padrões regex configuráveis:

import {
  DEFAULT_VARIABLE_PATTERN,
  DEFAULT_TEMPLATE_LOGIC_PATTERN,
} from 'pluton-html-angular-6-8';

// Padrão: <%= expressão %>
DEFAULT_VARIABLE_PATTERN; // /<%=\s*([\s\S]*?)\s*%>/g

// Padrão: <% lógica %> (exceto <%=)
DEFAULT_TEMPLATE_LOGIC_PATTERN; // /<%(?!=)\s*([\s\S]*?)\s*%>/g

Modos Visual e Código

Modo visual

• Canvas com folhas; padrão Automático (largura 100% do editor) ou tamanho fixo (A4, A3, etc.)
• Toolbar fixa; scroll apenas no corpo do editor
• Painel Debug CSS destaca blocos, seções, páginas e chips

Modo código

• Altura total do componente dobra em relação ao modo visual (editorHeight × 2)
• Monaco (metade superior) e Preview (metade inferior)
• Botão flutuante F formata o HTML com js-beautify (se features.formatCodeButton)

PlutonHtmlEditorConfig

| Campo | Descrição | |-------|-----------| | theme | 'vs' | 'vs-dark' — tema do Monaco | | minifyOnEmit | Minifica HTML no contentChange | | variablePattern | Regex para saída/variáveis (<%= ... %>) | | templateLogicPattern | Regex para lógica (<% ... %> exceto <%=) | | visualDebounceMs | Debounce do sync no modo visual (padrão 300) | | defaultViewMode | 'visual' | 'code' | | editorHeight | Altura no modo visual. Número = px; string = CSS. Padrão: min(85vh, 720px) | | editorMinHeight | Altura mínima (padrão 420 px). No modo código, valor efetivo × 2 | | features | Liga/desliga grupos da toolbar | | defaults | Valores iniciais dos painéis e seletores | | lists | Listas customizadas (fontes, tamanhos, margens, etc.) | | customToolbarButtons | Botões extras no header |

Principais chaves de features (todas true por padrão): undoRedo, textFormatting, lists, alignment, typography, colors, insertImage, insertColumns, insertCard, insertTable, insertPageBreak, insertPageLayout, debugCss, viewModeSwitch, formatCodeButton.

Botões customizados na toolbar

customToolbarButtons: [
  {
    id: 'paste-model',
    label: 'Modelo',
    icon: 'template',
    action: {
      type: 'insertHtml',
      html: '<% if (order.show) { %><p><%= order.id %></p><% } %>',
      modes: ['visual', 'code'],
    },
  },
],

<pluton-html-editor (customToolbarClick)="onCustom($event)"></pluton-html-editor>

| action.type | Comportamento | |---------------|----------------| | insertHtml | Cola HTML na seleção/cursor | | deleteSelection | Apaga a seleção | | deleteWord | Apaga seleção ou palavra sob o cursor |

API do componente

| Input / Output | Tipo | Descrição | |----------------|------|-----------| | content | string | HTML inicial | | contentChange | string | HTML emitido (inline + EJS) | | config | Partial<PlutonHtmlEditorConfig> | Config local | | height | string \| number | Sobrescreve editorHeight nesta instância | | defaultViewMode | 'code' \| 'visual' | Modo inicial | | viewModeChange | 'code' \| 'visual' | Troca de modo | | customToolbarClick | PlutonCustomToolbarClickEvent | Botão customizado sem action embutida |

Métodos públicos (ViewChild)

| Método | Descrição | |--------|-----------| | insertHtmlAtCursor(html) | Insere HTML no cursor (visual ou código) | | deleteSelectionOrWord() | Remove seleção ou palavra | | getToolbarSelection() | { selectedText, hasSelection } |

Exports úteis

import {
  PlutonHtmlEditorModule,
  PlutonHtmlEditorComponent,
  PLUTON_HTML_EDITOR_CONFIG,
  DEFAULT_PLUTON_HTML_EDITOR_CONFIG,
  DEFAULT_VARIABLE_PATTERN,
  DEFAULT_TEMPLATE_LOGIC_PATTERN,
  PLUTON_EDITOR_VAR_CLASS,
  PLUTON_EDITOR_TEMPLATE_CLASS,
  mergePlutonHtmlEditorConfig,
  createDefaultPlutonHtmlEditorConfig,
  createPlutonHtmlEditorConfig,
  normalizeFlexColumnsInHtml,
  scaleCssSize,
} from 'pluton-html-angular-6-8';

PDF / Puppeteer (opcional)

Somente colunas inseridas pelo botão Colunas da toolbar usam <table> (melhor em PDF). HTML colado ou editado com display:flex não é alterado pelo editor.

Para converter flex legado só na geração do PDF (no seu backend):

import { normalizeFlexColumnsInHtml } from 'pluton-html-angular-6-8';

const html = normalizeFlexColumnsInHtml(ejs.render('template', data));

Licença

MIT