使用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>