Vue2 - 脚手架中整合 Vditor（全网唯一一篇帮你搞定）

- 日理万妓 2024-02-20 08:26 17阅读 0赞

**目录**

一、Vue2 框架整合 Vditor

1.1、安装

1.2、引入 Vditor 相关文件

1.3、配置 Vditor

1.4、使用 Vditor

--------------------

## 一、Vue2 框架整合 Vditor ##

--------------------

### 1.1、安装 ###

npm install vditor --save

### 1.2、引入 Vditor 相关文件 ###

import Vditor from "vditor"
    import "vditor/dist/index.css"

### 1.3、配置 Vditor ###

data() {
            return {
                contentEditor: {},
            }
        },
        mounted() {
            this.contentEditor = new Vditor('vditor', {
                height: 500,
                placeholder: '此处为话题内容……',
                theme: 'classic',
                counter: {
                    enable: true,
                    type: 'markdown'
                },
                preview: {
                    delay: 0,
                    hljs: {
                        style: 'monokai',
                        lineNumber: true
                    }
                },
                tab: '\t',
                typewriterMode: true,
                toolbarConfig: {
                    pin: true
                },
                cache: {
                    enable: false
                },
                mode: 'sv',
                toolbar: [
                    'emoji',
                    'headings',
                    'bold',
                    'italic',
                    'strike',
                    'link',
                    '|',
                    'list',
                    'ordered-list',
                    'check',
                    'outdent',
                    'indent',
                    '|',
                    'quote',
                    'line',
                    'code',
                    'inline-code',
                    'insert-before',
                    'insert-after',
                    '|',
                    // 'record',
                    'table',
                    '|',
                    'undo',
                    'redo',
                    '|',
                    'edit-mode',
                    // 'content-theme',
                    'code-theme',
                    'export',
                    {
                        name: 'more',
                        toolbar: [
                            'fullscreen',
                            'both',
                            'preview',
                            'info',
                            'help',
                        ],
                    }],
            })
        }

> 解释：

this.contentEditor = new Vditor('vditor', ....); 这里就创建 Vditor 实例，指定 id 为 vditor，**也就意味着，之后在 html 中可以通过给 div 标签加上 id="vditor"，就可以引入 markdown 啦~**

### 1.4、使用 Vditor ###

返回页面就可以看到效果了~

![d9b799145dae4c1d93bcd9f32bcb0e97.png][]

![eeb5d6b88c994376a22eae4f946050d9.gif][]

[d9b799145dae4c1d93bcd9f32bcb0e97.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/ab0088245e304014a24eee5d66ac73f6.png
[eeb5d6b88c994376a22eae4f946050d9.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/b4147003f7c74241b4393b36c45ca715.png