Simple CodeEditor for Vue.js
Vue.js version: 3.0 This repository is a fork.
website: simple-code-editor.vicuxd.com
It's easy to use, both support read-only and edit mode. In this implementation, various features have been added, automatic tab insertion has been added vue slots and much more
Useage
Step 1
npm install simple-code-editor
Step 2. Importing the component and registration.
import CodeEditor from 'simple-code-editor';
export default {
components: {
CodeEditor
}
}
<CodeEditor></CodeEditor>
Customizing the theme style
You can cover the CSS file to customize the theme style.
<!--1. Setting the theme to an empty value-->
<!--2. Add your customized class to change the style-->
<CodeEditor theme="" class="github_dark"></CodeEditor>
API
Boolean
read_only Default: false
Description: whether the code is editable
<CodeEditor :read_only="true"></CodeEditor>
String
value Default: unset
Description: setting the contents of a code editor. If you want to bind the data, 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, the specific usage you can read Vue.js Documentation
Boolean
language_selector Default: false
Description: whether the language selector is availed, if the value is true
, you can use the property languages
to set which languages can be selected
<CodeEditor :language_selector="true"></CodeEditor>
Array
languages Default: [["javascript", "JS"],["cpp", "C++"],["python", "Python"]]
Description: Description: This property is a two-dimensional array, the first item of each child is an index of the language and it's required, the second item of each child is used for display, which is for the better user reading experience, it can be free to customize and optional, if it's unset, the UI display will be replaced with the index of the language. When the value of language_selector
is true
, you can set multiple languages to be selected
<CodeEditor :language_selector="true" :languages="[['javascript', 'JS'],['python', 'Python']]"></CodeEditor>
Boolean
wrap_code Default: false
Description: whether the code is allowed to wrap automatically
<CodeEditor :wrap_code="true"></CodeEditor>
Boolean
hide_header Default: false
Description: whether the header of code editor is hidden
<CodeEditor :hide_header="true"></CodeEditor>
Number
tab_space_count Default: 2
Description: number of spaces in a tab
<CodeEditor :tab-space_count="2"></CodeEditor>
Boolean
spellcheck Default: false
Description: spell check in browser
<CodeEditor :spellcheck="false"></CodeEditor>
Boolean
display_language Default: true
Description: whether the language name is displayed
<CodeEditor :display_language="false"></CodeEditor>
Boolean
copy_code Default: true
Description: whether the code can be copied by the icon button and emitted copy
event
<CodeEditor :copy_code="true"></CodeEditor>
Boolean
save_code Default: false
Description: when pressing the save button emitted save
event
<CodeEditor :save_code="false"></CodeEditor>
String
theme Default: dark
Description: switching between light and dark themes
<CodeEditor theme="light"></CodeEditor>
String
font_size Default: 17px
Description: setting the font size
<CodeEditor font_size="17px"></CodeEditor>
String
width Default: 540px
Description: setting the width of the code editor
<CodeEditor width="540px"></CodeEditor>
String
height Default: auto
Description: the height of the container is adaptive by default, you can also set it to a specific value, and the scroll bar will work with a long text
<CodeEditor height="150px"></CodeEditor>
String
min_width Default: unset
Description: setting the min-width of the code editor
<CodeEditor min_width="200px"></CodeEditor>
String
min_height Default: unset
Description: setting the min-height of the code editor
<CodeEditor min_height="200px"></CodeEditor>
String
max_width Default: unset
Description: setting the max-width of the code editor
<CodeEditor max_width="200px"></CodeEditor>
String
max_height Default: unset
Description: setting the max-height of the code editor
<CodeEditor max_height="200px"></CodeEditor>
String
border_radius Default: 12px
Description: setting the radius of the code editor
<CodeEditor border_radius="4px"></CodeEditor>
String
selector_width Default: 110px
Description: setting the width of the selector
<CodeEditor selector_width="150px"></CodeEditor>
String
selector_height Default: auto
Description: setting the height of the selector
<CodeEditor selector_height ="90px"></CodeEditor>
Boolean
selector_displayed_by_default Default: false
Description: whether the selector is displayed by default
<CodeEditor :selector_displayed_by_default="true"></CodeEditor>
String
z_index Default: unset
Description: setting the stack order of the code editor
<CodeEditor z_index="6"></CodeEditor>
Slots
header
<CodeEditor>
<template v-slot="header"></template>
</CodeEditor>
Emits
- change
- save
- copy