angular - How Can I Use Style In The Div Content On ngx-editor

Question

I'm use the latest version of 'ngx-editor' in my Angular App, but when I use inline style in the div of content, it's not showing correctly. I mean, ngx-editor remove that style in the wysiwyg editor.

I've been try with this example below.

app.component.ts

// my typescript
const content = `
  <div style="background: orange; display: flex; width: 100%; height: 64px">
    Example text with example custom container with inline style
  </div>
  <div style="background: #000000; width: 100%; height: 30px; text-align: center">
    Example footer
  </div>
`
this.formGroup = this.formBuilder.group({
  content: [toDoc(content)],
});

app.component.html

<div class="row">
  <div class="col-12">
    <form [formGroup]="formGroup">
      <ngx-editor formControlName="content"></ngx-editor>
      <button class="btn btn-primary btn-sm" (click)="doSubmit()">Submit</button>
    </form>
  </div>
</div>

But when I click the submit button and console that result, I don't get that inline style.

Maybe, someone now how to use inline style on the content of ngx-editor. Thanks for your help.

Answer 1

I hope you are using v5 or v6 and above. You will need to create custom schema for that.

const paragraph: NodeSpec = {
  content: 'inline*',
  group: 'block',
  attrs: {
    align: {
      default: null,
    },
    background: {
      default: null
    }
  },
  parseDOM: [
    {
      tag: 'p',
      getAttrs(dom: HTMLElement): Record<string, any> {
        const { textAlign } = dom.style;
        const align = dom.getAttribute('align') || textAlign || null;

        return {
          align
        };
      }
    },
    {
      tag: 'div', // this will parse div to the editor required format
      getAttrs(dom: HTMLElement): Record<string, any> {
        const { textAlign, background } = dom.style; // you can add required properties here.
        const align = dom.getAttribute('align') || textAlign || null;

        return {
          align,
          background
        };
      }
    }
  ],
  toDOM(node): DOMOutputSpec {
    const { align,background } = node.attrs;

    const styles: Partial<CSSStyleDeclaration> = {
      textAlign: align !== 'left' ? align : null,
      background
    };
    const style = toStyleString(styles) || null;

    return ['p', { style }, 0];
  }
};

You can add/handle additional styles properties as required. Refer here https://github.com/sibiraj-s/ngx-editor/blob/v5.3.0/src/lib/schema/nodes.ts for more details.

Schema

import { nodes as basicNodes, marks } from 'ngx-editor';

const nodes = Object.assign({}, basicNodes, {
  paragraph,
});

const schema = new Schema({
  nodes,
  marks,
});

For v6,while initialising an editor

export class AppComponent implements OnInit, OnDestroy {
  editor: Editor;
  ngOnInit(): void {
    this.editor = new Editor({
      schema,
    });
  }

  ngOnDestroy(): void {
    this.editor.destroy();
  }
}

for v5, schema creation is same. Schema should be defined via module

NgxEditorModule.forRoot({
  schema
})