Vue实现markdown编辑器

安装 mavon-editor

npm install mavon-editor --save

引入mavonEditor

 import Vue from 'vue'import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'// useVue.use(mavonEditor)

html代码

<div style="width: 100%; height: 100%;"><div class="header"><a-icon type="left" />文章管理<a-input size="large" placeholder="请输入文章标题" :maxLength="maxLength" v-model="inputValue" @change="inputChange"/><span class="suffix">{{number + '/' +numberSum}}</span><div class="headerRight"><a-button type="danger" ghost class="hrMange">保存草稿</a-button><a-button type="danger" class="hrMange" @click="showModal">发布文章</a-button><a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" class="hrMange"/></div></div><mavon-editor v-model="context":toolbars="toolbars"@change="change"style="height: 100%;z-index:9;"/><article class="markdown-body" v-html="contexts"></article><template><!--发布文章--><div><a-modal v-model="visible" title="发布文章" on-ok="handleOk"><template slot="footer"><a-button key="back" @click="handleCancel">取消</a-button><a-button key="submit" type="danger" ghost :loading="loading" @click="handleOk">发布文章</a-button></template><a-form :form="form" @submit="handleSubmit" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }"><a-form-item label="文章标签"><div><template v-for="(tag, index) in tags"><a-tooltip v-if="tag.length > 20" :key="tag" :title="tag"><a-tag :key="tag" :closable="true" @close="() => handleClose(tag)">{{ `${tag.slice(0, 20)}...` }}</a-tag></a-tooltip><a-tag v-else :key="tag" :closable="true" :color="color[index]" @close="() => handleClose(tag)">{{ tag }}</a-tag></template><a-inputv-if="inputVisible"ref="input"type="text"size="small":style="{ width: '78px' }":value="inputValues"@change="handleInputChange"@blur="handleInputConfirm"@keyup.enter="handleInputConfirm"/><a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput"><a-icon type="plus" /> 添加文章标签</a-tag></div></a-form-item><a-form-item label="分类专栏"><div><template v-for="(tag, index) in sortTags"><a-tooltip v-if="tag.length > 20" :key="tag" :title="tag"><a-tag :key="tag" :closable="true" @close="() => sortHandleClose(tag)">{{ `${tag.slice(0, 20)}...` }}</a-tag></a-tooltip><a-tag v-else :key="tag" :closable="true" :color="color[index]" @close="() => sortHandleClose(tag)">{{ tag }}</a-tag></template><a-inputv-if="sortVisible"ref="input"type="text"size="small":style="{ width: '78px' }":value="sortValues"@change="sortHandleInputChange"@blur="sortHandleInputConfirm"@keyup.enter="sortHandleInputConfirm"/><a-tag v-else style="background: #fff; borderStyle: dashed;" @click="sortShowInput"><a-icon type="plus" /> 添加分类专栏</a-tag></div></a-form-item><a-form-item label="文章类型"><a-select  placeholder="请选择" style="width: 150px" @change="handleChange" v-decorator="['type', { rules: [{ required: true, message: '请选择文章类型!' }] }]"><a-select-option value="jack">原创</a-select-option><a-select-option value="lucy">转载</a-select-option><a-select-option value="Yiminghe">翻译</a-select-option></a-select></a-form-item><a-form-item label="发布形式"><a-radio-group  @change="onChange"  v-decorator="['modus']"><a-radio :value="1">公开</a-radio><a-radio :value="2">私密</a-radio><a-radio :value="3">粉丝可见</a-radio></a-radio-group></a-form-item></a-form><!--<template><div><template v-for="(tag, index) in tags"><a-tooltip v-if="tag.length > 20" :key="tag" :title="tag"><a-tag :key="tag" :closable="true" @close="() => handleClose(tag)">{{ `${tag.slice(0, 20)}...` }}</a-tag></a-tooltip><a-tag v-else :key="tag" :closable="true" :color="color[index]" @close="() => handleClose(tag)">{{ tag }}</a-tag></template><a-inputv-if="inputVisible"ref="input"type="text"size="small":style="{ width: '78px' }":value="inputValues"@change="handleInputChange"@blur="handleInputConfirm"@keyup.enter="handleInputConfirm"/><a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput"><a-icon type="plus" /> New Tag</a-tag></div></template>--></a-modal></div></template></div>

css代码

<style>.markdown-body code {margin: 0;font-size: 100% !important;background-color: rgba(27,31,35,.05);border-radius: 3px;}.header {width: 100%;height: 56px;font-size: 18px;}.header input {width: 50%;}.suffix {margin-left: -52px;position: absolute;margin-top: 7px;}.ant-input-affix-wrapper{width: 80%;}.headerRight{float: right;margin-top: 5px;}.hrMange{margin-right: 20px;}.ant-col-12 {display: block;-webkit-box-sizing: border-box;box-sizing: border-box;width: 75%;}
</style>

js代码

export default {data(){return {formLayout: 'horizontal',form: this.$form.createForm(this, { name: 'coordinated' }),/*发布文章*/loading: false,visible: false,color: ['pink','red','orange','green','cyan'],//文章标签inputVisible: false,inputValues: '',tags: [],//分类专栏sortVisible: false,sortValues: '',sortTags: [],/*浏览器窗口大小*/clientWidth: '',number: 0,numberSum: 100,maxLength: 100,/*markdown*/inputValue: '',contexts: '',context: '',//输入的数据,toolbars: {bold: true, // 粗体italic: true, // 斜体header: true, // 标题underline: true, // 下划线strikethrough: true, // 中划线mark: true, // 标记superscript: true, // 上角标subscript: true, // 下角标quote: true, // 引用ol: true, // 有序列表ul: true, // 无序列表link: true, // 链接imagelink: true, // 图片链接code: true, // codetable: true, // 表格fullscreen: true, // 全屏编辑readmodel: true, // 沉浸式阅读htmlcode: true, // 展示html源码help: true, // 帮助/* 1.3.5 */undo: true, // 上一步redo: true, // 下一步trash: true, // 清空save: true, // 保存（触发events中的save事件）/* 1.4.2 */navigation: true, // 导航目录/* 2.1.8 */alignleft: true, // 左对齐aligncenter: true, // 居中alignright: true, // 右对齐/* 2.2.1 */subfield: true, // 单双栏模式preview: true, // 预览}};},methods: {handleSubmit(e) {e.preventDefault();this.form.validateFields((err, values) => {if (!err) {console.log('Received values of form: ', values);}});},/*** 动态生成标签 start*/handleClose(removedTag) {console.log(removedTag, 808080);const tags = this.tags.filter(tag => tag !== removedTag);console.log(tags);this.tags = tags;},showInput() {this.inputVisible = true;this.$nextTick(function() {this.$refs.input.focus();});},handleInputChange(e) {this.inputValues = e.target.value;},handleInputConfirm() {const inputValue = this.inputValues;let tags = this.tags;if (inputValue && tags.indexOf(inputValue) === -1) {tags = [...tags, inputValue];}console.log(tags);Object.assign(this, {tags,inputVisible: false,inputValues: '',});},/*** 动态生成标签 end*//*** 动态生成分类专栏 start*/sortHandleClose(removedTag) {console.log(removedTag, 808080);const sortTags = this.sortTags.filter(tag => tag !== removedTag);console.log(sortTags);this.sortTags = sortTags;},sortShowInput() {this.sortVisible = true;this.$nextTick(function() {this.$refs.input.focus();});},sortHandleInputChange(e) {this.sortValues = e.target.value;},sortHandleInputConfirm() {const sortValues = this.sortValues;let sortTags = this.sortTags;if (sortValues && sortTags.indexOf(sortValues) === -1) {sortTags = [...sortTags, sortValues];}console.log(sortTags);Object.assign(this, {sortTags,sortVisible: false,sortValues: '',});},/*** 动态生成分类专栏 end*//*** 发布文章弹出窗口 start*/onChange(e) {console.log('radio checked', e.target.value);},handleChange(value) {console.log(`selected ${value}`);},showModal() {this.visible = true;setTimeout(() => {this.form.setFieldsValue({'modus': 1})}, 100);},alertManage(count) {this.$message.warning(count);},handleOk(e) {let title = this.inputValue==""?this.alertManage("文章标题不能为空!!!"):true;let tags = title==true?(this.tags.length==0?this.alertManage("请选择文章标签!!!"):true):false;let sortTags = tags==true?(this.sortTags.length==0?this.alertManage("请选择分类专栏!!!"):true):false;if (tags == true && sortTags == true) {this.form.validateFields((err, values) => {if (!err) {console.log('Received values of form: ', values);}});this.loading = true;setTimeout(() => {this.loading = false;}, 3000);}},handleCancel(e) {this.visible = false;},change(val, render) {this.contexts = render;},/*** 发布文章弹出窗口 end*//*** 浏览器窗口大小调整start*/inputChange() {this.number = this.inputValue.length;this.numberSum = 100 - this.inputValue.length;},clientWidths() {if (this.clientWidth <= 801 && this.clientWidth > 582) {$(".header input").css("width", "30%");} else if (this.clientWidth <= 582) {$(".header input").css("width", "16%");} else {$(".header input").css("width", "50%");}}/*** 浏览器窗口大小调整 end*/},mounted() {this.clientWidth = document.body.clientWidth;this.clientWidths();window.onresize = () => {return (() => {this.clientWidth = document.body.clientWidth;console.log(document.body.clientWidth);this.clientWidths();})();};}

效果图

Vue实现markdown编辑器相关推荐

技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器)，并批量上传图片
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-8.使用mavoneditor(vue的markdown编辑器),并批量上传图片技能学习:学习使用php(tp6框架) + ...
使用 Vue 和 Electron 开发一款简单的 Markdown 编辑器
2021SC@SDUSC 本文并不涉及自己设计一套 Markdown 渲染组件的部分,Markdown 渲染组件可通过 marked 和 highlight.js 自行实现.但本文重点在于如何使用 E ...
基于react 的markdown编辑器
一,背景近几天工作比较轻松吧,打算把之前没有完成的博客后台管理系统的发布博客功能实现,这就需要一个基于react的markdown编辑器. 之前的博客实现是使用vue实现的,后台管理想使用react ...
Vue渲染Markdown数据
零,最简单方法今天在找基于Vue的markdown编辑器时,找到了mavonEditor模块,本来想着通过抽离抽出展示Markdown数据相关的代码,结果忙活了一阵,突然看见文档有提示怎么只展示Ma ...
markdown editor_基于 Vue+Vditor 所见即所得Markdown编辑器
今天给大家推荐一款超牛的Vue.js构建多功能markdown编辑器Arya. markdown-online-editor 基于vue+vditor开发在线Markdown富文本编辑器,star高达 ...
Vue - Markdown编辑器
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. 最近在做工作室的官网,需要一套 ...
vue项目使用markdown编辑器
1.安装mavon-editor $ npm install mavon-editor --save 2. 需要使用Markdown编辑器的页面js中: import { mavonEditor } ...
BeetleX.WebFamily之Markdown编辑器
组件的新版集成一款Markdown编辑器ToastUIEditor,通过它可以快速地构建编写Markdown文本内容功能.集成后的ToastUIEditor支持图表,表格,文件管理插入等功能. 新建一 ...
如何允许网页中的编辑器访问剪切板_Vditor下一代的 Markdown 编辑器，为未来而构建...
❝ Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得(富文本).即时渲染(类似 Typora)和分屏预览模式.它使用 TypeScript 实现,支持原生 JavaScript ...

Vue实现markdown编辑器

安装 mavon-editor

引入mavonEditor

html代码

css代码

js代码

效果图

Vue实现markdown编辑器相关推荐

最新文章

热门文章