DOCSEARCHbyAlgolia
Submit Docs

Canvas Editor Plugin

website·Indexed 31 days ago

https://hufe.club/canvas-editor-docs/

A collection of plugins for canvas-editor (version 0.9.0) that extends its functionality. Available plugins include DOCX and Markdown import/export, LaTeX formulas via KaTeX, ECharts-based charts, spellcheck, autosave, find and replace, and specialized tools like temperature charts and OFD document support. Requires Node.js 14.

Tokens
64.5K
Snippets
431
Records
498
Agent score
52%

What's inside Canvas Editor Plugin

  1. Overview of Canvas Editor Macros

    Macros are used to record and replay a set of command calls. There are two types of macros:

    • Recorded Macros (RECORDED): Created using startRecording and stopRecording. They capture every execute* command and can be serialized to JSON for persistence.
    • Script Macros (SCRIPT): Registered via register as JavaScript functions. They support arbitrary logic, including conditions, loops, asynchronous calls, and data retrieval.

  2. Overview of canvas-editor features

    canvas-editor is a WYSIWYG rich text editor with a custom implementation of cursors and text layout. It supports SVG rendering and PDF drawing (via pdfjs). Key capabilities include:

    • Rich Text: Undo/redo, formatting (font, size, bold, italic, etc.), alignment, line height, and indentation.
    • Elements: Tables (with merge/split), images, hyperlinks, LaTeX formulas, date pickers, and content blocks.
    • Controls: Text, number, dropdown, radio/checkbox groups, and date controls with support for placeholders, nesting, and cascading expressions.
    • Document Management: Page/continuous modes, headers, footers, page numbers, watermarks, and automatic table of contents.
    • Advanced Tools: Track changes (revisions), Macros (recording and playback), annotations, and search/replace.
    • Modes: Edit, Clean, Read-only, Form, and Print.
    • Extensibility: Built-in i18n (CN/EN), customizable right-click menus, and a plugin ecosystem (e.g., Word/Excel import/export).

  3. Overview of canvas-editor capabilities

    canvas-editor is a Word-like document editor organized into six functional layers: Text Editing, Content Elements, Advanced, Page Setup, Extensibility, and API. It supports 19 element types, 6 form control types, 8 editor modes, over 154 command APIs, 16+ events, and 20+ official plugins.

  4. Overview of canvas-editor Macros

    Macros in canvas-editor record and replay sequences of command invocations. There are two supported types:

    • Recorded macros: Created using startRecording and stopRecording. These capture execute* calls as steps and can be serialized to JSON.
    • Script macros: Registered via register using a JavaScript function. These support arbitrary logic, including conditions, loops, asynchronous operations, and data reading.

  5. Overview of canvas-editor capabilities

    canvas-editor provides a full suite of 'Word-like' document editing capabilities organized into six functional layers: Text Editing → Content Elements → Advanced Features → Page Settings → Extensibility → API. Key statistics include 19 element types, 6 form controls, 8 editing modes, 154+ command APIs, 16+ events, and 20+ official plugins.

  6. Available plugins for the Canvas Editor

    The Canvas Editor plugin library provides a variety of functional extensions including document import/export (DOCX, OFD, Excel, Markdown), content generation (1D/2D Barcodes, LaTeX Formulas, Charts, Diagrams), and editor enhancements (Code Block Highlighting, Floating Toolbar, Spellcheck, Find and Replace, @Mention, Comments, and Suggestions). It also includes utility tools like Case Conversion, Special Character Selection, and an Autosave feature.

  7. Get layout and page metrics

    These methods provide information about the physical layout of the document, such as margins, column configurations, and available space on pages.
    // Get page margins [top, right, bottom, left]
const [top, right, bottom, left] = instance.command.getPaperMargin();

// Get current column configuration (returns null if disabled)
const columns = instance.command.getColumns();

// Get remaining available height on the last page
const remainingHeight = instance.command.getRemainingContentHeight();

// Compute the height of a specific list of elements
const height = instance.command.computeElementListHeight(elementList);

  8. Canvas Editor DevTools feature overview

    Canvas Editor DevTools provides three primary debugging utilities:

    1. Element Tree Inspector: Real-time view of the document structure (main content, header, footer) with the ability to inspect styles and properties of specific elements.
    2. Event Monitor: Real-time logging of content changes, selection style changes, page events, control events, image events, and mouse events, with category filtering and auto-scroll.
    3. Configuration Panel: Interface to view and modify editor configurations including appearance, watermarks, page numbers, table styles, control styles, and cursor options.

  9. canvas-editor feature overview

    canvas-editor is a WYSIWYG rich text editor with a self-implemented cursor and text layout system. Key capabilities include:

    • Rich Text: Undo/Redo, font styling (Bold, Italic, Underline, etc.), alignment, and line height.
    • Elements: Tables (with merge/split and cross-page pagination), images, hyperlinks, LaTeX formulas, and page breaks.
    • Form Controls: Text, Number, Select, Radio/Checkbox groups, and Date pickers with support for nesting and placeholders.
    • Advanced Logic: Cascade Expressions (dynamic visibility/editability based on values) and Macro recording/replay.
    • Document Management: Track changes, comments, auto-generated catalogs, and watermarks.
    • Modes: Supports Edit, Clean, Readonly, Form, and Print modes; Paging and Continuity page modes.
    • Export/Print: Canvas-to-picture and PDF drawing.
    • Extensibility: Plugin ecosystem for Word/Excel import-export, spellcheck, and more.

  10. Warn users about unsaved changes before page unload

    Use the executeHasUnsavedChanges command within a beforeunload event listener to prevent users from accidentally leaving the page with unsaved work.
    window.addEventListener('beforeunload', evt => {
  if (instance.command.executeHasUnsavedChanges()) {
    evt.preventDefault()
  }
})

  11. Manage rich text formatting and text editing

    canvas-editor supports comprehensive character-level and inline text editing, including:

    • Typography: Font family, size (with min/max limits), color, and background highlighting.
    • Styling: Bold, italic, underline, strikethrough (with styles like solid, double, dotted, dashed, wavy), superscript, and subscript.
    • Paragraphs: Alignment (left, center, right, justify, distribute), line spacing (rowMargin), first-line indent, and Tab indentation.
    • Layout: Line break rules (break-all / break-word) and H1-H6 headings with per-level font sizes.
    • Lists: Ordered, unordered (solid/hollow circle, square), and checkbox lists with style inheritance.
    • Operations: Clipboard (cut, copy, paste, select all), undo/redo history (configurable limit), format painter, and text cleanup tools (delete empty lines/leading spaces).