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

$3

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





$3



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



$3



Default:

false





Description: enable editable or not

html





$3



Default:

unset





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

v-model

html





$3



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

html





$3



Default:

false





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

html





$3



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





$3



Default:

html





$3



Default:

false





Description: enable wrap text or not

html





$3



Default:

true





Description: enable header to show or not

html





$3



Default:

true





Description: enable language name to show or not

html





$3



Default:

true





Description: enable copy icon to show or not

html





$3



Default:

github-dark





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

html





$3



Default:

17px

html





$3



Default:

540px

html





$3



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





$3



Default:

unset

html





$3



Default:

unset

html





$3



Default:

unset

html





$3



Default:

unset

html





$3



Default:

20px

html





$3



Default:

12px

html





$3



Default:

110px





Description: the width of language list

html





$3



Default:

auto





Description: the height of the language list

html





$3



Default:

false





Description: enable language list to show by default or not

html





$3



Default:

html





$3



Default:

false





Description: enable textarea to get focused by default or not

html





Event



$3



Description: pass the current languange as an argument

html

javascript

getLanguage(lang) {

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

}





$3



Description: pass the static content as an argument

html

javascript

getContent(content) {

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

}





$3



Description: pass the textarea element as an argument

html

javascript

focus(node) {

  node.focus();

}

Simple CodeEditor for Vue.js 3

Usage

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

1. Vue in the browser
2. Vue via NPM

$3

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





$3



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



$3



Default:

false





Description: enable editable or not

html





$3



Default:

unset





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

v-model

html





$3



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

html





$3



Default:

false





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

html





$3



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





$3



Default:

html





$3



Default:

false





Description: enable wrap text or not

html





$3



Default:

true





Description: enable header to show or not

html





$3



Default:

true





Description: enable language name to show or not

html





$3



Default:

true





Description: enable copy icon to show or not

html





$3



Default:

github-dark





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

html





$3



Default:

17px

html





$3



Default:

540px

html





$3



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





$3



Default:

unset

html





$3



Default:

unset

html





$3



Default:

unset

html





$3



Default:

unset

html





$3



Default:

20px

html





$3



Default:

12px

html





$3



Default:

110px





Description: the width of language list

html





$3



Default:

auto





Description: the height of the language list

html





$3



Default:

false





Description: enable language list to show by default or not

html





$3



Default:

html





$3



Default:

false





Description: enable textarea to get focused by default or not

html





Event



$3



Description: pass the current languange as an argument

html

javascript

getLanguage(lang) {

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

}





$3



Description: pass the static content as an argument

html

javascript

getContent(content) {

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

}





$3



Description: pass the textarea element as an argument

html

javascript

focus(node) {

  node.focus();

}