Vue 集成vue-simplemde 文本编辑器分析

阿里 阅读:262 2021-03-31 20:59:01 评论:0

第一步:本地项目安装vue-simplemde

cnpm install vue-simplemde -D

第二步:全局配置:项目/main.js,添加如下代码

import VueSimplemde from 'vue-simplemde'  // 引入文本编辑器 
import 'simplemde/dist/simplemde.min.css' // 引入文本编辑器样式 
 
Vue.use(VueSimplemde)  //全局定义组件--vue-simplemde

第三步:相关页面引用文本编辑器,代码如下:

 <!-- 发布文章 --> 
 <template> 
 	<transition enter-active-class="animated bounceInDown"> 
		<section class="release-article"> 
			<el-title-header :title="$route.meta.title"></el-title-header> 
 
			<div class="radio"> 
				<div v-for="n of 8" @click="index = n" :class="{active: index == n}">JavaScript</div> 
			</div> 
 
			<markdown-editor v-model="content" :configs="configs"></markdown-editor> 
 
			<div class="release-btn">发布文章</div> 
		</section> 
 	</transition> 
 </template> 
 
 <script> 
 export default { 
 	name: 'releaseArticle', 
 	data () { 
 		return { 
 			flag: true, 
 			index: -1, 
 			options: [ 
 				{ 
 					 
 				} 
 			], 
 			content: '', 
 			configs: { 
 				status: false, 
 				spellChecker: false, 
 				renderingConfig: { 
 					codeSyntaxHighlighting: true, 
 					highlightingTheme: 'atom-one-light' 
 				} 
 			} 
 		} 
 	}, 
 } 
 </script> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

效果展示:

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号