如果你想自己引入而不希望mavon-editor加载的话，可以将externalLink设置为false.
如果想本地按需加载，你需要安装copy-webpack-plugin插件(npm install copy-webpack-plugin -D)
配置webpack如下所示：
(假定webpack配置文件位于项目的/webpack/webpack.js,
而你希望将hljs以及markdown相关文件导出位于项目的/dist/highlightjs以及/dist/markdown目录之下,
katex和上面一样)
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
// ...
plugins: [
// ...
new CopyWebpackPlugin([{
from: 'node_modules/mavon-editor/dist/highlightjs',
to: path.resolve(__dirname, '../dist/highlightjs'), // 插件将会把文件导出于/dist/highlightjs之下
}, {
from: 'node_modules/mavon-editor/dist/markdown',
to: path.resolve(__dirname, '../dist/markdown'), // 插件将会把文件导出于/dist/markdown之下
}, {
from: 'node_modules/mavon-editor/dist/katex', // 插件将会把文件导出
to: path.resolve(__dirname, '../dist/katex')
}]),
// ...
],
// ...
}然后你需要给mavon-editor设置externalLink
相关代码如下所示:
(假定你的web根目录位于项目的/dist/, 你的网站是www.site.com, 那么
markdown, hljs_js, hljs_css, hljs_lang, katex_css, katex_js返回的是你的网站对应文件位置，
比如www.site.com/markdown/github-markdown.min.css
对应的文件应该位于项目的/dist/markdown/github-markdown.min.css)
<template>
<div id="app">
<mavon-editor
:subfield = "subfield"
:code_style="code_style"
:ishljs="true"
:externalLink="externalLink"
></mavon-editor>
</div>
</template>
<script>
export default {
data () {
return {
subfield: true,
code_style: 'solarized-dark',
externalLink: {
markdown_css: function() {
// 这是你的markdown css文件路径
return '/markdown/github-markdown.min.css';
},
hljs_js: function() {
// 这是你的hljs文件路径
return '/highlightjs/highlight.min.js';
},
hljs_css: function(css) {
// 这是你的代码高亮配色文件路径
return '/highlightjs/styles/' + css + '.min.css';
},
hljs_lang: function(lang) {
// 这是你的代码高亮语言解析路径
return '/highlightjs/languages/' + lang + '.min.js';
},
katex_css: function() {
// 这是你的katex配色方案路径路径
return '/katex/katex.min.css';
},
katex_js: function() {
// 这是你的katex.js路径
return '/katex/katex.min.js';
},
}
}
},
}
</script>Notice: 如果你想禁用mavon-editor的自动加载，
可以将externalLink设置为false或externalLink中的某函数值设置为false
如：
export default {
// ...
data() {
return {
externalLink: false, // 这里只能为`true`/`false`和一个`Object`, 如果为`true`代表全使用外链且自动加载, 如果为`false`则禁用，如果为`Object`则如上所示
}
}
// ...
}或者:
export default {
// ...
data() {
return {
externalLink: {
hljs_css: function(css) {
// 这是你的代码高亮配色文件路径
return '/highlightjs/styles/' + css + '.min.css';
},
katex_css: false, // `false`表示禁用自动加载，它也可以是个函数，如果它是个函数，那么这个函数应该返回一个可访问的`katex`的css路径字符串
// 我们没有设置`katex_js`, `hljs_js`, `hljs_lang`, `markdown_css`， `mavon-editor`会认为它的值为`true`，它会默认使用`cdnjs`相关外链加载
},
}
}
// ...
}