ascoders / gaea-editor Goto Github PK

开发环境

复现地址

• https://gaeajs.github.io/gaea-site/

拖拽一个按钮,然后进行事件的编辑的时候发现无法正常查看或者点击

最小化仓库地址

• https://github.com/ascoders/gaea-editor.git

期望结果

可以通过滚动的方式,操作属性比较多的控件

这个组件是typescript写的，我在插入进JavaScript项目的时候，会跳出
Uncaught (in promise) TypeError: Cannot read property 'object' of undefined错误

想请问下，是不是需要对webpack做出适配呢？
PS：我已经在项目的目录下安装好typescript了，也按照您说的安装好gaea-editor了（npm i gaea-editor）

<Editor
          componentClasses={[MyInput]}
        />

只要在编辑器Editor 加上这行componentClasses={[MyInput]}代码就会报上图错误

还有一个问题是 我git clone 项目到本地 无法跑起来，我是通过yarn 去install 跟这个有关系吗

想在自定义组件里面添加通用组件，发现了antd-mobile这个库

然后参考 这里webpack2.X 的 配置样例，了解到您是通过run-react集成webpack配置，所以下载并修改了 run-react src里面的dev.config配置文件
ant-design/ant-design-mobile#516 (comment)

先编译run-react然后在修改了 Gaea-editor 项目里面的 关于 run-react指定成了本地文件，然后试了很多种配置方法，一直编译的时候报错。

后来换了一种方法，新建了一个项目去先配置好webpack导入antd-mobile，然后在通过把gaea编辑器也作为一个module,import 进来配置它的componentClasses，然后还是出了一些问题。

在这里想问个 思 路，我该怎么引入呢？ 或者怎么修改外部组件的配置呢？

确实很强大，但是文档太少了，看来看去都不知道怎么初始化布局，每次刷新页面都得手动重设一边，好烦躁 _(:3J∠)_

现在想达到的效果是默认打开左侧组件栏和默认 Iphone6/7/8 的视图

version: 2.3.5
Module not found: Can't resolve '@babel/runtime/core-js/array/from' in /node_modules/gaea-editor/dist/src/plugins/copy-paste-keyboard'
使用的create-react-app 创建的项目。

One-line summary [问题简述]

更新到antd-pro到最新版，引入gaea-editor，项目启动不起来。

Version & Environment [版本及环境]

• gaea-editor version [gaea-editor 版本]:2.1.8
• Browser version [浏览器类型和版本]:chrome Version 66.0.3359.181
• OS Version [操作系统类型和版本]:mac 10.13.4
• Antd-Pro version [Antd-Pro 版本]:2.0.0-beta.1 // "react": "^16.2.0",

Expected behaviour [期望结果]

官方代码跑起来，正常显示就好。我想只要官方demo可以跑，我的代码应该也没问题。

gaea-editor code [gaea-editor代码]

import Editor from 'gaea-editor';

render(){
    return  <Editor />
}

Other comments [其他信息]

最近看了你的简书的文章想自己实现自己的网页编辑器，
根据 sortable 这个代码 ：
https://github.com/fis-components/sortablejs/blob/master/README.md

import * as React from "react";
import Sortable from 'sortablejs';

export class SortableExampleEsnext extends React.Component {

  sortableContainersDecorator = (componentBackingInstance) => {
    // check if backing instance not null
    if (componentBackingInstance) {
      let options = {
        handle: ".group-title" // Restricts sort start click/touch to the specified element
      };
      Sortable.create(componentBackingInstance, options);
    }
  };

  sortableGroupDecorator = (componentBackingInstance) => {
    // check if backing instance not null
    if (componentBackingInstance) {
      let options = {
        draggable: "div" // Specifies which items inside the element should be sortable
        group: "shared"
      };
      Sortable.create(componentBackingInstance, options);
    }
  };

  render() {
    return (
      <div className="container" ref={this.sortableContainersDecorator}>
        <div className="group">
          <h2 className="group-title">Group 1</h2>
          <div className="group-list" ref={this.sortableGroupDecorator}>
            <div>Swap them around</div>
            <div>Swap us around</div>
            <div>Swap things around</div>
            <div>Swap everything around</div>
          </div>
        </div>
        <div className="group">
          <h2 className="group-title">Group 2</h2>
          <div className="group-list" ref={this.sortableGroupDecorator}>
            <div>Swap them around</div>
            <div>Swap us around</div>
            <div>Swap things around</div>
            <div>Swap everything around</div>
          </div>
        </div>
      </div>
    );
  }
}

跑了这个段 Sortable结合 react 的 demo
发现可以 直接拖拽了 ，并没有出现 你简书文中提到的 用什么 sortable操作回滚技术，把sortable当作中间动画。

我 console.log 发现 用类似上面的 代码去跑并没有 重新render 请问这是怎么 回事呢？

node: 9.11.2
npm : 6.11.3
"gaea-editor": "2.3.24",
"react": "16.8.6",
"react-dom": "16.8.6"

代码：

import React from "react";
import ReactDOM from "react-dom";
import Editor from 'gaea-editor'

import "./styles.css";

function App() {
  return (
    <div className="App">
      <Editor />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

大佬，我就这样引入了一下，然后跑起来报这个错：

如题，比如每一个 defaultProps 都有一个 gaeaName 属性，但是在您的简书上面的例子，还有一个 name 那么属性也需要设置，有什么区别么？

你好，发现 基本的默认组件 select 下拉选项 拖拽起来 有点问题，不方便直接拖拽他

然后昨天导了antd-mobile 的 Button组件之后 在 gaeaSetting 里面设置了 isPreview = true 之后 还是不可以。

antd-mobile 里面 Button 的 情况是 拖动1次 正常，然后就不能拖动了，
基本组件select 是 无论怎么样 都不方便拖拽

希望 大大解决下😊

I follow the steps Local development run.But go a mistake.
详细信息
yarn run v1.9.4
$ pri docs
i info Lint and format code..
'tests)' 不是内部或外部命令，也不是可运行的程序

tslint不支持该写法？

如图，这个效果需要自己实现的吗

Failed to load resource: net::ERR_CERT_AUTHORITY_INVALID

guide-line 的框位置是通过getBoundingClientRect 计算的，但是设置margin后guide-line框的位置会与editor中渲染出来的组件实际位置不一致,后续的组件也会受到偏移的影响。求解决办法考虑用css的hover实现类似效果有何问题？

npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/nt-web-button

published it to npmjs.com?

请问下有打算做 hover 样式设置功能么？

• node: v8.5.0

• npm : v6.1.0

• "react": "^16.5.2",

• "gaea-editor": "^2.3.15",

使用create-react-app-ts创建的ts项目，npm install gaea-editor后，index文件引入gaea-editor，npm start报错

index.tsx

import Editor from 'gaea-editor';

ReactDOM.render(
<Editor />,
document.getElementById('root') as HTMLElement
);

npm start

./node_modules/dob-react/src/connect.ts
(2,1): 'ReactDOM' is declared but its value is never read.

假如 有这样一个需求 我自定义一个按钮组件，然后我需要给这个按钮加个事件，比如就加个跳转，点击按钮跳转到百度，能丢一个例子出来参考下怎么写么？谢谢！

请问，界面文字可以切换为中文吗？
另外，当我添加了一个组件后，无法移除掉，请问现在是没有实现呢，还是有移除的方法，我没有找到？

启动起来之后，报个错

Uncaught ReferenceError: Save is not defined
    at Module../src/plugins/view-mode/index.tsx (main.ceba.js:37295)
    at __webpack_require__ (main.ceba.js:732)
    at fn (main.ceba.js:109)
    at Module../src/gaea-editor.component.tsx (main.ceba.js:29590)
    at __webpack_require__ (main.ceba.js:732)
    at fn (main.ceba.js:109)
    at Module../src/index.tsx (main.ceba.js:29808)
    at __webpack_require__ (main.ceba.js:732)
    at fn (main.ceba.js:109)
    at Module../docs/basic.tsx (main.ceba.js:913)

我看了下文件 ../src/plugins/view-mode/index.tsx

export default {
  position: 'navbarRight',
  class: Save
};

Save 没有地方声明啊 是不是应该是ViewMode啊

版本2.3.19

这个怎么使用啊

[mobx] Deprecated:
In MobX 2.* passing a function without arguments to (extend)observable will automatically be inferred to be a computed value.
This behavior is ambiguous and will change in MobX 3 to create just an observable reference to the value passed in.
To disambiguate, please pass the function wrapped with a modifier: use 'co

mputed(fn)' (for current behavior; automatic conversion), or 'asReference(fn)' (future behavior, just store reference) or 'action(fn)'.
Note that the idiomatic way to write computed properties is 'observable({ get propertyName() { ... }})'.
For more details, see mobxjs/mobx#532: [email protected]

Node版本：9.0.0

使用了wsl在windows 环境中

install之后报错：

试着重装也不行。。

create-react-app 创建的项目，拓展 antd 的 Button 组件作为自定义组件时，在拖动自定义的 AntdButton 到 Container 中时报错：Warning: React does not recognize the Textprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasetext instead. If you accidentally passed it from a parent component, remove it from the DOM element.
复现项目地址：https://github.com/cag2050/antd_mobx_demo ，运行：npm run dev，报错页面地址：http://localhost:8887/gaea_editor

version: 2.3.6

TypeError: Cannot read property 'isContainer' of undefined

错误出现在 page/viewport/edit-helper/edit-helper 文件中。

以下是我代码

class Foo extends Component {
  render() {
    return <div>hello</div>;
  }
}

Foo.defaultProps = {
  editSetting: {
    key: 'my-custom-key', // Unique key.
    name: 'Custom one', // The name shown in drag menu.
    editors: [
      {
        field: 'title',
        text: 'Text',
        type: 'string'
      }
    ] // Tell gaea-editor, which props can be edited and how to edit it.
  }
}

class App extends Component {
  render() {
    return (
      <div className="App" style={{ width: '100vw', height: '100vh' }}>
        <Editor componentClasses={[Foo]} />
      </div>
    );
  }
}

环境要求

• 操作系统 Window 10 19H1或更高版本

开启Window中的liunx子系统功能

1. 在控制面板-> 程序和功能中开启-子系统功能

2. 在Window商城中下载对应的liunx镜像 - (我这边直接使用的Debian进行开发)

安装环境

git 安装命令

sudo apt-get install git 

nodejs 安装

# Using Debian, as root
curl -sL https://deb.nodesource.com/setup_12.x | bash -
apt-get install -y nodejs

• https://github.com/nodesource/distributions/blob/master/README.md

下载源码&运行

以上默认已经安装好运行环境

# /mnt/d/ 表示是window下的d盘

cd  /mnt/d/dev/code/github
git clone https://github.com/ascoders/gaea-editor.git
cd gaea-editor 
npm install # 等待下载完成
npm run docs  # window浏览器会自动打开http://127.0.0.1:8000/地址提供预览

用vscode 或者其他编辑器打开d盘的gaea-editor 目录下的文件进行编辑保存即可

选择flex布局

预览效果

1.我在AntPro中引用gaea之后，发现跟nextdesign中的gaea少了发布的功能。是有意而为之的嘛？

2.另外保存完后，保存的结果下次该如何读取？（next好像是通过发布版本，然后回滚版本实现的，这个gaea好像没发布这个功能）

3.我发现我进入别的页面，再返回gaea页面后，gaea组件会重复，如下图所示：

以上三个问题还请黄神不吝指教。

感谢作者，这是一个很好的项目。看到了它，我就被他吸引了。读了源代码，其中有一个关于预设组件的设定，没理解怎么使用。麻烦作者举个例子说明一下。

开发环境 :
Windows 10
node v10.15.1
npm v6.4.1

没装 typescript .

看报错说没有这个路径 , 但确实是有的 :

请问这个可以获取到生成的JSX代码么，直接获取设计器生成的JSX代码，而不是那种JSON格式的描述？
这个支持吗，只需要正向获取到JSX即可，不需要反向从JSX生成界面，如果能直接拿到JSX代码的话这个设计器真的是太好了，大大提高了工作效率的说。

看了下demo 貌似没找到这么绑定的

npm install 成功安装了gaea 后，但是无法启动 npm start.
node v 10.1.0
npm 5.6.0

错误信息如下，请问是哪里的问题，多谢！

$ npm start

[email protected] start /Users/Downloads/gaea
run-react develop

10% building modules 1/1 modules 0 activeWebpack hot bundle: http://localhost:8001/bundle.js
10% building modules 2/3 modules 1 active ...oads/gaea/src/develop-entry/index.tsxts-loader: Using [email protected] and /Users/Downloads/gaea/tsconfig.json
Asset Size Chunks Chunk Names
bundle.js 7.16 MB 0 main
bundle.js.map 7.47 MB 0 main
[0] ../_react@16.3.2@react/index.js 190 bytes {0} [built]
[10] ../_react-dom@16.3.2@react-dom/index.js 1.36 kB {0} [built]
[138] ../_webpack@3.12.0@webpack/hot/log.js 1.04 kB {0} [built]
[218] ../_webpack@3.12.0@webpack/hot/emitter.js 77 bytes {0} [built]
[508] multi webpack-dev-server/client?http://localhost:8001 webpack/hot/only-dev-server src/develop-entry/index 52 bytes {0} [built]
[509] ../_webpack-dev-server@2.11.2@webpack-dev-server/client?http://localhost:8001 7.93 kB {0} [built]
[510] ../_url@0.11.0@url/url.js 23.3 kB {0} [built]
[516] ../_strip-ansi@4.0.0@strip-ansi/index.js 150 bytes {0} [built]
[518] ../_loglevel@1.6.1@loglevel/lib/loglevel.js 7.86 kB {0} [built]
[519] ../_webpack-dev-server@2.11.2@webpack-dev-server/client/socket.js 1.08 kB {0} [built]
[521] ../_webpack-dev-server@2.11.2@webpack-dev-server/client/overlay.js 3.67 kB {0} [built]
[526] ../webpack/hot nonrecursive ^./log$ 170 bytes {0} [built]
[528] ../_webpack@3.12.0@webpack/hot/only-dev-server.js 2.37 kB {0} [built]
[529] ../_webpack@3.12.0@webpack/hot/log-apply-result.js 1.31 kB {0} [built]
[530] /Users/Downloads/gaea/src/develop-entry/index.tsx 1.3 kB {0} [built]
+ 1331 hidden modules

ERROR in /Users/Downloads/gaea/src/plugins/main-tool-tree/tree-node/tree-node.component.tsx
(47,110): error TS2339: Property 'getElementsByClassName' does not exist on type 'Element | Text'.
Property 'getElementsByClassName' does not exist on type 'Text'.

ERROR in /Users/Downloads/gaea/src/plugins/main-tool-tree/guideline/guideline.component.tsx
(25,33): error TS2339: Property 'getBoundingClientRect' does not exist on type 'Element | Text'.
Property 'getBoundingClientRect' does not exist on type 'Text'.

ERROR in /Users/Downloads/gaea/src/plugins/main-tool-editor-type-number/index.tsx
(57,40): error TS2698: Spread types may only be created from object types.

ERROR in /Users/Downloads/gaea/src/plugins/main-tool-editor-type-box-editor/index.tsx
(30,11): error TS2322: Type '{ onStart: () => void; marginLeft: string | number; marginTop: string | number; marginRight: stri...' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> &...'.
Type '{ onStart: () => void; marginLeft: string | number; marginTop: string | number; marginRight: stri...' is not assignable to type 'Readonly'.
Types of property 'paddingLeft' are incompatible.
Type 'string | number' is not assignable to type 'number'.
Type 'string' is not assignable to type 'number'.
webpack: Failed to compile.
Failed to compile.

`invariant.js:42 Uncaught Error: Element ref was specified as a string (marginLeftInput) but no owner was set. This could happen for one of the following reasons:

1. You may be adding a ref to a functional component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
   See https://fb.me/react-refs-must-have-owner for more information.
   at invariant (invariant.js:42)
   at coerceRef (react-dom.development.js:11774)
   at reconcileSingleElement (react-dom.development.js:12476)
   at reconcileChildFibers (react-dom.development.js:12531)
   at reconcileChildrenAtExpirationTime (react-dom.development.js:12902)
   at reconcileChildren (react-dom.development.js:12893)
   at updateHostComponent (react-dom.development.js:13232)
   at beginWork (react-dom.development.js:13719)
   at performUnitOfWork (react-dom.development.js:15741)
   at workLoop (react-dom.development.js:15780)
   at HTMLUnknownElement.callCallback (react-dom.development.js:100)
   at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
   at invokeGuardedCallback (react-dom.development.js:187)
   at replayUnitOfWork (react-dom.development.js:15194)
   at renderRoot (react-dom.development.js:15840)
   at performWorkOnRoot (react-dom.development.js:16437)
   at performWork (react-dom.development.js:16358)
   at performSyncWork (react-dom.development.js:16330)
   at requestWork (react-dom.development.js:16230)
   at scheduleWork$1 (react-dom.development.js:16096)
   at Object.enqueueForceUpdate (react-dom.development.js:11222)
   at MainToolEditor../node_modules/react/cjs/react.development.js.Component.forceUpdate (react.development.js:291)
   at Reaction.callback (connect.js:75)
   at Reaction../node_modules/_dob@2.5.9@dob/built/src/reaction.js.Reaction.run (reaction.js:76)
   at runReaction (observer.js:141)
   at observer.js:158
   at Set.forEach ()
   at runPendingReactions (observer.js:152)
   at endBatch (observer.js:222)
   at runInAction (observer.js:256)
   at ViewportAction. (observer.js:244)
   at HTMLDivElement.EditHelper._this.handleClick (edit-helper.component.js:44)`

这个项目的支持度会怎样?

 preComponents={[{
          gaeaKey: "antd-layout",
          components:[{
            name: 'ant-button',
            props: { text: '123' }
          },{
            name: 'ant-row',
            props: {  }
          }]
        }]}

如上面所示，在preComponents配置了下，只是在左边菜单去掉了ant-layout, 多出来两个row和button，然后拖拽进去的还是layout，不知道这个配置有啥用？

另外我有个需求是，比如antd的layout，我想通过配置把header 和sider footer content 展示出来，能否在layout的动态添加上这些挂件之后，把她们在layout内部搞成一个container呢？

求问，活着求大神提供支持的思路

这个编辑器对于组件的设计要求应该不能是普遍适用的吧。
比如

<Select>
    <Option></Option>
</Select>

对于这种嵌套结构有限制的组件模式，编辑器应该不能在可视化编辑过程中组装出这样一个结构吧，如果应是要拖拽进去的话，因为每个组件都被高阶组件给封装了，按理说，也会影响组件的正常运行

417行

 const inputElement = ReactDOM.findDOMNode(this.refs[name + 'Input']) as HTMLInputElement;
  inputElement.blur();

inputElement 会出现为null的情况，我没找到可以设置ref的地方，我把这里改成

inputElement && inputElement.blur();