grapesjs/docs/api/parser.md

Parser

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

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

parseHtml

Parse HTML string and return the object containing the Component Definition

Parameters

• input String HTML string to parse

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

  • options.htmlType String? HTML mime type to parse
  • options.allowScripts Boolean Allow <script> tags (optional, default false)
  • options.allowUnsafeAttr Boolean Allow unsafe HTML attributes (eg. on* inline event handlers) (optional, default false)
  • options.allowUnsafeAttrValue Boolean Allow unsafe HTML attribute values (eg. src="javascript:...") (optional, default false)
  • options.keepEmptyTextNodes Boolean Keep whitespaces regardless of whether they are meaningful (optional, default false)
  • options.asDocument Boolean? Treat the HTML string as document
  • options.detectDocument (Boolean | Function)? Indicate if or how to detect if the HTML string should be treated as document
  • options.parserCode String? Use a specific parser from the code parser registry. Pass an empty string to force the built-in/legacy parser path.
  • options.preParser Function? How to pre-process the HTML string before parsing
  • options.convertDataGjsAttributesHyphens Boolean Convert data-gjs-* attributes from hyphenated to camelCase (eg. data-gjs-my-component to data-gjs-myComponent) (optional, default false)
  • options.convertAttributeValues (Boolean | Array<String> | Function) 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 Object containing the result { html: ..., css: ... }

parseCss

Parse CSS string and return an array of valid definition objects for CSSRules

Parameters

• input String CSS string to parse

Examples

const res = Parser.parseCss('.cls { color: red }');
// [{ ... }]

Returns Array<Object> Array containing the result

addParserCode

Add a new HTML code parser to the registry.

const parser = Parser.addParserCode(
  'my-parser',
  (input, { editor, options }) => [{ nodeType: 1, tagName: 'section' }],
  { skipSelect: true },
);

Returns Object Added parser definition

getParserCode

Get a registered HTML code parser by id.

Returns (Object | undefined)

removeParserCode

Remove a registered HTML code parser by id.

Returns (Object | undefined)

Properties

parserCode

Get or update the selected HTML code parser id.

Parser.parserCode = 'my-parser';
Parser.parserCode = '';

parsersCode

Object containing the registered HTML code parsers keyed by id.