web在线编辑器-web在线编辑器 基于 那几个api的开放 收藏 0

基于vue+ts实现的svg可视化web组态编辑器

真正的大师,永远都怀着一颗学徒的心！

一、项目简介

今天说的这个软件是一款基于vue+ts实现的svg可视化web组态编辑器。

二、实现功能

• 电力系统模板

• 水务系统模板

• 预览模式/编辑模式

• 下载保存数据

• 下载svg数据

• 组件(常规组件、绘制组件、图表组件)

三、技术选型

• svg

• vue

• html

• css

• js

四、界面展示五、源码地址

私信回复：组态

nunustudio 基于threejs的web3d开源编辑器

为您的网页创建交互式体验！

设计、编辑、编码，尽在一处！

熟悉的用户界面，类似于您已经知道的用户界面。

由 three.js 提供支持的图形，具有动态光照、阴影、后处理等。

由 cannon.js 提供支持的全功能 3D 物理引擎

易于学习的语言，熟悉网络和游戏开发人员。

想要二维？没问题！只需单击一个按钮，即可在 2D 和 3D 之间切换。

为移动和桌面平台上的网络虚拟现实做好准备。

类似于 3D 设计工具中的图形材料编辑器。

由 SPE 提供支持的 GPU 加速粒子系统。

将文件拖放到编辑器中，它就可以工作。

使用 Esoteric 脊椎动画工具创建 2D 动画并将它们导入到 nunuStudio。

音频引擎建立在网络音频上 API 之上，支持位置音频。

nunuStudio 建立在 nwjs 之上，它适用于 windows、linux 和 OS X。

nunuStudio 基于物理的渲染主屏幕演示。

经典乒乓球游戏的 3D 娱乐。

手游小鸟的克隆。

虚拟现实过山车。

Spineboy 脊柱动画示例

门户克隆示例

使用 GLTF 损坏头盔模型的基于物理的渲染演示。

使用 WebRTC 的相机捕获示例。

与跳舞的冲锋队一起向星球大战致敬！

3D 星球绘制示例，鼠标绘制星球。

由 Rick Hoppmann 制作的带有位置音频的小体素岛模型。

使用实例化网格和后处理方式进行处理 Boids 模拟。

WebXR 在单个应用程序中支持虚拟现实和增强现实。

https://www.nunustudio.org/

web端强大的富文本编辑器Flowmix/Docx ：V1.3.5版本，全面升级！

嗨, 大家好, 我是徐小夕.

最近一直在研究多模态文档引擎, 最近2周对 flowmix/docx文档编辑器又进行了一波功能迭代, 在迭代的过程中也学到很多新的技术, 接下来就和大家一起分享一下, 如果你恰好也在研究类似的产品, 相信会有很多收获.

先说一下1.3.5版本迭代的内容:

• 编辑器支持AI侧边栏, 可以轻松集成各种AI模型实现内容生成
• 文档支持划词评论功能
• 文档支持一键导入Docx文件
• 支持实时获取当前光标在文档中的位置
• 优化文档元素插入文档的顺序
• 新增高级思维导图组件
• 内联工具条UI优化

后面还会持续迭代更多功能, 比如多人协同, 一键生成PPT等, 如果大家有好的建议也可以随时在评论区反馈.

接下来我会具体介绍一下更新的功能和技术实现, 给大家一个参考.

编辑器之前虽然支持了AI问答组件, 但是为了更好的挖掘文的价值, 我集成了AI侧边栏, 大家可以轻松集成市面上的AI大模型, 来实现AI辅助创作.

我们可以轻松的点击右下角的AI按钮, 打开侧边栏和AI对话:

对话组件我采用的是开源的方案 @ant-design/pro-chat , 大家有其他好的插件也可以分享一下哈~

划词评论我在之前的文章中有详细的分析, 感兴趣的可以参考一下:

市面上大多数文档编辑器的【划线评论】功能，是如何实现的？

文档一键导入docx文件功能可以高效的帮助我们解析docx的内容, 并在flowmix/docx中快速编辑. 接下来给大家看看原始的word文件:

在第一个版本中其实也实现了docx文件的导入, 但是之前对图片, 表格这些docx特有的格式无法支持, 最近研究出来了一个方案, 可以很好的支持docx文件中的表格, 图片等, 并一键转化为flowmix/docx 中支持的数据结构.

在实现Docx解析方案中我采用了DOMParser API, 这里我给大家介绍一下这个兼容性良好且功能强大的浏览器API.

DOMParser 可以将存储在字符串中的 XML 或 HTML 源代码解析为一个 DOM Document。

我的实现思路是将 Docx 文件解析为 html 字符串, 在基于DOMParser 将html 字符串转化为Dom, 最后对Dom进行分割, 输出 flowmix/docx 支持的json结构.

将 html 字符串转化为 dom 的案例如下:

这样, 我们就能通过节点遍历的方式一键将dom转化为json结构了:

目前 flowmix/docx 已经支持解析的docx格式有:

• 标题(h1-h6)
• 文本段落(p)
• 序号(ul, lo)
• 图片
• 表格

后续还会支持更多docx元素, 大家感兴趣的可以参考一下这个方案.

实时获取光标位置的方案主要是为了实现多人协同的光标位置确认, 这里我也基本实现了. 主要是用到了 window.getSelection API, 后续我会详细和大家分享它的应用场景. 实现代码如下:

这个问题主要是为了解决文档编辑器当失去焦点时, 仍能争取插入到文档光标最近停留的位置. 之前一直用了“比较笨”的方案, 最近研究了一下,终于用 window.getSelection 实现了.(其实也是用的上述获取光标位置的方式实现的)

思维导图的实现方式我也在之前文章中有详细的分享, 大家感兴趣可以参考我之前的文章.

内联工具条我最近对样式做了进一步统一和优化.

最近我们也在花时间做一款文档管理类Saas系统, 底层基于Flowmix/Docx 多模态文档引擎, 这里简单和大家分享一下:

每个月我们都会根据用户的需求和规划的迭代计划持续迭代.

这个月除了会上线文档Saas版1.0之外, 在下个月带给大家更强大的编辑器体验:

• 支持文档图层面板
• 支持高级可视化组件
• 支持文档AI工作流
• 文档支持演示模式
• 支持多人协同编辑
• 支持一键生成PPT

当然从体验上来讲, 文档还有很多优化的空间, 这块我们会持续优化和迭代, 并结合业界最佳体验实践, 将文档搭建能力发挥出最大的价值.

如果你有好的想法和建议, 也欢迎随时留言区交流讨论~

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com