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

 1 <script>
 2 import SimpleMDE from 'simplemde'
 3 
 4 export default {
 5   name: 'Create',
 6   mounted() {
 7   // 创建一个 SimpleMDE 的实例
 8 const simplemde = new SimpleMDE({
 9   // 要绑定的 textarea 元素
10   element: document.querySelector('#editor'),
11   // 占位符
12   placeholder: '请使用 Markdown 格式书写 ;-)，代码片段黏贴时请注意使用高亮语法。',
13   // 禁用拼写检查
14   spellChecker: false,
15   // 不用自动下载 FontAwesome，因为我们刚好有使用 FontAwesome，所以不用自动下载
16   autoDownloadFontAwesome: false,
17   // 启用自动保存，uniqueId 是一个用于区别于其他站点的标识
18   autosave: {
19     enabled: true,
20     uniqueId: 'vuejs-essential'
21   },
22   // 启用代码高亮，需要引入 highlight.js
23   renderingConfig: {
24     codeSyntaxHighlighting: true
25   }
26 })
27   }
28 }
29 </script>

3). 引入 SimpleMDE 样式

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

src/App.vue

1 <style lang="scss">
2 .
3 .
4 .
5 @import 'simplemde/dist/simplemde.min.css';
6 </style>