插件名称 | vue-prism-editor |
---|---|
发布时间 | 2020年6月4日 |
插件作者 | koca |
简陋的简单代码编辑器,带有语法突出显示和行号。
2020/08/08
# 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:
// 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>
名称 | 类型 | 默认值 | 选项 | 描述 |
---|---|---|---|---|
v-model | string | – | – | 对于 code 下面的prop |
code | string | "" | – | 编码 |
language | String | "js" | vue,html,md,ts + Prismjs Languages | 代码的语言 |
lineNumbers | Boolean | false | – | 是否显示行号 |
readonly | Boolean | false | – | 指示编辑器是否为只读。 |
emitEvents | Boolean | false | – | 指示编辑器是否应该发出事件。 |
autoStyleLineNumbers | Boolean | true | – | 允许使用此组件设置行号。 |
名称 | 参量 | 描述 |
---|---|---|
change | (code) | 更改代码时触发。 |
除非您将emitEvents
prop 设置为,否则不会触发以下事件true
。
名称 | 参量 | 描述 |
---|---|---|
keydown | (event) | 当编辑器中发生keydown事件时,将发出此事件 |
keyup | (event) | 当编辑器中发生键入事件时,发出此事件 |
editor-click | (event) | 在contenteditable编辑器中的任何位置单击时都会发出此事件 |