2.2 KiB

Raw Blame History Unescape Escape

Getting Started

WYSIWYG rich text editor.

Benefit from the complete self-implementation of cursor and text layout. The underlying rendering can also be rendered by svg, See code：feature/svg; Or complete pdf drawing with pdfjs,See code：feature/pdf.

::: warning The official only provides the editor core layer npm package, the menu bar or other external tools can refer to the document extension, or directly refer the implementation of official, See details demo. :::

Features

Rich text operations (Undo, Redo, Font, Size, Bold, Italic, Superscript, Alignment, Title, List, ...)
Insert elements (Table, Image, Link, Code Block, Page Break, Math Formula, Date Picker, content Block, ...)
Print (Based on canvas to picture, pdf drawing)
Controls (Radio, Text, Checkbox)
Right-click menu (Internal, Custom)
Shortcut keys (Internal, Custom)
Text, Element, Control drag and drop
Header, Footer, Page Number
Page Margin
Watermark
Pagination

TODO

Improve title and list functions
Computational performance
Control rule
Table paging
Out of the box version for vue, react and other frameworks

Step. 1: Download NPM Package

npm i @hufe921/canvas-editor --save

Step. 2: Prepare Container

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

Step. 3: Instantiate Editor

Examples that only the body content is included

import Editor from '@hufe921/canvas-editor'

new Editor(
  document.querySelector('.canvas-editor'),
  [
    {
      value: 'Hello World'
    }
  ],
  {}
)

Examples that contain body, header, footer content

import Editor from '@hufe921/canvas-editor'

new Editor(
  document.querySelector('.canvas-editor'),
  {
    header: [
      {
        value: 'Header',
        rowFlex: RowFlex.CENTER
      }
    ],
    main: [
      {
        value: 'Hello World'
      }
    ],
    footer: [
      {
        value: 'canvas-editor',
        size: 12
      }
    ]
  },
  {}
)

Step. 4: Configuration Editor

See the next section for details

2.2 KiB Raw Blame History Unescape Escape