Requested Changes for Editor Knossos Implementation (#129 )

* placeholder

* max length & placeholder

* Accept editor comment conflict

* integrate requested features

* null check for ref

* Change prompt for image upload

* change filter for proper input blocking

* Add spoiler button

* change url of helper link

* shallow resource link style

* resource link inherit site style

* detach preview styling from markdown-body style

* remove sizing dependance on global styles

* Bump 0.6.5

2023-10-30 16:59:43 -07:00

2.0 KiB

Raw Blame History

Markdown Editor

The Markdown editor allows for easy formatting of Markdown text whether the user is familiar with Markdown or not. It includes standard shortcuts such as CTRL+B for bold, CTRL+I for italic, and more.

Full editor

<script setup>
import { ref } from "vue";
const description = ref(null)
</script>

<MarkdownEditor v-model="description" />

With options

<script setup>
import { ref } from "vue";
const description = ref(null)
</script>

<MarkdownEditor v-model="description" placeholder="Enter a description" max-length="800" max-height="400" />

With image upload

<script setup lang="ts">
import { ref } from "vue";
const description = ref(null)

// Return a URL to the image for the editor to consume
const onImageUpload = (file: File): string => {
  // Upload the file to your server and return a URL
  // This example url will not work bc of proxy

  // If the upload fails, throw an error and it will show as
  // a Validation Error to the user
  return URL.createObjectURL(file).replace("blob:", "");
};
</script>

<MarkdownEditor v-model="description" :on-image-upload="onImageUpload" />

Without heading buttons

<script setup>
import { ref } from "vue";
const description = ref(null)
</script>

<MarkdownEditor v-model="description" :heading-buttons="false" />

2.0 KiB Raw Blame History