中文 | English
A library can convert html into MasterGo plugin data structures.
yarn add @mastergo/html-mastergo | npm install @mastergo/html-mastergo-
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) }) } }
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