Giter VIP home page Giter VIP logo

vue-mdeditor's Introduction

vue-mdeditor

基于VUE的markdown文本编辑器

更新历史

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

DEMO案例

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

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

运行实例

# 安装依赖
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. 更傻瓜式的配置方式

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

vue-mdeditor's People

Contributors

ovenslove avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-mdeditor's Issues

markdown.vue文件引入js问题,

大哥帮看下,markdown.vue文件引入这两个JS文件(import hljs from '../../../static/js/highlight.min.js' import range from '../../../static/js/rangeFn.js')的时候,总是报
Module parse failed: Unexpected token (7:0) You may need an appropriate loader to handle this file type.

发现源码中对props传入的false值判断有BUG

源码中的data
data() {
return {
input: this.mdValuesP || '',
editStatus: this.editStatusP || true,
previewStatus: this.previewStatusP || true,
fullPageStatus: this.fullPageStatusP || false,
navStatus: this.navStatusP || true,
icoStatus: this.icoStatusP || true,
maxEditScrollHeight:0,
maxPreviewScrollHeight:0
}
},
以editStatus为例:
this.editStatusP的值为false editStatus的值为true
this.editStatusP的值为true editStatus的值为true
editStatus的值一直为true

events报错? 我怀疑所有的events全部不能用

<template>
    <div id="editor">
        <mavon-editor v-model="value" @change="change" @imgAdd="imgAdd" />
    </div>
</template>
<script>
export default {
        name: 'editor',
        data() {
            return { value: '' }
        }, 
        method: {
            change(value){
                console.log('change', value)
            },
            imgAdd(name, file){
                console.log('imgAdd', name)
            },
        }
    }
</script>

image

这是什么情况

空格数显问题

image
这个是编辑的正常内容

image
这个是回显的问题 不能缩进 ???

[Feature Request] MathJax

Nice editor! It would be better to have a tex-style equation support, like MathJax or something similar, thanks!

demo中的bug

在体验demo的时候发现两个地方感觉用户体验不好的

  1. 在编辑器窗口,鼠标滚轮滚动,编辑器和预览页面无法滚动,
  2. 可以拖动滚动条,但是预览窗口和编辑器窗口有抖动效果,类似于下拉刷新的那种阻尼效果,

修改data数据,视图不更改

当我关闭一个markdown,想打开另一个文本 传入另一个文本内容时。我试图调用函数去修改msg.mdValue的值。但是当我使用this.$set(msg.mdValue)时,值修改但是视图层并没有发生变化

highlightAuto is not a function

在nuxt中引入后,总是说highlightAuto is not a function,highlight.min.js是在markdown.vue中这样引入的:
import * as hljs from './js/highlight.min.js'

nuxt中使用

我在nuxt项目中使用它,报如下错误
marked(): input parameter is of type [object Function], string expected
是因为不支持SSR吗?谢谢~

引入问题

npm install marked后还要在项目中写一个markdown组件再供其它组件使用?在项目中已经安装了所有依赖,在markdown组件中怎么又引入了一次?

增加一个mdValuesP监听,支持默认内容

我在使用过程中,发现从服务器拉取已有文章内容,填充mdValue进去的时候不成功。建议在markdown.vue里面增加监听。

    mdValuesP: function(val) {
      this.input = val
    }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.