Vue 集成vue-simplemde 文本编辑器

第一步：本地项目安装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> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

效果展示: