1.0.0 • Published 5 years ago

vue-stackedit v1.0.0

Weekly downloads
6
License
MIT
Repository
github
Last release
5 years ago

Overview

官方可集成版本

Vue-stackedit 是基于 stackedit 开发的一款在线markdown编辑器。

目前市面上已经有很多开源的的在线markdown编辑器了,经过多方调研后发现功能比较齐全且强大的有stackedit和作业部落的mdeditor,但是作业部落的产品并未开源,因此决定采用stackedit。

stackedit是一个完整的网站产品,但是很多情况下,我们只需要其中的编辑器功能,并且希望能方便地集成到自己的产品中,因此决定将其中的编辑器部分剥离出来,单独做成一个库,方便直接在自己的产品中调用。

编辑出来的文件基本可用,但是源文件中的store部分其实很多都不需要,而直接删掉又会报错,其中关联有点复杂,因此直接保留下来,以后有时间再慢慢梳理。强烈欢迎志愿者做贡献。

stackedit是基于Vue.js框架开发的,本项目沿用Vue.js框架,使用vue-cli工具开发,该版本暂不支持Latex公式,有需要的可在src/extensions/index.js中添加扩展。

该编辑器依赖lovue组件库的一些组件,以及图标库iconfont.js,需单独安装。

上传本地图片使用的请求是lovue组件库中带的$fetch.form()方法,也可以自己定义全局变量$fetch

自带一个Prism主题实现语法高亮。

Demo

开发与编译

git clone https://github.com/loliconer/vue-stackedit.git
cd vue-stackedit
npm install
npm run serve
npm run build

引用

既可以通过script标签引用,也可以import。

<script src="/dist/vueStackedit.umd.js"></script>
<div id="app">
  <v-editor url="上传本地图片的api" upload-field="上传本地图片请求的字段"></v-editor>
</div>

<script>
Vue.component(vueStackedit.name, vueStackedit)
new Vue({
  methods: {
    setContent() {
      vueStackedit.methods.setContent('hello')
    },
    getContent() {
      console.log(vueStackedit.methods.getContent())
    }
  }
}).$mount('#app')
</script>