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>

效果展示: