Simple CodeEditor for Vue.js 3

Support for Vue.js 3

website: simple-code-editor.vicless.com

It's easy to use, both support read-only and edit mode with 200+ themes, you can directly use it in the browser or import it via the NPM package.

Usage

There are 2 common ways that you can use the simple-code-editor package:

1. Vue in the browser
2. Vue via NPM

1. Vue in the Browser

Step 1. Add the CSS files.

1<link rel="stylesheet" href="themes.css" />
2<link rel="stylesheet" href="themes-base16.css" />
3<link rel="stylesheet" href="simple-code-editor.css" />

Step 2. Add the JavaScript files after the vue.js file.

1<script src="highlight.min.js"></script>
2<script src="simple-code-editor.js"></script>

Step 3. Declaring the component, and using the customized tag into the HTML template.

1const app = Vue.createApp({
2  components: {
3    "code-editor": CodeEditor,
4  },
5});

1<code-editor></code-editor>

2. Usage with Vue via NPM

Step 1. Install the package from NPM:

1npm install simple-code-editor

Step 2. Importing the modules and registration.

1import hljs from 'highlight.js';
2import CodeEditor from "simple-code-editor";
3export default {
4  components: {
5    CodeEditor,
6  },
7};

1<CodeEditor></CodeEditor>

Props

read-only Boolean

Default: false

Description: enable editable or not

1<CodeEditor :read-only="true"></CodeEditor>

value String

Default: unset

Description: static content setting. If requiring data binding, please use the property: v-model

1<CodeEditor value="console.log(13)"></CodeEditor>

v-model

Description: varies based on the value of form inputs element or output of components

1<CodeEditor v-model="demo"></CodeEditor> <CodeEditor v-model="demo"></CodeEditor>

line-nums Boolean

Default: false

Description: enable line numbers to show or not, but unable in wrap text mode

1<CodeEditor :line-nums="true"></CodeEditor>

languages Array

Default: [["javascript", "JS"]]

Description: [["language name", "display name"], ["language name", "display name"], ...]. Multiple languages setting will enable the language selector automatically, the language name is necessary, and the display name is optional

1<CodeEditor :languages="[['cpp', 'C++']]" />

Multiple languages:

1<CodeEditor :languages="[['cpp', 'C++'],['python', 'Python'],['php', 'PHP']]" />

tab-spaces Number

Default: 2

1<CodeEditor :tab-spaces="4"></CodeEditor>

wrap Boolean

Default: false

Description: enable wrap text or not

1<CodeEditor :wrap="true"></CodeEditor>

header Boolean

Default: true

Description: enable header to show or not

1<CodeEditor :header="true"></CodeEditor>

display-language Boolean

Default: true

Description: enable language name to show or not

1<CodeEditor :display-language="false"></CodeEditor>

copy-code Boolean

Default: true

Description: enable copy icon to show or not

1<CodeEditor :copy-code="false"></CodeEditor>

theme String

Default: github-dark

Description: freely switching between 200+ themes, check all the themes

1<CodeEditor theme="github-dark"></CodeEditor>

font-size String

Default: 17px

1<CodeEditor font-size="20px"></CodeEditor>

width String

Default: 540px

1<CodeEditor width="100%"></CodeEditor>

height String

Default: auto

Description: the height of the container is adaptive by default, it also can be set as a specific value, and the scroll bar will work with overflow

1<CodeEditor height="150px"></CodeEditor>

min-width String

Default: unset

1<CodeEditor min-width="200px"></CodeEditor>

min-height String

Default: unset

1<CodeEditor min-height="200px"></CodeEditor>

max-width String

Default: unset

1<CodeEditor max-width="1000px"></CodeEditor>

max-height String

Default: unset

1<CodeEditor max-height="200px"></CodeEditor>

padding String

Default: 20px

1<CodeEditor padding="30px"></CodeEditor>

border-radius String

Default: 12px

1<CodeEditor border-radius="4px"></CodeEditor>

lang-list-width String

Default: 110px

Description: the width of language list

1<CodeEditor lang-list-width="150px"></CodeEditor>

lang-list-height String

Default: auto

Description: the height of the language list

1<CodeEditor lang-list-height="70px"></CodeEditor>

lang-list-display Boolean

Default: false

Description: enable language list to show by default or not

1<CodeEditor :lang-list-display="true"></CodeEditor>

z-index String

Default: 0

1<CodeEditor z-index="6"></CodeEditor>

autofocus Boolean

Default: false

Description: enable textarea to get focused by default or not

1<CodeEditor :autofocus="true"></CodeEditor>

Event

@lang

Description: pass the current languange as an argument

1<CodeEditor @lang="getLanguage"></CodeEditor>

1getLanguage(lang) {
2  console.log("The current language is: " + lang);
3}

@content

Description: pass the static content as an argument

1<CodeEditor @content="getContent"></CodeEditor>

1getContent(content) {
2  console.log("The content is: " + content);
3}

@textarea

Description: pass the textarea element as an argument

1<CodeEditor @textarea="focus"></CodeEditor>

1focus(node) {
2  node.focus();
3}