w-vditor-vue

A wrapper vditor for vue.

Documentation

To view documentation or get support, visit docs.

Example

To view some examples for more understanding, visit examples:

all examples: web [source code]

Installation

Using npm(ES6 module):

npm i w-vditor-vue

In a browser(UMD module):

Add script for vue.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>

Add script for w-vditor-vue, vditor has been bundled into the umd file(css included), only vue is required.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/w-vditor-vue.umd.js"></script>

Note: vditor still downloads its runtime resources(lute, i18n, icons, katex...) from https://unpkg.com/vditor@[version] on demand, it can be redirected by settings.cdn.

For intranet / offline deployment

The umd file already contains vditor itself and its css, but vditor loads a few resources at runtime by <script>/<link> from options.cdn(default https://unpkg.com/vditor@[version]). To run without internet access, copy node_modules/vditor/dist to a folder served by your own site, then point settings.cdn to the folder containing dist:

<w-vditor-vue
    :settings="{ cdn: '/static/vditor' }"
    v-model="content"
></w-vditor-vue>

so that vditor resolves /static/vditor/dist/js/lute/lute.min.js and so on.

Resources actually requested(verified by serving them locally with all external requests blocked):

| resource | when | size | |---|---|---| | dist/js/lute/lute.min.js | always(markdown engine) | 3.7 MB | | dist/js/i18n/[lang].js | always, unless settings.i18n is given as an object | 3 KB | | dist/js/icons/[icon].js | always(settings.icon default 'ant') | 42 KB | | dist/css/content-theme/[theme].css | always | 20 KB(whole folder) | | dist/js/katex/* | only when the content has $$...$$ | 1.5 MB | | dist/images/emoji/* | only when image emojis are used | 112 KB | | dist/js/{mermaid,echarts,graphviz,abcjs,markmap,flowchart.js,mathjax,...} | only when the content has the matching code block | 0.03 ~ 6.5 MB each |

The whole dist is about 24 MB, most of which belongs to renderers that are never fetched unless the corresponding syntax appears. It is safe to copy only the folders your content needs, plus js/lute, js/i18n, js/icons and css/.