Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ovenslove/vue-mdEditor
基于VUE的markdown文本编辑器
https://github.com/ovenslove/vue-mdEditor
Last synced: 3 months ago
JSON representation
基于VUE的markdown文本编辑器
- Host: GitHub
- URL: https://github.com/ovenslove/vue-mdEditor
- Owner: ovenslove
- Created: 2017-03-25T03:28:55.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-07-23T02:16:08.000Z (over 3 years ago)
- Last Synced: 2024-08-02T09:22:31.888Z (6 months ago)
- Language: Vue
- Size: 686 KB
- Stars: 485
- Watchers: 17
- Forks: 106
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue-mdEditor - mdEditor?style=social) - 基于VUE的markdown文本编辑器 (UI组件)
- awesome-github-vue - vue-mdEditor - 基于VUE的markdown文本编辑器 (UI组件)
- awesome - vue-mdEditor - 基于VUE的markdown文本编辑器 (UI组件)
- awesome-github-vue - vue-mdEditor - 基于VUE的markdown文本编辑器 (UI组件)
README
# vue-mdeditor
> 基于VUE的markdown文本编辑器
## 更新历史
* 2017/08/08
* 修复组件配置属性的判定错误，感谢[Imprevia](https://github.com/Imprevia)
* 2017/03/29
* 编辑器双向同步滚动功能
* 支持配置左上角版权标志（吃水不忘挖井人，谢过了）,
* 优化表格快捷输入
* 其他优化
* 2017/03/27
* 新增顶部窗口配置
* 优化参数配置可能出现的bug
* 优化组件传值，增加html格式的输出内容，便于用户上传
* 修复文档部分错误
* 2017/03/24
* 初始化项目
* 完成基本的功能，包括：
* H1-H6标题等快捷输入
* 编辑区域tab缩进
* 编译后文件预览并高亮
* VUE组件传值，配置输入和输出等
## DEMO案例
> 我知道你想先看看效果，特意准备了在线DEMO，点进去看看吧
**传送门** ======> [vue-mdeditor](https://ovenslove.github.io/vue-mdEditor/)
## 运行实例
``` bash
# 安装依赖
cnpm install
# 开启热更新服务器s在 localhost:4397 （4397为自定义端口，如果需要修改，请前往/config/index.js:26（port:4397）修改）
cnpm run dev
# 打包压缩项目，并输出生产模式文件
cnpm run build
# 打包压缩文件，过程带输出信息
cnpm run build --report
```
## 使用方法
> 使用前必知
本markdown组件采用vue-cli模式开发，适用于此类开发模式，其他模式请自行修改。
> 安装依赖
```bash
# 本组件css采用sass编写，亦可修改为css(请自行修改)，核心依赖marked组件，请务必安装，谢谢
# markdown编译依赖 marked 地址：https://www.npmjs.com/package/marked
# 同步滚动依赖 vue-scroll 地址：https://www.npmjs.com/package/vue-scroll
cnpm i marked vue-scroll --save
cnpm i node-sass sass-loader --save-dev
```
> 配置要求
```html
```
```javascript
// 根据项目修改引入文件的路径（所需文件放在了static目录下）
import Vue from 'vue'
import marked from 'marked'
import scroll from 'vue-scroll'
Vue.use(scroll)
import hljs from '../../static/js/highlight.min.js'
import range from '../../static/js/rangeFn.js'
```
```css
/*根据项目修改引入文件的路径（所需文件放在了static目录下）*/
/*引入reset文件*/
@import "../../static/css/reset";
/*引入github的markdown样式文件*/
@import "../../static/css/github-markdown.css";
/*引入atom的代码高亮样式文件*/
@import "../../static/css/atom-one-dark.min.css";
```
> 父组件中
```html
```
```javascript
// 引入markdown组件
import markdown from '../components/markdown'
export default {
name: 'index',
data() {
return {
msg: {
mdValue:'## Vue-markdownEditor'
}
//初始化markdown编辑器的内容，通过props传入子组件
}
},
components: {
markdown // 声明mardown组件
},
methods: {
// 监听事件，接收子组件传过来的数据
childEventHandler:function(res){
// res会传回一个data,包含属性mdValue和htmlValue，具体含义请自行翻译
this.msg=res;
}
}
}
```
## 效果展示
## 后期更新
1. 更多的语法支持
2. 更丰富的API文档
3. 更人性化的使用体验
4. 更傻瓜式的配置方式
> 喜欢就关注一下吧。@_@!!!