Vue Prism代码编辑器

Vue Prism代码编辑器
插件名称 vue-prism-editor
发布时间 2020年6月4日
插件作者 koca

简陋的简单代码编辑器,带有语法突出显示和行号。

变更日志:

2020/08/08

  • v1.0.1

特征:

  • 代码编辑
  • 语法高亮
  • 撤销重做
  • 复制粘贴
  • 添加新行时,保留前一行的空格/制表符
  • 可在移动设备上使用(感谢contenteditable)
  • 调整为父级宽度和高度
  • 支持行号
  • 支持自动编辑编辑器
  • 自动设置行号(可选)

安装和下载:

# Yarn
$ yarn add vue-prism-editor

# NPM
$ npm install vue-prism-editor --save

用法

在本地注册组件并使用(推荐)

<template>
  <prism-editor :code="code" language="js"></prism-editor>
</template>

<script>
import PrismEditor from 'vue-prism-editor'
export default {
  components: {
    PrismEditor
  }
}
</script>

或在以下位置全局注册组件 main.js

import VuePrismEditor from "vue-prism-editor";
import "vue-prism-editor/dist/VuePrismEditor.css"; // 导入风格
Vue.component("prism-editor", VuePrismEditor);

浏览器用法:

<!-- vue-prism-editor JavaScript -->
<script src="https://unpkg.com/vue-prism-editor"></script>

<!-- vue-prism-editor CSS -->
<link rel="stylesheet" href="https://unpkg.com/vue-prism-editor/dist/VuePrismEditor.css">

<!-- use -->
<script>
Vue.component('vue-prism-editor', VuePrismEditor)
new Vue({
    el: '#app'
})
</script>

Prismjs

该软件包不会安装Prismjs。如果您使用Prismjs,则已经跳过此步骤。如果不是,则需要在应用程序中的某个位置加载Prismjs:

// yarn 添加 prismjs
import "prismjs";
import "prismjs/themes/prism.css";

要么:

<link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism.css" />
<script src="https://unpkg.com/prismjs"></script>

Props

名称类型默认值选项描述
v-modelstring 对于  code 下面的prop
codestring"" 编码
languageString"js"vue,html,md,ts + Prismjs Languages 代码的语言
lineNumbersBooleanfalse 是否显示行号
readonlyBooleanfalse 指示编辑器是否为只读。
emitEventsBooleanfalse 指示编辑器是否应该发出事件。
autoStyleLineNumbersBooleantrue 允许使用此组件设置行号。

事件

名称参量描述
change (code)更改代码时触发。

除非您将emitEventsprop 设置为,否则不会触发以下事件true

名称参量描述
keydown (event)当编辑器中发生keydown事件时,将发出此事件
keyup (event)当编辑器中发生键入事件时,发出此事件
editor-click (event)在contenteditable编辑器中的任何位置单击时都会发出此事件