@nkjmsss/bend_editor v2.3.5

bend md editor

How to start development

$ docker-compose build
$ docker-compose run --rm node npm i
$ docker-compose up -d

demo

https://nkjmsss.github.io/bend-editor/

⚠️caution⚠️

There are some too SPECIAL syntaxes. Therefore, this plugin is hard to use as a normal markdown editor.

This is very huge issue I know, so I will fix it.

installation

npm i --save @nkjmsss/bend_editor

usage

using editor

First, import plugin

import editor from '@nkjmsss/bend_editor'
import '@nkjmsss/bend_editor/lib/editor/bend-editor.css'
import Vue from 'vue'

Vue.use(editor)

Then, you can use in each component

<template>
  <v-editor 
    v-model="src"
  />
</template>

<script>
export default {
  data: () => ({
    src: '',
  }),
}
</script>

using only previewer

In each component, you can import previewer component.

<template>
  <previewer
    :html="compiledMD"
  />
</template>

<script>
import { previewer, md } from '@nkjmsss/bend_editor'
import '@nkjmsss/bend_editor/lib/previewer/previewer.css'

export default {
  name: 'AMd',
  components: {
    previewer,
  },
  props: {
    src: {
      type: String,
      default: '',
    },
  },
  computed: {
    compiledMD() {
      return md.render(this.src)
    },
  },
}
</script>

TODOS

• 使用する文法をconfigで渡せるようにする
• nuxtに置き換え、tsで書き直す
• 2カラム表示から、ライブエディットできるように変更する