超简单通用 Markdown 编辑器

• 可直接引用
• 适当防护 XSS
• 可自己编译以支持更多 markdown 格式
• 图片上传接口可自定（在 Bus.$on 中触发）
• 速度快、体积小 (带 vue gzip 后 < 100K)
• 需要 IE10 及以上

直接引入

已集成 Vue, 可直接引用

编辑器会自动生成两个带有 name 属性的元素，即 md-txt 和 md-html (假如 id 是 md)，分别代表 Markdown 代码和生成的 HTML

<link rel="stylesheet" type="text/css" href="dist/build.min.css">
<script src="dist/tony-markdown.min.js"></script>

<form target="" method="post">
  <section id="md" style="height: 600px">
    <tony-markdown
      v-model="form"
      @uploaded="uploaded" 
      upload-url="http://images.tutuweb.cn:8888/api/v3/posts/upload"
    ># 标题</tony-markdown>
  </section>
  <input name="submit" type="submit">
</form>

<script>
new Vue({
  el: '#md',

  data: {
    // markdowm 和 html 的内容将动态更新到此对象，反之亦然
    form: {
      md: '',
      html: ''
    }
  },

  methods: {
    uploaded: function(res, md) {
      // 这里写上你自己的图片上传接口
      var json = JSON.parse(res)
      if (json.code === 200)
        md.$emit('insert-text', '\n![Minon](http://images.tutuweb.cn:8888' + json.data + ')')
      else
        alert(json.msg)
    }
  }
})
</script>

组件化引入

作为 Webpack 组件化引入将依赖外部 vue

$ npm i tony-markdown

<section id="md" style="height: 600px">
  <tony-markdown
    v-model="form" 
    @uploaded="uploaded" 
    upload-url="http://images.tutuweb.cn:8888/api/v3/posts/upload"
  ></tony-markdown>
</section>

<style lang="less">
@import "~tony-markdown/src/css/markdown.less";
</style>

import TonyMarkdown from 'tony-markdown'

export default {
  components: {
    TonyMarkdown
  },

  data() {
    return {
      // markdowm 和 html 的内容将动态更新到此对象，反之亦然
      form: {
        md: '# 标题',
        html: ''
      }
    }
  },

  methods: {
    uploaded(res, md) {
      var json = JSON.parse(res)
      if (json.code === 200)
        md.$emit('insert-text', '\n![Minon](http://images.tutuweb.cn:8888' + json.data + ')')
      else
        alert(json.msg)
    }
  }
}

感谢

• markdown-it

Todo

• block tab key event in editor

许可证

MIT