simple-code-editor
v2.0.9
Published
Simple code editor for Vue.js
Downloads
20,996
Maintainers
Readme
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
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();
}