le-markdown-editor | 一款强大的Vue markdown编辑器组件

代码寻梦鹤
• 阅读 5985
le-markdown-editor是一款强大的markdown编辑器,它不仅支持常见的markdown语法,还新增了上传图片及换肤等实用的功能,并且上传图片的功能是可以定义的,替换也非常方便,非常适合用来做个人博客的编辑器。

这里只记录一些简单的使用步骤,更多内容可以访问码云或github查看:
码云地址:点击访问
github地址:点击访问

预览图

le-markdown-editor | 一款强大的Vue markdown编辑器组件
le-markdown-editor | 一款强大的Vue markdown编辑器组件

组件使用

使用cdn

有的人可能不太喜欢用webpack或者就是写个小demo,用不到webpack,可以点击访问这个文件,参考这个文件即可使用

在webpack构建的项目中

  • 下载插件
$ npm i le-markdown-editor --save
  • index.jsmain.js
import Vue from 'vue'
import leMarkdownEditor from 'le-markdown-editor'
// ...

Vue.use(leMarkdownEditor)
// ....
new Vue({
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app')
  • index.html
<div id="editor-main">
      <le-editor></le-editor>
</div>

<style>
#app {
    width: 1200px;
    height: 500px;
    margin: 50px auto;
}

/*设置编辑器宽高*/
#editor-main {
    color: #2c3e50;
    width: 100%;
    height: 100%;
}
</style>

我该如何了解插件语法?

打开项目根目录下的test.txt,将其拷贝到编辑区,对比右侧看到的预览文本,就能知道如何使用了

API

props(自定义配置)

属性 说明 类型 默认值
value 可以使用 v-model 双向绑定数据 Sting ''
theme 编辑器主题 Sting 'base16-dark'
font 设置编辑区和展示区的文字大小 Object {editor: 16, preview: 16}
shadow 编辑器是否带阴影效果 Boolean true
dragUpload 是否允许拖拽上传图片,需要结合图片上传配置使用 Boolean true
showToolbar 是否显示工具栏 Boolean true
toolbar 菜单栏及快捷键的功能 Object 见下文
菜单栏配置配置
// 默认菜单栏配置
toolbar: {
    undo: true, // 撤销
    redo: true, // 重做
    bold: true, // 粗体
    del: true, // 删除线
    underline: true, // 下划线
    italic: true, // 斜体
    quote: true, // 引用
    bookmark: true, // 标记
    superscript: true, // 上角标
    subscript: true, // 下角标
    h1: true, // 标题1
    h2: true, // 标题2
    h3: true, // 标题3
    h4: true, // 标题4
    h5: true, // 标题5
    h6: true, // 标题6
    alignLeft: true, // 居左
    alignCenter: true, // 居中
    alignRight: true, // 居右
    ol: true, // 有序列表
    ul: true, // 无序列表
    hr: true, // 分隔线
    link: true, // 链接
    inlineCode: true, // 行内代码
    code: true, // 代码块
    image: true, // 图片
    table: true, // 表格
    skin: true, // 皮肤
    fullScreenEdit: true, // 全屏编辑
    fullScreen: true, // 全窗口预览
    preview: true,  // 实时预览
    save: true,  // 保存预览的html文本
  }
// 使用(例如按照下图的配置,只会显示两个图标)
<template>
  <div id="app">
    <le-editor :toolbar="toolbar"></le-editor>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
        toolbar: {
            undo: true,
            redo: true
        }
    }
  }
}
</script>

events(事件)

事件名 说明 返回值
save 保存预览文本 预览区的html文本
uploadImg 上传图片 组件对象、文件以及文件名,详细内容见下文

图片上传配置

本地图片上传因为没有各种云存储账号的的原因,所以暂时只支持拖拽或者粘贴剪切板图片(windows粘贴本地图片需要先预览,截图则不需要)上传到Github仓库和自己的服务器,虽然都在说Github访问有点慢,但是我这几天测试了一下,虽然上传速度不快,但是访问时感觉效果还行,但是毕竟免费的,对于没有图床和服务器的用户还是很不错的,介意的话可以传到自己的服务器或者利用拓展方法上传到自己的云存储上。

注意:mac系统下粘贴本地图片会在编辑区留下原文件名,windows上没有问题,但是不影响使用,虽然能直接通过编辑器操作去除那一段文本,但是总感觉很别扭,所以就没处理,功能待优化,介意的话,请使用拖拽上传的功能。

图片上传演示:

le-markdown-editor | 一款强大的Vue markdown编辑器组件

详情请点击这里-->图片上传配置详情

快捷键

注意: 这里除了撤销和重做两个功能以外,其它的快捷键只在菜单设置为显示时生效

快捷键 功能
Ctrl + Z 撤销
Ctrl + Y 重做
Ctrl + B 粗体
Ctrl + D 删除线
Ctrl + U 下划线
Ctrl + I 斜体
Ctrl + Q 引用
Ctrl + M 标记
Ctrl + L 链接
Ctrl + 1(F1) 标题1
Ctrl + 2(F2) 标题2
Ctrl + 3(F3) 标题3
Ctrl + 4(F4) 标题4
Ctrl + 5(F5) 标题5
Ctrl + 6(F6) 标题6
Ctrl + Alt + S 上角标
Ctrl + Alt + B 下角标
Ctrl + Alt + L 居左
Ctrl + Alt + C 居中
Ctrl + Alt + R 居右
Ctrl + Alt + O 有序列表
Ctrl + Alt + U 无序列表
Ctrl + Alt + H 分割线
Ctrl + Alt + I 行内代码
Ctrl + Alt + D 代码块
Ctrl + Alt + P 开关实时预览
Ctrl + Alt + F 开关全窗口预览
Ctrl + S 保存html文本
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
公孙晃 公孙晃
2年前
简单好用的Markdown文本编辑器:Typora for Mac
Typora是一款非常实用的Markdown编辑器,它支持所见即所得的编辑方式、简洁美观的界面、多种输出格式、强大的自定义功能等等,使得用户可以方便地进行Markdown编辑和阅读,提高工作效率和体验。
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(