封装代码编辑组件

素颜马尾好姑娘i 2023-10-01 15:27 8阅读 0赞

**目录**

1.效果

2. 安装插件

3.组件完整代码如下：

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

### 1.效果 ###

> 封装的这个组件，可以通过props传入数据，使后端的数据可以以代码的形式展现在页面上，供用户浏览，此组件的效果类似于CSDN的代码段功能。
> 
> 1. 可输入代码，并且代码语法高亮  
> 2. 支持编辑和不可编辑模式  
> 3. 提交到后端到代码内容为字符串格式

**效果如下：**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_8_color_FFFFFF_t_70_g_se_x_16][]

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

### 2. 安装插件 ###

1.安装vue-prism-editor
    npm install vue-prism-editor
    npm install prismjs // 样式
    
    2.在需要使用vue-prism-editor的组件中引入
    import { PrismEditor } from "vue-prism-editor";
    import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere
     
    // import highlighting library (you can use any library you want just return html string)
    import { highlight, languages } from "prismjs/components/prism-core";
    import "prismjs/components/prism-clike";
    import "prismjs/components/prism-javascript";
    import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles

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

### 3.组件完整代码如下： ###

**自己新建 .vue文件，然后注册为全局组件。即可任意使用。**

<template>
      <div>
        <prism-editor
          class="my-editor height-300"
          v-model="code"
          :highlight="highlighter"
          :line-numbers="lineNumbers"
        ></prism-editor>
      </div>
    </template>
    
    <script>
    import { PrismEditor } from 'vue-prism-editor'
    import 'vue-prism-editor/dist/prismeditor.min.css' // import the styles somewhere
    
    // import highlighting library (you can use any library you want just return html string)
    import { highlight, languages } from 'prismjs/components/prism-core'
    import 'prismjs/components/prism-clike'
    import 'prismjs/components/prism-javascript'
    import 'prismjs/themes/prism-tomorrow.css' // import syntax highlighting styles
    
    export default {
      components: {
        PrismEditor
      },
      props: ['code'],
      data: () => ({
    
        lineNumbers: false // true为编辑模式， false只展示不可编辑
      }),
      methods: {
        highlighter (code) {
          return highlight(code, languages.js) // returns html
        }
      }
    }
    
    </script>
    
    <style lang="scss">
    /* required class css样式必写，不然编辑器没有样式，只是纯白页面展示
    “height-300” 是给编辑器设置高度的，高度可自行设置，也可以不设置，这个样式非必需*/
    .my-editor {
      background: #2d2d2d;
      color: #ccc;
    
      font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
      font-size: 14px;
      line-height: 1.5;
      padding: 5px;
    }
    
    /* optional */
    .prism-editor__textarea:focus {
      outline: none;
    }
    
    /* not required: */
    .height-300 {
      height: 200px;
    }
    </style>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_8_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/8f5be1432219421db4bc5101f94e60b8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_8,color_FFFFFF,t_70,g_se,x_16