@mastergo/html-mastergo

html-mastergo

中文 | English

A library can convert html into MasterGo plugin data structures.

Install

yarn add @mastergo/html-mastergo | npm install @mastergo/html-mastergo

Usage

• Install MasterGo client and init a plugin project.

• Build UI(Click here MasterGo-Plugin if having trouble in how to develop plugins in MasterGo)

• Use the library

  /** UI side **/
  import { htmlToMG, postProcess } from '@mastergo/html-mastergo';
  // any dom element
  const convert = async () => {
    const layerJson = await htmlToMG(document.body);
    // Not necessary, you can do anything you want to do with json processed by the function htmlToMG. This is just one way to do it.
    const processedJson = await postProcess(layerJson)
    // post data to plugin
    parent.postMessage({
      type: 'generate',
      data: processedJson
    }, '*')
  }
  
  
  /** Plugin side **/
  import { renderToMasterGo } from '@mastergo/html-mastergo';
  mg.ui.onmessage = (msg) => {
    const { data, type } = msg
    if (type === 'generate') {
      // traverse
      renderToMasterGo(data).then(root => {
        console.log('root node', root)
      })
    }
  }
  

Limitations

A few known limitations:

• Not all element types are supported (e.g. iframes)
• Not all CSS properties are supported or fully supported
• Not all types of media are supported (video, animated gifs, etc)
• All fonts must be uploaded to MasterGo, otherwise the default fonts will be used for rendering

If you find any problems or have any feedback, please Ask a Question

Example

Example