ant design pro 引入 gg-editor 常见问题

最新推荐文章于 2024-08-07 09:23:36 发布
最新推荐文章于 2024-08-07 09:23:36 发布
阅读量4.2k 收藏 5
点赞数 1
文章标签： antd gg-editor antd pro
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_15951543/article/details/88635100
版权

最近在用 antd pro + gg-editor 解决一些比较复杂的流程图业务场景。在 antd pro 引入 gg-editor 不难会碰到一些问题。记录一下，帮助各位开发者。有问题欢迎指出和讨论。

 

修改 GGEditor 流程图默认连接线

解决办法：

参考一下配置：

<Flow graph={{ edgeDefaultShape: 'flow-polyline-round' }} />

 

ant design pro 里使用GGEditor FlowPage, 样式无法加载

解决办法：

1.请检查您的样式文件是否引入。

2.修改一下，核对一下，您的less样式名称是什么，然后JS模块中的className引用方式。

 

修改默认的svg图片

解决办法：把已经写好的svg，如图下设置

 

_Draven
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 10
    评论
专栏目录
Ant design pro-项目探究（6）GGEditor图形编辑器数据保存
weixin_45229417的博客
03-04 1298
GGEditor图形编辑器数据保存
antd-visual-editor:ant-design 组件库实时可视化编辑器，实时生成 react 代码
05-24
一个 可视化实时渲染的 ant-design 页面搭建工具 此项目是上古项目，代码基本很难维护，现在发布出来仅供参考思路，感兴趣的可以根据原理重构一版，实现一个更完备的可视化编辑 友情提醒：不建议在团队内投入大量精力做类似的事情（企图一步到位改变开发现状），与行业里用 AI 切页面类似，尽量作为玩具把玩一下即可。 线上实例 托管在 github，第一次加载会比较慢 截图： 运行 npm run build; npm run start; # （已修复）因为我不太懂 webpack ，不太会配置，这个项目修改代码后实时生效还有问题。。求 pr 特性 可视化编辑，同时实时生成结果代码，还可以单独预览 丰富的数据编辑能力，可以编辑组件的二维属性 组件可嵌套 自适应布局 除了 antd 的组件，还有一些原生 html 元素可使用 原理解析 1.如何实现实时编辑 第一步，抽象整个可视化工作台的数据表
【Ant Design Pro】快速上手
小秀的博客
07-25 603
插件都需要兼容 umi4 才能用，插件 api 有变化，没兼容的是用不了的。也减少了 webpack 升级导致的问题。app.tsx 是项目全局入口文件（在首次访问页面执行 / 刷新页面），定义了整个项目使用的公共数据，getInitialState 方法定义了项目初始化需要执行的操作。这里 start 模式使用了前端项目内的 mock 数据，而 start:dev 没有使用mock 数据，需要真实的后端接口。这是最新版的 umi，不同于上个版本，上一个版本应该是 透传的 umi-request。
标题：打造极致编辑体验：Ant Design ProEditor
gitblog_00864的博客
08-06 664
标题：打造极致编辑体验：Ant Design ProEditor pro-editor????️ The Ultimate Editor UI Framework and Components项目地址:https://gitcode.com/gh_mirrors/pr/pro-editor 项目介绍 欢迎来到【Ant Design ProEditor】的世界，这是一个先进的前端组件库，专为构建高效...
Ant Design Components Editor 安装与使用指南
最新发布
gitblog_01160的博客
08-07 717
Ant Design Components Editor 安装与使用指南 components-editor项目地址:https://gitcode.com/gh_mirrors/co/components-editor 项目介绍 Ant Design Components Editor 是一款专门为支持重型组件设计而开发的工具。它提供了一个直观且功能丰富的组件配置平台，旨在优化高级可视化组件的...
GGEditor：基于G6和React的可视化图形编辑器
02-05
|简体中文 GG编辑器 基于和的可视化图编辑器 安装 npm npm install gg-editor --save 嗯 < script src =" https://unpkg.com/gg-editor@${version}/dist/index.js " > </ script > 使用 流程图 import GGEditor , { Flow } from ' gg-editor ' ; const data = { nodes : [ { id : ' 0 ' , label : ' Node ' , x : 55 ,
antd Pro的GGeditor使用小结
weixin_39713093的博客
12-17 606
antd Pro GGeditor 流程图 曲线
ant-design-pro-cli:Ant Design Pro的cli工具
05-30
npm i @ant-design/pro-cli # or yarn add @ant-design/pro-cli Commands screenshot 对区块进行截图 i18n-remove 从项目中移除国际化 fetch-blocks 下载 pro 所有的官方区块 Options for the screenshot command --...
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
常见问题解答： ： 总览 环境和依赖 节点 纱 网络包 埃斯林特 @ vue / cli〜3 -Vue的蚂蚁设计 图片编辑 -AntV G2 Viser -Vue的Antv / G2 注意：建议使用软件包管理，此项目的演示站点（yarn.lock）加载的版本...
ant-design-vue-pro-master.zip
08-20
《Ant Design Vue Pro Master源码解析与多页签实现》 Ant Design Vue Pro Master是一个基于Ant Design Vue的前端项目框架，提供了丰富的UI组件和优化的开发体验。此压缩包包含了项目的一个特定版本，该版本特别支持...
pro-table:Ant像Pro一样使用Ant Design Table！
05-28
ant-design/pro-table 将会迁移至 ant-design/pro-components 仓库进行后续的维护，访问 了解更多。此变更不影响继续使用 @ant-design/pro-table 这个 npm 包名安装使用此组件。@ant-design/pro-table:trophy: Use ...
GGEditor基于G6和React的可视化图编辑器可用于画流程图思维导图
08-10
GGEditor 基于 G6 和 React 的可视化图编辑器，可用于画流程图 思维导图
ant-design-pro-6-package-lock
08-04
ant-design-pro-6-package-lock
React 流程图的一种解决方案 GGEditor
热门推荐
王为仁的博客
10-14 2万+
HTML 引入 既可以通过将脚本下载到本地也可以直接引入在线资源； <!-- 引入在线资源 --> <script src="https://unpkg.com/@antv/g6/build/g6.js"></script> <!-- 引入本地脚本 --> <script src="./g6.js"></script&g...
使用Ant Design Pro，一个企业级开箱即用的中后台前端
m0_37136491的博客
08-30 1万+
目录 * 此文仅是个人自学理解的学习笔记，若有不对之处敬请指导更正，谢谢！ * 目录 Ant Design Pro 了解 安装使用 方法一：clone 方法二： ant-design-pro-cli 运用 新手常遇到的问题 实战代码Download 快捷链接 Ant Design Pro 了解 Ant Design Pro 是一个企业级开箱即用的中后台前...
vue ant design 如何使用 vue-quill-editor
07-28
要使用 Vue-Quill-Editor 在 Vue 中结合 Ant Design，你可以按照以下步骤操作： 1. 首先，通过 npm 或 yarn 安装 Vue-Quill-Editor： ``` npm install vue-quill-editor ``` 2. 在你的 Vue 组件中，引入 Vue-Quill-Editor 和 Ant Design 的样式文件： ```javascript import 'quill/dist/quill.snow.css'; import { Form, Input, Button } from 'ant-design-vue'; import { VueQuillEditor } from 'vue-quill-editor'; ``` 3. 在 Vue 组件的 `components` 属性中注册 VueQuillEditor 组件： ```javascript components: { VueQuillEditor, // 其他组件 }, ``` 4. 在模板中使用 VueQuillEditor，可以通过 `v-model` 双向绑定实现富文本编辑器的内容获取和设置： ```html <template> <div> <vue-quill-editor v-model="content" /> <!--其他表单元素--> </div> </template> ``` 5. 如果需要将富文本编辑器嵌入到 Ant Design 的表单中，可以使用 `Form.Item` 组件包裹： ```html <template> <div> <a-form :form="form"> <a-form-item label="内容"> <vue-quill-editor v-model="content" /> </a-form-item> <!--其他表单元素--> <a-form-item> <a-button type="primary" @click="submitForm">提交</a-button> </a-form-item> </a-form> </div> </template> ``` 6. 在 Vue 组件的 `data` 属性中定义 `content` 数据，并在需要提交表单时获取 `content` 的值： ```javascript data() { return { content: '', // 其他表单数据 }; }, methods: { submitForm() { const formData = { content: this.content, // 其他表单数据 }; console.log(formData); // 提交表单逻辑 }, }, ``` 这样，你就可以在 Vue 中使用 Vue-Quill-Editor 结合 Ant Design 实现富文本编辑器了。记得根据实际需要进行样式和功能的定制。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_Draven

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值