fo-markdown-note

fo-markdown-note Component for Vue.js

fo-markdown-note is a Vue.js component that provides a simple Markdown editor that can be included in your Vue.js project.

fo-markdown-note is a thin Vue.js wrapper around the SimpleMDE Markdown editor JavaScript control. SimpleMDE can be found at:

• https://simplemde.com/
• https://github.com/sparksuite/simplemde-markdown-editor

What's New in Version 1.1

fo-markdown-note is now entirely built with Vue CLI3 and its GUI project manager. This greatly simplifies the build process and yields a distributable that is backwards-compatible with older ECMAScript versions through the CLI's use of Babel.

The previous version 1.0 of fo-markown-note was laboriously hand-rolled using rollup.js. Vue CLI3 fully automates the build process and uses webpack to bundle the distributable. This bundling comes for free: we needn't have any knowledge of webpack and don't have to work with it directly. This saves us a tremendous amount of work.

Getting fo-markdown-note

fo-markdown-note is distributed using Node Package Manager (NPM). If you are using NPM directly (i.e. without Vue CLI3), you can install it into your project using the following command:

npm install fo-markdown-note

The preferred way to include fo-markdown-note (or any NPM package) in your Vue project is to use the Vue CLI3 GUI project manager, which you can access using the command

vue ui

After creating your project in the GUI project manager, open it in the GUI and click the Dependencies tab at the left side of the project page. Then click the Install dependency button in the upper-right corner of the page. In the Install new dependency dialog box that appears, select either Main dependency or Development dependency, then search for "fo-markdown-note" and install it.

Using fo-markdown-note

To include fo-markdown-note in your project, include the following import statement at the top of your JavaScript:

import FoMarkdownNote from 'fo-markdown-note'

Then include it as a component in your Vue.js model:

var vueModel = new Vue({
    el: '#app',
    components: {
        FoMarkdownNote
    }
})

This will make the <fo-markdown-note> tag available for use within your project's HTML.

If you are creating a single-file Vue component using a .vue file, your JavaScript will look like this:

<script>
    import FoMarkdownNote from 'fo-markdown-note'
 
    export default {
        name: 'app',
        components: {
            FoMarkdownNote
        },
    ...

When fo-markdown-note first appears in your application's UI, it is in Preview Mode. This shows the formatted output rendered from the Markdown source. When a user clicks in the body of the note, fo-markdown-note switches into Edit Mode, showing the editable Markdown source. To return to Preview Mode, the user can either press the Escape key or click anywhere outside the note.

Attributes

The following attributes can be included in an <fo-markdown-note> tag:

• id   Required; every <fo-markdown-note> instance must have a unique id value
• note   The initial contents of the note

Values for the following attributes are expressed using CSS syntax:

• bgcolor   The markdown note's background color
• color   The note's text color
• fontFamily   The typeface to use
• fontSize   How big you want the type to be

Events

on-change is the only event fo-markdown-note explicitly raises.

Example

<fo-markdown-note
    id="note1"
    note="Remember to do what I forgot to do."
    bgcolor="LemonChiffon"
    v-on:change="noteOnChange()">
</fo-markdown-note>

Building fo-markdown-note and running the test application

If you want to build fo-markdown-note yourself and run its test application, clone this repository and then open its direcory in the Vue CLI3 GUI project manager. With the project open in the GUI, click the Tasks tab at the left side of the page and then click Serve on the sub-menu that appears.

Dependencies

To see fo-markdown-note's dependencies, open the project in the Vue CLI3 project manager and click the Dependencies tab at the left side of the page.

The distributable bundle contains two dependencies, simplemde and vue itself.

The test application uses interactjs for resizing, but this dependency is not required by fo-markdown-note and isn't bundled in the distributable.

Acknowledgements

Like most open source projects, fo-markdown-note is based on the work of others. The small value fo-markdown-note adds is to wrap and bundle these components into a single-file Vue.js component. The greater value is provided by these amazing projects:

• Vue.js by Evan You and a host of other contributors
• SimpleMDE by Sparksuite
• CodeMirror, the text editor on which SimpleMDE is based, by Marijn Haverbeke and many other contributors
• webpack, the module bundler that Vue CLI3 uses to package its distributables, by Tobias Koppers and over four hundred other contributors
• interact.js, the resizing library used in our test application, authored by Taye Adeyemi