Skip to content

Latest commit

 

History

History
39 lines (31 loc) · 2.71 KB

API.md

File metadata and controls

39 lines (31 loc) · 2.71 KB
vue-document-editor

API

Props

  • content: Array (required)

Contains the initial document content. Each array item is a new set of pages containing the item. An item can either be an HTML string or this object { template: YourComponent, props: {} } for interactive templates (see Demo.vue and InvoiceTemplate.vue for an example). If an HTML content is too large, it will be split over multiple pages. On the contrary, interactive templates take one full page and any overflow is hidden. The content you provide should be synced to user modifications using the .sync modifier.

  • display: ["auto"(default), "horizontal", "vertical"] - Display mode for the pages
  • page_format_mm: [width, height] (default:[210, 297]) - Page format in mm
  • page_margins: String (default:"10mm 15mm") - Page margins in CSS format
  • zoom: Number (default:1.0)- Display zoom. Only acts on the screen display
  • editable: Boolean (default:true) - Used to disable document modification

Data

You can query data variables that contain the current state information about:

  • current_text_style: CSSStyleDeclaration| false - List of every CSS property at caret position, overloaded with these 3 properties:
    • textDecorationStack: Array - List of all text-decoration applied at caret position
    • headerLevel: Number - Maximum header level (<h1>, <h2>, ...) at caret position
    • isList: Boolean - If one parent has its display set to list-item at caret position

In order to get this reactive data from the parent component, you can set ref= "editor" to the vue-document-editor instance and query this.$refs.editor.current_text_style after the component is mounted. See Demo.vue for an example.

Styling

You can override these CSS variables somewhere in your project (it will not affect the print):

:root {
  --page-background: unset; /* Pages background */
  --page-box-shadow: unset; /* Pages box-shadow */
  --page-border: unset; /* Pages border */
  --page-border-radius: unset; /* Pages border-radius */
}

The default font style of the document is set by the parent element.

💬 If you need some variables that are missing, edit the stylesheet then submit a PR, or overwrite styles using !important