Vue中使用Prismjs高亮TinyMCE富文本编辑保存的代码

短命女 2022-11-02 15:28 25阅读 0赞

## 1.安装Prism.js ##

cnpm install prismjs -S

## 2.安装prismjs编译器 ##

cnpm install babel-plugin-prismjs -D

## 3.编辑babel配置 ##

不同cli版本或模式的babel配置文件名不同，一般是放在`babel.config.js`、`.babelrc`、`package.json`这些文件中的某一个文件中

主要代码是plugins属性下包裹prismjs的这个数组，以下babel.config.js文件示例：

module.exports = { 
        presets: ['@vue/cli-plugin-babel/preset'],
        plugins: [
            [
                'prismjs',
                { 
                    languages: ['javascript', 'css', 'markup', 'java', 'cpp', 'csharp', 'python', 'ruby', 'php'], //高亮语言类型
                    plugins: ['line-numbers'], 
                    theme: 'tomorrow', //主题
                    css: true,
                },
            ],
        ],
    };

## 4.组件内应用 ##

<template>
        <div class="document-container" v-html="content"></div>
    </template>
    
    <script lang="ts"> import { Component, Prop, Watch, Vue } from 'vue-property-decorator'; import Prismjs from 'prismjs'; //引入插件 @Component({ name: 'DocumentPreview'}) export default class extends Vue { //文档数据 private content: string = ''; //挂载完成 private async mounted() { this.content = await this.getDocument(); this.$nextTick(() => { Prism.highlightAll(); //数据渲染完成后执行一次 }); } //获取文档详情 private getDocument() { return this.$http.get(this.$api.DOCUMENT).then( (resolve: any) => { return resolve.data; } ); } } </script>
    
    <style lang="scss" scoped> .document-container { min-height: 400px; } </style>

## 5.页面显示效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70]: /images/20221024/27c4150016bb441f8ed8a9a803a49a17.png