基于VUE-2.0的markdown文本编辑器
发布于 7 年前 作者 haidun999999 4415 次浏览 最后一次编辑是 7 年前 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

现阶段,随着 markdown 的普及,以前的富文本编辑器组件被替代,一款简洁的编辑器可以让自己的写作变得心情愉悦。于此同时,VUE 大🔥,所以贡献出一款简洁的 markdown 编辑器给大家,希望喜欢。本组件也适合 VUE 新手学习组件化开发,组件间传值,sass, 光标获取等知识点。

vue-mdeditor

基于VUE的markdown文本编辑器

项目地址

https://github.com/ovenslove/vue-mdEditor

DEMO案例

我知道你想先看看效果,特意准备了在线DEMO,点进去看看吧

传送门 ======> vue-mdeditor

更新历史

  • 更新预告
    • 编辑器主题配置功能
    • 未完待定。。
  • 2017/03/29
    • 编辑器双向同步滚动功能
    • 支持配置左上角版权标志(吃水不忘挖井人,谢过了),
    • 优化表格快捷输入
    • 其他优化
  • 2017/03/27
    • 新增顶部窗口配置
    • 优化参数配置可能出现的bug
    • 优化组件传值,增加html格式的输出内容,便于用户上传
    • 修复文档部分错误
  • 2017/03/24
    • 初始化项目
    • 完成基本的功能,包括:
      • H1-H6标题等快捷输入
      • 编辑区域tab缩进
      • 编译后文件预览并高亮
      • VUE组件传值,配置输入和输出等

运行实例

# 安装依赖
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模式开发,适用于此类开发模式,其他模式请自行修改。

安装依赖

# 本组件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

配置要求

<!--本组件使用font-awesome字体图标库,请于index.html提前引入-->
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
// 根据项目修改引入文件的路径(所需文件放在了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'
/*根据项目修改引入文件的路径(所需文件放在了static目录下)*/
/*引入reset文件*/
@import "../../static/css/reset";
/*引入github的markdown样式文件*/
@import "../../static/css/github-markdown.css";
/*引入atom的代码高亮样式文件*/
@import "../../static/css/atom-one-dark.min.css";
    

父组件中

<!--编辑器组件,嵌入到任意父组件中-->
<markdown 
:mdValuesP="msg" 
:fullPageStatusP="false" 
:editStatusP="false" 
:previewStatusP="false"
:navStatusP="false"  
:icoStatusP="true"  
@childevent="childEventHandler">
</markdown>
<!--变量后面的大写P表示是从父组件中传入的参数-->
<!--:mdValuesP="msg" 表示需要初始化传入编辑器的内容-->
<!--:fullPageStatusP="false" 加载时是否全屏(true全屏/false跟随父容器)-->
<!--:editStatusP="false" 加载时是否显示编辑容器(true显示/false不显示)-->
<!--:previewStatusP="false" 加载时是否显示预览容器(true全屏/false不显示)-->
<!--:navStatusP="false" 加载时是否显示顶部快速标签栏(true显示/false不显示)-->
<!--:icoStatusP="false" 加载时是否显示版权标志(true显示/false不显示),如果取消掉,请勿忘挖井人,谢谢!-->
<!--@childevent="childEventHandler" 监听组件的$.emit()方法传回父组件的值,便于父容器保存获取-->

// 引入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;
        }
    }
}

效果展示

vue-mdeditor

后期更新

  1. 更多的语法支持
  2. 更丰富的API文档
  3. 更人性化的使用体验
  4. 更傻瓜式的配置方式

喜欢就关注一下吧。@_@!!!

回到顶部