zhihui-editor

面向开发者的在线图形编辑器

基于 fabric.js 和 React 开发的图形编辑器，用于制作您自己的类似画布设计编辑器的 JS 框架

示例 | 文档

订阅我们 是支持我们最大的动力

特征

• 开箱即用 - 简单的配置即可获得功能齐全的图像编辑器
• 自定义样式 - 高度自定义扩展，可个性化为自己喜爱的样式
• 设计资源 - 10万+优质模板、创意素材随心选
• 多种格式导出 - 导出PDF、PNG、JPG、JSON等多种格式
• 高可扩展 - 所有对画布的工具组件都可自定义扩展，高度个性化定制，匹配各种场景
• 结合AI - 结合各种AI能力，来提效编辑器功能的创新型，提高生产效率

快速开始

在线尝试 ️

本地初始化项目

安装 Node.js >=18 并运行以下命令：

npm install zhihui-editor

初始化演示应用程序（基于 React 框架）：

// css导入
import 'zhihui-editor/lib/zhihui-editor.min.css';

import { WorkspaceWrap, ZhihuiEditorContainer, SidePanelWrap } from 'zhihui-editor';
import { createStore } from 'zhihui-editor/lib/model/store';
import { SidePanel } from 'zhihui-editor/lib/side-panel';
import { Workspace } from 'zhihui-editor/lib/canvas/workspace';
import { Toolbar } from 'zhihui-editor/lib/toolbar/toolbar';
import { ZoomButtons } from 'zhihui-editor/lib/toolbar/zoomButtons';

// 设置语言的方法
import { setTranslations } from 'zhihui-editor/lib/config';

// 默认提供两种语言包
import en_US from 'zhihui-editor/lib/locale/enUS';
import zh_CN from 'zhihui-editor/lib/locale/zhCN';

// 控制工程的辅助工具
import { createProject } from 'zhihui-editor/lib/project';

function App() {
  const store = createStore({});
  const project = createProject({ store });

  const init = async () => {
    // 加载字体资源库
    await project.getGlobalFont();
    // 加载模板
    project.firstLoad();
  };

  useEffect(() => {
    init();
  }, []);

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ZhihuiEditorContainer>
        <SidePanelWrap>
          <SidePanel store={store} />
        </SidePanelWrap>
        <WorkspaceWrap>
          <Toolbar store={store} />
          <Workspace store={store} />
          <ZoomButtons store={store} />
        </WorkspaceWrap>
      </ZhihuiEditorContainer>
    </div>
  );
}

核心技术栈

• React - 用于渲染用户界面 (UI) 的 JavaScript 库
• Rollup - 用于 JavaScript 的模块打包工具
• Tailwind CSS - 功能类优先的 CSS 框架，它提供了一套预先定义的类，提供了构建组件的原子类
• Fabric.js - 强大而简单的Javascript HTML5画布库
• IconPack - 图标库
• Mobx - 状态管理库

License

Licensed under the MIT License.