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:
- Vue in the browser
- 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
Boolean
read-only Default: false
Description: enable editable or not
<CodeEditor :read-only="true"></CodeEditor>
String
value 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>
Boolean
line-nums Default: false
Description: enable line numbers to show or not, but unable in wrap text mode
<CodeEditor :line-nums="true"></CodeEditor>
Array
languages 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']]" />
Number
tab-spaces Default: 2
<CodeEditor :tab-spaces="4"></CodeEditor>
Boolean
wrap Default: false
Description: enable wrap text or not
<CodeEditor :wrap="true"></CodeEditor>
Boolean
header Default: true
Description: enable header to show or not
<CodeEditor :header="true"></CodeEditor>
Boolean
display-language Default: true
Description: enable language name to show or not
<CodeEditor :display-language="false"></CodeEditor>
Boolean
copy-code Default: true
Description: enable copy icon to show or not
<CodeEditor :copy-code="false"></CodeEditor>
String
theme Default: github-dark
Description: freely switching between 200 themes, check all the themes
<CodeEditor theme="github-dark"></CodeEditor>
String
font-size Default: 17px
<CodeEditor font-size="20px"></CodeEditor>
String
width Default: 540px
<CodeEditor width="100%"></CodeEditor>
String
height 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>
String
min-width Default: unset
<CodeEditor min-width="200px"></CodeEditor>
String
min-height Default: unset
<CodeEditor min-height="200px"></CodeEditor>
String
max-width Default: unset
<CodeEditor max-width="1000px"></CodeEditor>
String
max-height Default: unset
<CodeEditor max-height="200px"></CodeEditor>
String
padding Default: 20px
<CodeEditor padding="30px"></CodeEditor>
String
border-radius Default: 12px
<CodeEditor border-radius="4px"></CodeEditor>
String
lang-list-width Default: 110px
Description: the width of language list
<CodeEditor lang-list-width="150px"></CodeEditor>
String
lang-list-height Default: auto
Description: the height of the language list
<CodeEditor lang-list-height="70px"></CodeEditor>
Boolean
lang-list-display Default: false
Description: enable language list to show by default or not
<CodeEditor :lang-list-display="true"></CodeEditor>
String
z-index Default: 0
<CodeEditor z-index="6"></CodeEditor>
Boolean
autofocus 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();
}