Comments (5)
@begoat run-react 只是用来跑这个项目 demo 的,所以不要去修改它的配置。gaea-editor
是一个组件,真正用法是 npm i gaea-editor
然后在项目中使用它:
import Editor from "gaea-editor"
ReactDOM.render(
<Editor />,
document.getElementById("react-root")
)
你可以把 antd-mobile 的组件包装一层,所有 props 都透传,再定义 gaeaSetting
字段在 defaultProps
就可以了。这里是内置组件的配置,可以参考:https://github.com/ascoders/gaea-basic-components/blob/master/src/text/text.type.ts#L2
from gaea-editor.
谢谢,折腾了webpack 蛮长时间终于配好了环境,现在是typescipt的 antd-mobile项目 然后饮用 Gaea成功了。
但是遇到一个新的问题,希望能得到一些帮助:
在 gaea-editor 这个项目中参考 上述的配置 改写了内置的 Icons 和 Text组件,并且在 componentClasses 这个参数去调,可以作为自定义组件去用。
Test.component.tsx
import * as React from "react"
import * as ReactDOM from "react-dom"
import { Props, State } from "./Text.type"
export default class Text extends React.Component<Props, State> {
public static defaultProps = new Props()
public state = new State()
public render() {
return (
<p style={this.props.style}>
{this.props.text}
</p>
)
}
}
Text.type.ts
export class Props {
public gaeaSetting = {
key: "gaea-Text",
name: "段落文字",
editors: [
"外观属性",
{
field: "text",
label: "文字内容",
type: "string"
},
{
field: "style.backgroundColor",
label: "背景颜色",
type: "color"
},
{
field: "style.color",
label: "文字颜色",
type: "color"
},
{
field: "style.font-size",
label: "文字大小",
type: "number",
data: {
useSlider: true,
sliderStep: 1,
inputRange: [0, 100],
outputRange: [0, 150]
}
}
]
}
public style: React.CSSProperties = {
color: "#333"
}
public text: string = "段落文字"
}
export class State { }
但是 把 Gaea-Editor 作为一个组件放在 antd-mobile 项目里面,把同样的组件复制过去用就有错,
component.tsx 文件里面
webstorm 提示 Unresolved variable this.props.style 和 this.props.text
type.ts 文件里面
webstorm 提示 Unused field text...
- 嗯,我感觉可能是没 理解怎么 Props 透传怎么搞
我对 传参数的理解是 看到源代码中 loadPluginByPosition( 可以 传position,后面多的的 自动作为参数)
然后还知道
@Inject(className) <==> new className()
@connect 用法如下:Connect 用于 修饰 react 组件 会自动使用 Provider 阶段注入的值
希望得到一些帮助,🙏
from gaea-editor.
还有一个小问题就是 内置组件 下拉选择 的这个 组件 一拖 自动focus 了,不好实现流畅自由的拖动
from gaea-editor.
@begoat inject
、connect
的理解都正确,loadPluginByPosition
是用来加载插件的内部方法,如果需要拓展编辑器需要用到,如果有需求,我会继续完善一下文档。但是这些和正确使用没有啥关系,我说的透传是指,把 antd 组件包一层:
CustomAntd.component.tsx
import * as React from "react"
import { Button } from "atnd"
import { Props, State } from "./CustomAntd.type"
export default class Text extends React.Component<Props, State> {
public static defaultProps = new Props()
public state = new State()
public render() {
return (
<Button {...this.props}/>
)
}
}
但是 把 Gaea-Editor 作为一个组件放在 antd-mobile 项目里面,把同样的组件复制过去用就有错,
component.tsx 文件里面
这句话没看懂什么意思,你是想把 gaea-editor 编辑器组件放到 antd-mobile 项目里?没这必要吧。
from gaea-editor.
谢谢,我在多试试,理解理解🙏
from gaea-editor.
Related Issues (20)
- 克隆项目 npm run start 报错 HOT 2
- Uncaught ReferenceError: Save is not defined HOT 2
- preComponents有什么作用呢? HOT 3
- src/components/box-editor/src/box-editor/box-editor.component.tsx报错 HOT 1
- npm run docs 后浏览器提示https不安全 HOT 1
- Local development run,got a mistake HOT 1
- 给组件设置margin后,hover框偏移
- [教程-图文] 关于在Window里面使用WSL(Liunx子系统)来开发gaea-editor HOT 2
- [BUG] 当属性过多的时候,无法点击到对应的添加事件的按钮 HOT 1
- window安装了包之后,启动 HOT 3
- npm run docs运行不起来 HOT 2
- 引入Editor报错,Xe.create is not a function HOT 5
- 如何初始化编辑器布局? HOT 2
- 代码没法运行 , 但是不知道什么报错 HOT 3
- 请问 container 组件的 Grow参数是什么用的 ? HOT 1
- 钉钉二维码过期 HOT 1
- npm run start 报错
- 有没有用 JavaScript 或 vue 写的类似可视化搭建库
- 源码代码找半天
- 请问如何获取editor component onchange event?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gaea-editor.