效果展示

因工作中需要使用是在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_mdv-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

Vue Markdown编辑器相关推荐

Vue - Markdown编辑器
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. 最近在做工作室的官网,需要一套 ...
markdown editor_基于 Vue+Vditor 所见即所得Markdown编辑器
今天给大家推荐一款超牛的Vue.js构建多功能markdown编辑器Arya. markdown-online-editor 基于vue+vditor开发在线Markdown富文本编辑器,star高达 ...
使用 Vue 和 Electron 开发一款简单的 Markdown 编辑器
2021SC@SDUSC 本文并不涉及自己设计一套 Markdown 渲染组件的部分,Markdown 渲染组件可通过 marked 和 highlight.js 自行实现.但本文重点在于如何使用 E ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器)，并批量上传图片
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器),并批量上传图片技能学习:学习使用php(tp6框架) + ...
vue项目使用markdown编辑器
1.安装mavon-editor $ npm install mavon-editor --save 2. 需要使用Markdown编辑器的页面js中: import { mavonEditor } ...
如何在vue项目中使用markdown编辑器
在Vue 中使用 Vditor 官方文档 Vditor 安装 npm install vditor --save 引入 import Vditor from 'vditor' import 'vdit ...
BeetleX.WebFamily之Markdown编辑器
组件的新版集成一款Markdown编辑器ToastUIEditor,通过它可以快速地构建编写Markdown文本内容功能.集成后的ToastUIEditor支持图表,表格,文件管理插入等功能. 新建一 ...
如何允许网页中的编辑器访问剪切板_Vditor下一代的 Markdown 编辑器，为未来而构建...
❝ Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得(富文本).即时渲染(类似 Typora)和分屏预览模式.它使用 TypeScript 实现,支持原生 JavaScript ...
所见即所得的 markdown 编辑器：Typora
大家好,我是前端西瓜哥. 我经常写技术文章,所以用的文本编辑器必须要称手.作为一名从事前端开发的程序员,会更喜欢 markdown 这种格式. markdown markdown 是一种标记语言.它只 ...
v-md-editor详解（MarkDown编辑器组件）
v-md-editor 是基于 Vue 开发的 markdown 编辑器组件.即支持vue2.0的项目也支持vue3.0的项目,另一个 mavonEditor编辑器在Vue3使用过程中不兼容. Vue ...

Vue Markdown编辑器