Canvas-Editor 富文本编辑器入门指南

韦元歌Fedora

于 2025-06-10 09:00:37 发布

阅读量461

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00574/article/details/148548683

Canvas-Editor 富文本编辑器入门指南

canvas-editor rich text editor by canvas/svg 项目地址: https://gitcode.com/gh_mirrors/ca/canvas-editor

项目概述

Canvas-Editor 是一款基于 Canvas 实现的所见即所得富文本编辑器，其核心特点是完全自主实现了光标控制和文字排版系统。该项目采用模块化设计，提供了丰富的文本编辑功能和扩展能力。

核心特性

1. 渲染引擎多样性

默认采用 Canvas 渲染
可选 SVG 渲染模式（实验性功能）
支持 PDF 渲染输出（基于 pdfjs）

2. 丰富的编辑功能

基础文本操作：支持字体、字号、加粗、斜体、下划线等常见格式设置
高级排版：提供标题、列表、对齐方式、上下标等专业排版功能
元素插入：可插入表格、图片、代码块、数学公式等复杂内容
文档结构：支持页眉页脚、页码、分页、目录等完整文档功能

3. 扩展能力

支持自定义右键菜单
可配置快捷键
提供拖拽功能支持
插件系统扩展

快速开始

环境准备

首先需要安装核心包：

npm install @hufe921/canvas-editor --save

基础使用

准备HTML容器

<div class="canvas-editor-container"></div>

初始化编辑器

import Editor from '@hufe921/canvas-editor'

// 简单初始化
const editor = new Editor(
  document.querySelector('.canvas-editor-container'),
  [
    {
      value: '初始文本内容'
    }
  ],
  {}
)

完整文档初始化

import Editor, { RowFlex } from '@hufe921/canvas-editor'

const editor = new Editor(
  document.querySelector('.canvas-editor-container'),
  {
    header: [
      {
        value: '页眉内容',
        rowFlex: RowFlex.CENTER // 居中对齐
      }
    ],
    main: [
      {
        value: '正文内容',
        size: 16 // 字号设置
      }
    ],
    footer: [
      {
        value: '页脚内容',
        size: 12
      }
    ]
  },
  {
    // 编辑器配置项
  }
)