# Parser
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
const editor = grapesjs.init({
parser: {
// options
}
})
Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
const { Parser } = editor;
# Available Events
parse:html
On HTML parse, an object containing the input and the output of the parser is passed as an argument.
editor.on('parse:html', ({ input, output }) => { ... });
parse:html:before
Event triggered before the HTML parsing starts. An object containing the input is passed as an argument.
editor.on('parse:html:before', (options) => {
console.log('Parser input', options.input);
// You can also process the input and update `options.input`
options.input += '<div>Extra content</div>';
});
parse:css
On CSS parse, an object containing the input and the output of the parser is passed as an argument.
editor.on('parse:css', ({ input, output }) => { ... });
parse:css:before
Event triggered before the CSS parsing starts. An object containing the input is passed as an argument.
editor.on('parse:css:before', (options) => {
console.log('Parser input', options.input);
// You can also process the input and update `options.input`
options.input += '.my-class { color: red; }';
});
parse
Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
editor.on('parse', ({ event, ... }) => { ... });
# Methods
# getConfig
Get configuration object
Returns Object (opens new window)
# parseHtml
Parse HTML string and return the object containing the Component Definition
# Parameters
input
String (opens new window) HTML string to parseoptions
Object (opens new window)? Options (optional, default{}
)options.htmlType
String (opens new window)? HTML mime type (opens new window) to parseoptions.allowScripts
Boolean (opens new window) Allow<script>
tags (optional, defaultfalse
)options.allowUnsafeAttr
Boolean (opens new window) Allow unsafe HTML attributes (eg.on*
inline event handlers) (optional, defaultfalse
)
# Examples
const resHtml = Parser.parseHtml(`<table><div>Hi</div></table>`, {
htmlType: 'text/html', // default
});
// By using the `text/html`, this will fix automatically all the HTML syntax issues
// Indeed the final representation, in this case, will be `<div>Hi</div><table></table>`
const resXml = Parser.parseHtml(`<table><div>Hi</div></table>`, {
htmlType: 'application/xml',
});
// This will preserve the original format as, from the XML point of view, is a valid format
Returns Object (opens new window) Object containing the result { html: ..., css: ... }
# parseCss
Parse CSS string and return an array of valid definition objects for CSSRules
# Parameters
input
String (opens new window) CSS string to parse
# Examples
const res = Parser.parseCss('.cls { color: red }');
// [{ ... }]
Returns Array (opens new window)<Object (opens new window)> Array containing the result