使用SimpleMDE富文本编辑器

1). 安装 SimpleMDE

npm install simplemde --save

2). 使用 SimpleMDE

1、打开 src/views/articles/Create.vue 文件，修改模板中的 <textarea> ：

src/views/articles/Create.vue

<textarea id="editor"></textarea>

2、复制以下代码替换原 <script>：

src/views/articles/Create.vue

 <script>
 import SimpleMDE from 'simplemde'

 export default {
   name: 'Create',
   mounted() {
   // 创建一个 SimpleMDE 的实例
 const simplemde = new SimpleMDE({
   // 要绑定的 textarea 元素
   element: document.querySelector('#editor'),
   // 占位符
   placeholder: '请使用 Markdown 格式书写 ;-)，代码片段黏贴时请注意使用高亮语法。',
   // 禁用拼写检查
   spellChecker: false,
   // 不用自动下载 FontAwesome，因为我们刚好有使用 FontAwesome，所以不用自动下载
   autoDownloadFontAwesome: false,
   // 启用自动保存，uniqueId 是一个用于区别于其他站点的标识
   autosave: {
     enabled: true,
     uniqueId: 'vuejs-essential'
   },
   // 启用代码高亮，需要引入 highlight.js
   renderingConfig: {
     codeSyntaxHighlighting: true
   }
 })
   }
 }
 </script>

3). 引入 SimpleMDE 样式

打开 src/App.vue 文件，在 <style> 的最后面，引入 simplemde/dist/simplemde.min.css：

src/App.vue

 <style lang="scss">
 .
 .
 .
 @import 'simplemde/dist/simplemde.min.css';
 </style>