Integrate Prosemirror editor in your Vue.js 2 project

vue-prosemirror-2

ProseMirror is an in-browser semantic rich text editor component.

vue-prosemirror-2 is a plugin to integrate prosemirror into your Vue 2 projects.

Go through this small example to see how it works.

main.js

    import Vue from 'vue'
    import App from './App.vue'
    import ProseMirror from 'vue-prosemirror-2'

    Vue.use(ProseMirror)

    new Vue({ // eslint-disable-line no-new,
        el: '#app',
        render: (h) => h(App)
    })

Script:

App.vue

        export default {
            name: 'App',
            data() {
                return {
                    text:
                        '### Vuejs Feed Daily wih Jackie Chan'
                }
            }
        }

Template:

  <div id="app" class="container">
    <img src="./assets/logo.png">
    <h1>Prosemirror with Vue 2</h1>
    <prosemirror mode="editor" :initial-markdown="text"></prosemirror>
    <prosemirror mode="markdown" :initial-markdown="text"></prosemirror>
  </div>

Check this new project on GitHub.