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
• parse:css - On CSS parse, an object containing the input and the output of the parser is passed as an argument

Methods

• getConfig
• parseHtml
• parseCss

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 parse

• options Object (opens new window)? Options (optional, default {})

  • options.htmlType String (opens new window)? HTML mime type (opens new window) to parse
  • options.allowScripts Boolean (opens new window) Allow <script> tags (optional, default false)
  • options.allowUnsafeAttr Boolean (opens new window) Allow unsafe HTML attributes (eg. on* inline event handlers) (optional, default false)

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