https://github.com/justcaliturner/simple-code-editor
Simple code editor for Vue.js
https://github.com/justcaliturner/simple-code-editor
code-block code-editor editor highlight highlighting simple-code-editor vue
Last synced: 9 days ago
JSON representation
Simple code editor for Vue.js
- Host: GitHub
- URL: https://github.com/justcaliturner/simple-code-editor
- Owner: justcaliturner
- Created: 2021-08-17T04:34:05.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2025-06-28T16:31:49.000Z (12 months ago)
- Last Synced: 2025-11-03T22:22:02.818Z (7 months ago)
- Topics: code-block, code-editor, editor, highlight, highlighting, simple-code-editor, vue
- Language: CSS
- Homepage: https://simple-code-editor.vicless.com
- Size: 5.12 MB
- Stars: 175
- Watchers: 1
- Forks: 35
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Simple CodeEditor for Vue.js 3
Support for **Vue.js 3**
website: [simple-code-editor.vicless.com](https://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.
```html
```
Step 2. Add the JavaScript files after the `vue.js` file.
```html
```
Step 3. Declaring the component, and using the customized tag into the HTML template.
```javascript
const app = Vue.createApp({
components: {
"code-editor": CodeEditor,
},
});
```
```html
```
### 2. Usage with Vue via NPM
Step 1. Install the package from NPM:
```shell
npm install simple-code-editor
```
Step 2. Importing the modules and registration.
```javascript
import hljs from 'highlight.js';
import CodeEditor from "simple-code-editor";
export default {
components: {
CodeEditor,
},
};
```
```html
```
## Props
### read-only ` Boolean`
Default: `false`
Description: enable editable or not
```html
```
### value `String`
Default: `unset`
Description: static content setting. If requiring data binding, please use the property: [`v-model`](#v-model)
```html
```
### v-model
Description: varies based on the value of form inputs element or output of components
```html
```
### line-nums `Boolean`
Default: `false`
Description: enable line numbers to show or not, but unable in wrap text mode
```html
```
### 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
```html
```
Multiple languages:
```html
```
### tab-spaces `Number`
Default: `2`
```html
```
### wrap `Boolean`
Default: `false`
Description: enable wrap text or not
```html
```
### header `Boolean`
Default: `true`
Description: enable header to show or not
```html
```
### display-language `Boolean`
Default: `true`
Description: enable language name to show or not
```html
```
### copy-code `Boolean`
Default: `true`
Description: enable copy icon to show or not
```html
```
### theme `String`
Default: `github-dark`
Description: freely switching between 200+ themes, [check all the themes](https://simple-code-editor.vicless.com)
```html
```
### font-size `String`
Default: `17px`
```html
```
### width `String`
Default: `540px`
```html
```
### 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
```html
```
### min-width `String`
Default: `unset`
```html
```
### min-height `String`
Default: `unset`
```html
```
### max-width `String`
Default: `unset`
```html
```
### max-height `String`
Default: `unset`
```html
```
### padding `String`
Default: `20px`
```html
```
### border-radius `String`
Default: `12px`
```html
```
### lang-list-width `String`
Default: `110px`
Description: the width of language list
```html
```
### lang-list-height `String`
Default: `auto`
Description: the height of the language list
```html
```
### lang-list-display `Boolean`
Default: `false`
Description: enable language list to show by default or not
```html
```
### z-index `String`
Default: `0`
```html
```
### autofocus `Boolean`
Default: `false`
Description: enable textarea to get focused by default or not
```html
```
## Event
### @lang
Description: pass the current languange as an argument
```html
```
```javascript
getLanguage(lang) {
console.log("The current language is: " + lang);
}
```
### @content
Description: pass the static content as an argument
```html
```
```javascript
getContent(content) {
console.log("The content is: " + content);
}
```
### @textarea
Description: pass the textarea element as an argument
```html
```
```javascript
focus(node) {
node.focus();
}
```