justcaliturner / simple-code-editor

Simple code editor for Vue.js

Simple CodeEditor for Vue.js 3

Support for Vue.js 3

website: simple-code-editor.vicuxd.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.

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

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

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

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

const app = Vue.createApp({
  components: {
    "code-editor": CodeEditor,
  },
});

<code-editor></code-editor>

2. Usage with Vue via NPM

Step 1. Install the package from NPM:

npm install simple-code-editor

Step 2. Importing the modules and registration.

import hljs from 'highlight.js';
import CodeEditor from "simple-code-editor";
export default {
  components: {
    CodeEditor,
  },
};

<CodeEditor></CodeEditor>

Props

read-only Boolean

Default: false

Description: enable editable or not

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

value String

Default: unset

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

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

v-model

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

<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

<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

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

Multiple languages:

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

tab-spaces Number

Default: 2

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

wrap Boolean

Default: false

Description: enable wrap text or not

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

header Boolean

Default: true

Description: enable header to show or not

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

display-language Boolean

Default: true

Description: enable language name to show or not

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

copy-code Boolean

Default: true

Description: enable copy icon to show or not

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

theme String

Default: github-dark

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

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

font-size String

Default: 17px

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

width String

Default: 540px

<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

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

min-width String

Default: unset

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

min-height String

Default: unset

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

max-width String

Default: unset

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

max-height String

Default: unset

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

padding String

Default: 20px

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

border-radius String

Default: 12px

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

lang-list-width String

Default: 110px

Description: the width of language list

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

lang-list-height String

Default: auto

Description: the height of the language list

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

lang-list-display Boolean

Default: false

Description: enable language list to show by default or not

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

z-index String

Default: 0

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

autofocus Boolean

Default: false

Description: enable textarea to get focused by default or not

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

Event

@lang

Description: pass the current languange as an argument

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

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

@content

Description: pass the static content as an argument

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

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

@textarea

Description: pass the textarea element as an argument

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

focus(node) {
  node.focus();
}