Vue Markdown编辑器
效果展示简介一款使用marked和highlight.js开发的一款markdown编辑器,除常见markdown语法外,支持快捷输入、图片粘贴、代码复制、全屏编辑、预览等功能。使用起来简单方便,只需几行代码,即可在你的页面上引入一个markdown编辑器,编辑区支持像专业编辑器那样。线上预览地址 https://wikecloud.com/mdgit地址 https://gitee.com/wi
效果展示
因工作中需要使用 是在https://gitee.com/wike2019/wike__md_editor中自己摸索完成 如有侵权请 告知本人 本人立刻删除此文章
简介
一款使用marked和highlight.js开发的一款markdown编辑器,除常见markdown语法外,支持快捷输入、图片粘贴、代码复制、全屏编辑、预览等功能。
使用起来简单方便,只需几行代码,即可在你的页面上引入一个markdown编辑器,编辑区支持像专业编辑器那样。
线上预览地址 https://wikecloud.com/md
git地址 https://gitee.com/wike2019/wike__md_editor
特点
方便扩展,根据实际需求,支持常见的功能配置,也可根据实际需求进行深度定制
体积小,加载速度快
源码有注释 方便学习理解,也可以二次开发
键盘事件监听,如保存、粘贴、回车时上次输入语法判断等
支持图片复制导入功能(目前只支持单张图片)
可扩展性强,除了提供的属性配置编辑器,也可直接在原有组件基础上进行二次开发
使用方式
通过 npm 安装 wk_md:
npm i wk_md --save
项目介绍
使用方法
将项目在git地址中下载 将md文件夹放置在自己项目的components文件中
在需要使用的vue页面中引入组件,和普通组件引入方法一样
在components中注册组件
在页面中使用组件
使用方法代码
<template>
<div class="container">
<wk_md
v-model="val"
ref="md"
@on-ready="onReady"
@on-upload-image="onUpladImage"
@on-save="onSave"
:height="800"
></wk_md>
</div>
</template>
<script>
import wk_md from 'wk_md';
export default {
components: {
wike_md
},
mounted() {
},
data: function () {
return {
val: '',
vm:null
}
},
methods: {
onReady({vm}) {
this.vm=vm
},
onUpladImage(file) {
this.vm.instance.insertImage("http://csdn.52wike.com/wike.jpeg");
},
onSave({value,html}) {
//value 为md编辑器的内容
//html 为md内容解析成的html
},
}
}
</script>
更多方法在git地址中:https://gitee.com/wike2019/wike__md_editor
更多推荐
所有评论(0)