JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/react@15.6.1/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/gaea-editor@2.0.48/built/bundle.js"></script>
<div style="width: 100vw; height: 100vh" id='react-dom'></div>
CSS
html, body {
margin: 0;
padding: 0;
border: 1px solid #ddd;
}
Babel + JSX
// import GaeaEditor from 'gaea-editor'
class CustomComponent extends React.Component {
static defaultProps = {
title: 'default',
gaeaSetting: {
key: "custom-text",
name: "自定义组件",
editors: [
"展示",
{
field: "title",
label: "标题",
type: "string"
}
]
}
}
render() {
return <div>custom component: {this.props.title}</div>
}
}
ReactDOM.render(
<GaeaEditor componentClasses={[CustomComponent]} />
, document.getElementById('react-dom'))