关于Vue mavon-editor 本地加载 – 关闭 CDN，显示高亮

最新推荐文章于 2023-11-28 09:21:13 发布

chen_xionxion

最新推荐文章于 2023-11-28 09:21:13 发布

阅读量693

点赞数

分类专栏： vue 文章标签： vue.js css javascript

本文链接：https://blog.csdn.net/Adobe_java/article/details/123389991

版权

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在Vue项目中不使用CDN，如何本地加载mavon-editor并实现代码高亮显示。当项目不依赖外部CDN时，mavon-editor的高亮功能会失效。解决方案是下载组件并在项目中引用相关文件，详细教程可参考链接，确保设置正确的标签属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原因

由于项目当中并未使用cdn，所以标题和代码块等原本应该高亮显示的文字变成了普通文本样式
这是因为Vue mavon-editor默认使用的是cdn

如何解决呢？

只要你下载完 mavon-editor组件并运行项目，那目录/node_modules/mavon-editor/dist/下就会有相关文件，只需引用这些文件即可
建议把这些文件放到项目的一个目录中
具体看下方链接

教程

https://www.pipipi.net/questions/13803.html
如果没成功，可能是mavon-editor标签属性没设置正确

附代码

可参考

<template>
    <div class="">
                <mavon-editor
                    v-model="content"
                    :placeholder="'Edit ···'"
                    ref="md"
                    :toolbars="toolbars"
                    :external-link="externalLink"
                    :toolbarsBackground="'#f9f9f9'"
                    style="height: calc(100vh - 50px)"
                />
    </div>
</template>

<script>

export default {

    name: "name",
    data() {
        return {
            content: '',
            codeStyle: '',
            //需要配置的内容：
            externalLink: {
                markdown_css: () => '/md/markdown/github-markdown.min.css',
                hljs_js: () => '/md/highlightjs/highlight.min.js',
                hljs_css: (css) => '/md/highlightjs/styles/' + css + '.min.css',
                hljs_lang: (lang) => '/md/highlightjs/languages/' + lang + '.min.js',
                katex_css: () => '/md/katex/katex.min.css',
                katex_js: () => '/md/katex/katex.min.js',
            },
            toolbars: {		// markdown的工具栏
                bold: true, // 粗体
                italic: true, // 斜体
                header: true, // 标题
                underline: true, // 下划线
                strikethrough: true, // 中划线
                mark: true, // 标记
                superscript: true, // 上角标
                subscript: true, // 下角标
                quote: true, // 引用
                ol: true, // 有序列表
                ul: true, // 无序列表
                link: true, // 链接
                imagelink: true, // 图片链接
                code: true, // code
                table: true, // 表格
                fullscreen: true, // 全屏编辑
                readmodel: true, // 沉浸式阅读
                htmlcode: true, // 展示html源码
                help: true, // 帮助
                /* 1.3.5 */
                undo: true, // 上一步
                redo: true, // 下一步
                trash: true, // 清空
                save: false, // 保存（触发events中的save事件）
                /* 1.4.2 */
                navigation: true, // 导航目录
                /* 2.1.8 */
                alignleft: true, // 左对齐
                aligncenter: true, // 居中
                alignright: true, // 右对齐
                /* 2.2.1 */
                subfield: true, // 单双栏模式
                preview: true // 预览
            },
        }
    },
    methods: {
        $imgAdd (pos, $file) {
            console.log(pos, $file);
        },
        $imgDel() {

        },
   }
}
</script>

<style scoped lang="less">
}


</style>