log(text); }; return ( <DocumentEditor toolbar={toolbarItem} on_change={handleChange} on_select={handleSelectedText} value='Hello world' /> ); }; import { DocumentEditorWebComponent } from "@mindfiredigital/react-canvas-editor"; const toolbarItem: any = { bold: true, italic: true,...
import { DocumentEditor } from "@mindfiredigital/react-canvas-editor"; import React from "react"; export const App = () => { const toolbarItem: any = { bold: true, italic: true, underline: true, undo: true, redo: true, image: true, }; const handleChange = (data) => { console...
结合Vue 或 React 等前端框架: 如果你的项目使用了 Vue、React 等前端框架,你可以将 Canvas-Editor 集成到这些框架中,并利用框架的状态管理功能来实现动态数据更新。 例如,在 Vue 中,你可以在组件的 data 函数中定义编辑器的内容,并在数据变化时通过 setContent 方法更新编辑器。 vue <template> <di...
React version of canvas editor. Contribute to mindfiredigital/react-canvas-editor development by creating an account on GitHub.
基于 TS + Canvas 开发的【大转盘 / 九宫格 / 老虎机】抽奖插件， 一套源码适配多端框架 JS / Vue / React / Taro / UniApp / 微信小程序等， 奖品 / 文字 / 图片 / 颜色 / 按钮均可配置，支持同步 / 异步抽奖， 概率前 / 后端可控， 自动根据 dpr 调整清晰度适配移动端。Excalidraw 官网： https...
canvas-editor是一个基于canvas/svg的富文本编辑器,类似于 word。其具有以下特点: 所见即所得:类word可分页,所见即所得 轻量的数据结构:一段JSON即可呈现复杂样式 丰富的功能:支持常见富文本操作、表格、水印、控件、公式等 使用方便:官方发布核心npm包,菜单栏、工具栏可自行维护 ...
canvas-editor 是一个基于 canvas/svg 的富文本编辑器 Luckysheet 是一个纯前端基于 Canvas 的类似 excel 的在线表格 canvas-confetti 是一个基于 Canvas 的库,用于在 Web 页面中实现炫酷的彩色纸屑动画效果 x-spreadsheet 是一个基于 Web(es6) canvas 构建的轻量级 Excel 开发库 ...
最终效果抢先看:https://wanglin2.github.io/canvas-editor-demo/。 基本数据结构 首先要说明我们渲染的数据不是html字符串,而是结构化的json数据,为了简单起见,暂时只支持文本,完整的结构如下: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 [{value:'理',// 文字内容color:'#000',// 文字颜色size:16...
Canvas-Editor是一个基于Canvas和SVG的富文本编辑器,它提供了丰富的文本编辑功能,并支持通过Canvas和SVG进行渲染。 以下是对Canvas-Editor的详细介绍: 一、主要特点 高性能:利用Canvas和SVG进行图形和矢量图形的渲染,提供高性能的绘图能力。 可扩展性:Canvas-Editor是一个开源项目,支持通过插件机制扩展编辑器的功能,如...
CanvasEditor │── packages │ ├── core │ ├── delta │ ├── plugin │ ├── react │ └── utils ├── package.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml └── tsconfig.json packages/core: 编辑器核心引擎模块,对于 剪贴板操作、事件管理、状态管理、History模块、...