Including VMdEditor locally in a Component

[dfun90]

Hello,

the instructions on here only give an example how to globally include the editor via the main.js with Vue itself. However, we would like to only have the markdown editor loaded locally inside a single component, because we are not using the editor in the whole app.

Trying to import the VMdEditor and the CSS files inside a SFC and then registering the VMdEditor inside the components object does not work.

Can you give an example how to use the editor with a single component instead of registering it globally? Thanks!

[code-farmer-i]

Can you show me your code？

[m-emre-yalcin]

i had the same issue, try this:

import VueMarkdownEditor from '@kangc/v-md-editor'
import '@kangc/v-md-editor/lib/style/base-editor.css'
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
import '@kangc/v-md-editor/lib/theme/style/vuepress.css'

export default {
 components: {
   'v-md-editor': VueMarkdownEditor
 }
}

[code-farmer-i]

i had the same issue, try this:

import VueMarkdownEditor from '@kangc/v-md-editor'
import '@kangc/v-md-editor/lib/style/base-editor.css'
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
import '@kangc/v-md-editor/lib/theme/style/vuepress.css'

export default {
 components: {
   'v-md-editor': VueMarkdownEditor
 }
}

VueMarkdownEditor.use(vuepressTheme)

[fjeddy]

@dfun90 Pretty much everything that can be included globally can be included locally.. A component is a component.

<template>
  <div class="form-group">

    <v-md-editor
      v-model="content"
      :disabled-menus="[]"
      :left-toolbar="leftToolbar"
      :right-toolbar="rightToolbar"
      height="600px"
    />

  </div>
</template>

<script>
import VMdEditor from '@kangc/v-md-editor'
import enUS from '@kangc/v-md-editor/lib/lang/en-US'

import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'
import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index'
import createTodoListPlugin from '@kangc/v-md-editor/lib/plugins/todo-list/index'

VMdEditor.use(githubTheme)
VMdEditor.lang.use('en-US', enUS)
VMdEditor.use(createEmojiPlugin())
VMdEditor.use(createTodoListPlugin())

export default {

  data: function() {
    return {
      content: '',
      leftToolbar: 'undo redo clear | title | todo-list emoji',
      rightToolbar: 'preview sync-scroll fullscreen'
    }
  },

  components: {
    VMdEditor
  }

}
</script>

<style>
@import '~@kangc/v-md-editor/lib/style/base-editor.css';
@import '~@kangc/v-md-editor/lib/theme/style/github.css';
@import '~@kangc/v-md-editor/lib/plugins/emoji/emoji.css';
@import '~@kangc/v-md-editor/lib/plugins/todo-list/todo-list.css';
</style>

Now close this! Pretty please :P

[geminigeek]

VMdEditor.use(githubTheme)
VMdEditor.lang.use('en-US', enUS)

Hi, kindly put this in readme how to use with local registration , this is important for users new with vue 3