A simple markdown editor for Vue 2
npm install prometheus-markdownThis is a simple markdown editor I made for my website written in Vue2. It was also mainly for me to
learn and improve my package development skills, and understand a little more
about the build process for front end scripts.
To install run:
``
npm i prometheus-markdown
This will add it to your package.json dependencies. The module is exported as a library
with its styles inlined, so you can import it into your vue projects.
I currently only use this in a Laravel Project, so have registered the vue component
in my app.js file, which comes as the default with Laravel:
`javascript
require('./bootstrap');
window.Vue = require('vue').default;
Vue.component('prometheus-markdown', require('prometheus-markdown').default);
const app = new Vue({
el: '#app',
});
`
This package uses the marked library to generate a preview of the markdown, and it follows
the GitHub Flavoured Markdown syntax (I think).
The toolbar supports the following features
- Bold Text
- Italic Text
- H1, 2, 3, 4
- Unordered Lists
- Check Lists
- Code Blocks
- Block Quotes
- Image Upload
The package supports highlighting the text you want to format and then clicking the button
wraps the text appropriately.
Clicking without the buttons adds the annotations to the page on a new line.
I have only configured two shortcut keys currently. They are for making text bold
and italic. Due to the mappings on your browser, you will either have to disable
the browser mappings for your bookmark tab or use the secondary keymappings I have added
Bold - CTRL + ALT + B / CTRL + B
Italic - CTRL + ALT + I / CTRL + I
**There is an issue with the italic secondary key mapping currently which requires some
remapping of your keys. I am open to suggestions for better keymapping alternatives.
Feel free to open an issue on GitHub with suggestions.**
The vue component takes a prop of uploadUrl - this accepts a URL, to which a filefile
with a key of will be posted. The endpoint which receives this should upload theurl` and a value of the URL pointing to
file and return a JSON array with a key of
the uploaded file.
If you are using Laravel, there is a companion package, available here: https://packagist.org/packages/drewdan/asset-handler
which will add a route to your Laravel application, which is the default setting
for this application. **Please check the configuration of this package, and add any appropriate
middleware to prevent anyone without the correct access from uploading to this endpoint.
By default the route is unprotected.**