如何在 ngx-editor 的 Div 内容中使用样式

Question

我在我的 Angular 应用程序中使用最新版本的 'ngx-editor'，但是当我在 div 中使用 内联样式的内容，它没有正确显示。我的意思是，ngx-editor 在所见即所得编辑器中删除了 style。

我已经尝试过下面这个例子。

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>

但是当我单击提交按钮并控制该结果时，我没有得到那种内联样式。

也许，有人现在如何在ngx-editor的内容上使用内联样式。感谢您的帮助。

Answer 1

希望您使用的是 v5 或 v6 及更高版本。您需要为此创建自定义架构。

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];
  }
};

您可以根据需要 add/handle 其他样式属性。有关更多详细信息，请参阅此处 https://github.com/sibiraj-s/ngx-editor/blob/v5.3.0/src/lib/schema/nodes.ts。

架构

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

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

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

对于v6，初始化编辑器时

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

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

对于 v5，架构创建是相同的。模式应该通过模块定义

NgxEditorModule.forRoot({
  schema
})

如何在 ngx-editor 的 Div 内容中使用样式

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

angular

ngx-editor