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
})
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…