Getting Started

Installation

Install @wysimark/vue using

npm i --save @wysimark/vue

or

yarn add @wysimark/vue

or

pnpm add @wysimark/vue

Usage

Basic Usage

You can import the Wysimark component from @wysimark/vue and use it in your Vue template.

Here's an example followed by an explanation of what's going on.

<template>
  <wysimark v-model="markdown" :height="320" />
</template>

<script>
import Wysimark from "@wysimark/vue";
export default {
  name: "App",
  components: { Wysimark },
  setup() {
    const markdown = ref<string>("# Hello World\n\nLorem ipsum dolar...");
    return {
      markdown,
    };
  },
};
</script>

In the script portion of the .vue file...

• First, import and expose the Wysimark component

• Next, create a reactive reference with the ref method and return it from the setup method. This makes it available in the <template>

• Finally, set the v-model attribute on the <wysimark> component to the reactive reference.

Basic Usage with File Uploads

To support file attachment uploads, image uploads and server-side image resizing:

• Get a free upload API key and generate an authToken at https://www.portive.com. You'll need to create a free account which includes 1 GB of free upload storage. It takes under 3 minutes to get an auth token from start to finish.
• Pass the auth-token to the Wysimark component.

<template>
  <wysimark v-model="markdown" :height="320" auth-token="AUTH_TOKEN_GOES_HERE"/>
</template>

<script>
import Wysimark from "@wysimark/vue";
export default {
  name: "App",
  components: { Wysimark },
  setup() {
    const markdown = ref<string>("# Hello World\n\nLorem ipsum dolar...");
    return {
      markdown,
    };
  },
};
</script>

Wysimark Component

The Wysimark component is used to render the Wysimark editor.

Wysimark Component Usage

You can use it like this:

<template>
  <wysimark v-model="markdown" :height="320" />
</template>

<script>
import Wysimark from "@wysimark/vue";
export default {
  name: "App",
  components: { Wysimark },
  setup() {
    const markdown = ref<string>("# Hello World\n\nLorem ipsum dolar...");
    return {
      markdown,
    };
  },
};
</script>

Wysimark Props

The Wysimark Component has these props:

const props = {
  modelValue: { type: String, required: true }, // model-value
  authToken: { type: String, required: false }, // auth-token
  height: { type: Number, required: false }, // height
  minHeight: { type: Number, required: false }, // min-height
  maxHeight: { type: Number, required: false }, // max-height
  onChange: { type: Function, required: false }, // on-change
  throttleInMs: { type: Number, required: false }, // throttle-in-ms
  placeholder: { type: String, required: false }, // placeholder
}

model-value

• Type: String
• Required: true
• Description: This prop is a string that represents the value of the model for this component. The string should be in Markdown format. The component will parse this Markdown string and render the resulting HTML as an editable rich text div.

Example:

To use the model-value prop, you can bind a data property to it like this:

<wysimark model-value="# Hello World" />

You can also use it with v-model like this:

<wysimark v-model="markdown" />

Where markdown is a reactive reference.

auth-token

• Type: String
• Required: false
• Description: This prop is used to pass a Portive auth token to the component which enables image and attachment uploading.

height

• Type: Number
• Required: false
• Description: This prop sets the height of the component. It's an optional prop, and if not provided, the component will shrink and grow to fit its content. You can use this prop to set a fixed height for the component. You can also set the min-height and max-height separately using the respective props.

min-height

• Type: Number
• Required: false
• Description: This prop sets the minimum height of the component. It's optional, and if not provided, the component will not have a minimum height restriction. This is useful to prevent the editor from collapsing when the content is empty.

max-height

• Type: Number
• Required: false
• Description: This prop sets the maximum height of the component. It's optional, and if not provided, the component will not have a maximum height restriction. This is useful to prevent the editor from growing too much.

on-change

• Type: Function
• Required: false
• Argument: markdown (String) - The markdown content
• Description: This prop allows you to provide a custom function to be executed when the model-value (i.e. the Markdown content) changes. Note that this function will be called by default once every 1000ms. You can change this interval by setting the throttle-in-ms prop.

throttle-in-ms

• Type: Number
• Required: false
• Description: This prop allows you to set the interval (in milliseconds) at which the on-change function is called. The default value is 1000 (i.e. 1 second).

placeholder

• Type: String
• Required: false
• Description: This prop allows you to set a placeholder text for the editor. The placeholder text will be displayed when the editor is empty.

Wysimark Events

The Wysimark component exposes the update:model-value event.

update:model-value

• Payload: String
• Description: The @update:model-value event is emitted by the component when there is a need to update the value of its modelValue prop. This event supports two-way binding using v-model. Note that this event is emitted by default once every 1000ms. You can change this interval by setting the throttle-in-ms prop.

Wysimark Editor Object

getMarkdown() => String

This method returns the current Markdown in the editor.

NOTE: If there are any images or files that are not finished uploading, they will not be returned as part of the Markdown.

setMarkdown(markdown: string) => void

This method allows you to set the Markdown in the editor. It will overwrite any existing Markdown in the editor.