Vue.js 的简单代码编辑器 - simple-code-editor

Vue.js 的简单代码编辑器 - simple-code-editor
插件名称 simple-code-editor
发布时间 2021年9月29日
插件作者 justcaliturner

一个带有语法高亮的简单代码编辑器,使用 Vue.js 和Highlight.js构建。

安装和下载:

# Yarn
$ yarn add simple-code-editor

# NPM
$ npm i simple-code-editor

使用:

1. 安装并导入simple-code-editor.

import CodeEditor from 'simple-code-editor';
export default {
  components: {
    CodeEditor
  }
}

2. 将代码编辑器添加到应用程序中。

<CodeEditor></CodeEditor>

3. 可用的编辑器道具。

modelValue: {
  type: String,
},
wrap_code: {
  type: Boolean,
  default: false,
},
read_only: {
  type: Boolean,
  default: false,
},
autofocus: {
  type: Boolean,
  default: false,
},
hide_header: {
  type: Boolean,
  default: false,
},
value: {
  type: String,
  default: "",
},
width: {
  type: String,
  default: "540px",
},
height: {
  type: String,
  default: "auto",
},
max_width: {
  type: String,
},
min_width: {
  type: String,
},
max_height: {
  type: String,
},
min_height: {
  type: String,
},
border_radius: {
  type: String,
  default: "12px",
},
language_selector: {
  type: Boolean,
  default: false,
},
languages: {
  type: Array,
  default: function () {
    return [
      ["javascript", "JS"],
      ["cpp", "C++"],
      ["python", "Python"],
    ];
  },
},
selector_width: {
  type: String,
  default: "110px",
},
selector_height: {
  type: String,
  default: "auto",
},
selector_displayed_by_default: {
  type: Boolean,
  default: false,
},
display_language: {
  type: Boolean,
  default: true,
},
copy_code: {
  type: Boolean,
  default: true,
},
z_index: {
  type: String,
},
font_size: {
  type: String,
  default: "17px",
},