vue js代码编辑插件(vue-prism-editor)

旧城等待， 2023-06-27 12:56 12阅读 0赞

示例：https://prism-editor.netlify.com/  
插件地址：https://github.com/koca/vue-prism-editor

## 安装 ##

npm install vue-prism-editor

yarn add vue-prism-editor

## 使用姿势 ##

<template>
      <prism-editor :code="code" language="js"></prism-editor>
    </template>
    
    <script> import PrismEditor from 'vue-prism-editor' export default { components: { PrismEditor } } </script>

或者

import VuePrismEditor from "vue-prism-editor";
    import "vue-prism-editor/dist/VuePrismEditor.css"; // import the styles
    Vue.component("prism-editor", VuePrismEditor);

或者

<script src="https://unpkg.com/vue-prism-editor"></script>
    
    
    <link rel="stylesheet" href="https://unpkg.com/vue-prism-editor/dist/VuePrismEditor.css">
    
    
    <script> Vue.component('vue-prism-editor', VuePrismEditor) new Vue({ el: '#app' }) </script>

## Prismjs ##

这个包并不会安装Prismjs，如果想使用Prismjs，需要额外自己安装。

// yarn add prismjs
    import "prismjs";
    import "prismjs/themes/prism.css";

或者

## Props ##

<table> 
 <thead> 
  <tr> 
   <th>Name</th> 
   <th>Type</th> 
   <th>Default</th> 
   <th>Options</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>v-model</td> 
   <td><code>string</code></td> 
   <td>-</td> 
   <td>-</td> 
   <td>for the <code>code</code> prop below</td> 
  </tr> 
  <tr> 
   <td>code</td> 
   <td><code>string</code></td> 
   <td><code>""</code></td> 
   <td>-</td> 
   <td>the code</td> 
  </tr> 
  <tr> 
   <td>language</td> 
   <td><code>String</code></td> 
   <td><code>"js"</code></td> 
   <td><code>vue,html,md,ts</code> + Prismjs Languages</td> 
   <td>language of the code</td> 
  </tr> 
  <tr> 
   <td>lineNumbers</td> 
   <td><code>Boolean</code></td> 
   <td><code>false</code></td> 
   <td>-</td> 
   <td>Whether to show line numbers or not</td> 
  </tr> 
  <tr> 
   <td>readonly</td> 
   <td><code>Boolean</code></td> 
   <td><code>false</code></td> 
   <td>-</td> 
   <td>Indicates if the editor is read only or not.</td> 
  </tr> 
  <tr> 
   <td>emitEvents</td> 
   <td><code>Boolean</code></td> 
   <td><code>false</code></td> 
   <td>-</td> 
   <td>Indicates if the editor should emit events.</td> 
  </tr> 
  <tr> 
   <td>autoStyleLineNumbers</td> 
   <td><code>Boolean</code></td> 
   <td><code>true</code></td> 
   <td>-</td> 
   <td>Allow the line number to be styled by this component.</td> 
  </tr> 
 </tbody> 
</table>

## Events ##

<table> 
 <thead> 
  <tr> 
   <th>Name</th> 
   <th>Parameters</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>change</td> 
   <td><code>(code)</code></td> 
   <td>Fires when the code is changed.</td> 
  </tr> 
 </tbody> 
</table>

The events below won’t be fired unless you set the `emitEvents` prop to `true`.

<table> 
 <thead> 
  <tr> 
   <th>Name</th> 
   <th>Parameters</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>keydown</td> 
   <td><code>(event)</code></td> 
   <td>This event is emitted when a keydown event happens in editor</td> 
  </tr> 
  <tr> 
   <td>keyup</td> 
   <td><code>(event)</code></td> 
   <td>This event is emitted when a keyup event happens in editor</td> 
  </tr> 
  <tr> 
   <td>editor-click</td> 
   <td><code>(event)</code></td> 
   <td>This event is emitted when clicking anywhere in the contenteditable editor</td> 
  </tr> 
 </tbody> 
</table>

## 一个完整实例 ##

<template>
    <prism-editor :code="mycode" :lineNumbers="true" @change="codeChanged" language="python"></prism-editor>
    </template>
    <script> import Vue from 'vue'; import PrismEditor from 'vue-prism-editor'; import "vue-prism-editor/dist/VuePrismEditor.css"; //引入prismjs相关的包 import "prismjs"; import "prismjs/components/prism-python"; import "prismjs/components/prism-python.min"; //自己喜欢的主题 import "prismjs/themes/prism-tomorrow.css"; Vue.component("prism-editor", PrismEditor); export default { data() { return { mycode: 'import json' } }, methods: { codeChanged(_code){ window.console.log(_code); } } } </script>