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.

Features ​

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

TODO ​

• 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