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
• parseHtml
• parseCss
• addParserCode
• getParserCode
• removeParserCode

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)
  • options.allowUnsafeAttrValue Boolean (opens new window) Allow unsafe HTML attribute values (eg. src="javascript:...") (optional, default false)
  • options.keepEmptyTextNodes Boolean (opens new window) Keep whitespaces regardless of whether they are meaningful (optional, default false)
  • options.asDocument Boolean (opens new window)? Treat the HTML string as document
  • options.detectDocument (Boolean (opens new window) | Function (opens new window))? Indicate if or how to detect if the HTML string should be treated as document
  • options.parserCode String (opens new window)? Use a specific parser from the code parser registry. Pass an empty string to force the built-in/legacy parser path.
  • options.preParser Function (opens new window)? How to pre-process the HTML string before parsing
  • options.convertDataGjsAttributesHyphens Boolean (opens new window) Convert data-gjs-* attributes from hyphenated to camelCase (eg. data-gjs-my-component to data-gjs-myComponent) (optional, default false)
  • options.convertAttributeValues (Boolean (opens new window) | Array (opens new window)<String (opens new window)> | Function (opens new window)) Convert regular HTML attribute values using the same parser used by data-gjs-* attributes (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

addParserCode

Add a new HTML code parser to the registry.

Parameters

• id string (opens new window) Parser ID

• parse Function (opens new window) Parser function

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

  • options.skipSelect Boolean (opens new window) Avoid selecting the added parser as default (optional, default false)

Returns Object (opens new window) Added parser definition

getParserCode

Get an HTML code parser by id.

Parameters

• id string (opens new window) Parser ID

Returns (Object (opens new window) | undefined (opens new window)) Parser definition

removeParserCode

Remove an HTML code parser from the registry.

Parameters

• id string (opens new window) Parser ID

Returns (Object (opens new window) | undefined (opens new window)) Removed parser definition