simple code editor

VUE.JS 3的簡單編碼器3

支持vue.js 3

網站：simple-code-editor.vicuxd.com

它易於使用，既支持讀取和編輯模式，又具有200多個主題，您可以直接在瀏覽器中使用它，也可以通過NPM軟件包導入它。

用法

有兩種常見的方式可以使用simple-code-editor包：

1. 在瀏覽器中vue
2. 通過NPM進行VUE

1。瀏覽器中的VUE

步驟1。添加CSS文件。

 < link rel =" stylesheet " href =" themes.css " />
< link rel =" stylesheet " href =" themes-base16.css " />
< link rel =" stylesheet " href =" simple-code-editor.css " />

步驟2。在vue.js文件之後添加JavaScript文件。

 < script src =" highlight.min.js " > </ script >
< script src =" simple-code-editor.js " > </ script >

步驟3。聲明組件，然後將自定義標籤使用到HTML模板中。

 const app = Vue . createApp ( {
  components : {
    "code-editor" : CodeEditor ,
  } ,
} ) ; 

 < code-editor > </ code-editor >

2。通過NPM使用VUE使用

步驟1。從NPM安裝軟件包：

npm install simple-code-editor

步驟2。導入模塊和註冊。

 import hljs from 'highlight.js' ;
import CodeEditor from "simple-code-editor" ;
export default {
  components : {
    CodeEditor ,
  } ,
} ; 

 < CodeEditor > </ CodeEditor > 

道具

只讀Boolean

默認值： false

描述：啟用可編輯是否

 < CodeEditor :read-only =" true " > </ CodeEditor >

值String

默認值： unset

描述：靜態內容設置。如果需要數據綁定，請使用該屬性： v-model

 < CodeEditor value =" console.log(13) " > </ CodeEditor >

V模型

描述：根據表單輸入元素或組件輸出的值而變化

 < CodeEditor v-model =" demo " > </ CodeEditor > < CodeEditor v-model =" demo " > </ CodeEditor >

線 - 名字Boolean

默認值： false

描述：啟用線號是否顯示，但無法以Wrap文本模式顯示

 < CodeEditor :line-nums =" true " > </ CodeEditor >

語言Array

默認值： [["javascript", "JS"]]

描述：[[“語言名稱”，“顯示名稱”]，[“語言名稱”，“顯示名稱”]，...]。多種語言設置將自動啟用語言選擇器，語言名稱是必需的，並且顯示名稱是可選的

 < CodeEditor :languages =" [['cpp', 'C++']] " />

多種語言：

 < CodeEditor :languages =" [['cpp', 'C++'],['python', 'Python'],['php', 'PHP']] " />

選項卡空間Number

默認值： 2

 < CodeEditor :tab-spaces =" 4 " > </ CodeEditor >

包裹Boolean

默認值： false

描述：啟用包裹文字是否

 < CodeEditor :wrap =" true " > </ CodeEditor >

標題Boolean

默認值： true

描述：使標頭能顯示與否

 < CodeEditor :header =" true " > </ CodeEditor >

展示語言Boolean

默認值： true

描述：啟用語言名稱是否顯示

 < CodeEditor :display-language =" false " > </ CodeEditor >

複製代碼Boolean

默認值： true

描述：啟用複製圖標是否可以顯示

 < CodeEditor :copy-code =" false " > </ CodeEditor >

主題String

默認值： github-dark

描述：在200多個主題之間自由切換，檢查所有主題

 < CodeEditor theme =" github-dark " > </ CodeEditor >

字體大小的String

默認值： 17px

 < CodeEditor font-size =" 20px " > </ CodeEditor >

寬度String

默認值： 540px

 < CodeEditor width =" 100% " > </ CodeEditor >

高度String

默認值： auto

描述：默認情況下容器的高度是自適應的，也可以將其設置為特定值，滾動條將與溢出一起使用

 < CodeEditor height =" 150px " > </ CodeEditor >

最小寬度String

默認值： unset

 < CodeEditor min-width =" 200px " > </ CodeEditor >

最小的String

默認值： unset

 < CodeEditor min-height =" 200px " > </ CodeEditor >

最大寬度String

默認值： unset

 < CodeEditor max-width =" 1000px " > </ CodeEditor >

最大高度String

默認值： unset

 < CodeEditor max-height =" 200px " > </ CodeEditor >

填充String

默認值： 20px

 < CodeEditor padding =" 30px " > </ CodeEditor >

邊界拉迪烏斯String

默認值： 12px

 < CodeEditor border-radius =" 4px " > </ CodeEditor >

lang-list寬度String

默認值： 110px

描述：語言列表的寬度

 < CodeEditor lang-list-width =" 150px " > </ CodeEditor >

lang-list-Height String

默認值： auto

描述：語言列表的高度

 < CodeEditor lang-list-height =" 70px " > </ CodeEditor >

lang-list-display Boolean

默認值： false

描述：啟用語言列表默認顯示是否顯示

 < CodeEditor :lang-list-display =" true " > </ CodeEditor >

z index String

默認值： 0

 < CodeEditor z-index =" 6 " > </ CodeEditor >

自動對焦Boolean

默認值： false

描述：啟用Textarea默認是否會集中精力

 < CodeEditor :autofocus =" true " > </ CodeEditor > 

事件

@lang

描述：將當前的語言作為參數傳遞

 < CodeEditor @lang =" getLanguage " > </ CodeEditor > 

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

@內容

描述：將靜態內容作為參數傳遞

 < CodeEditor @content =" getContent " > </ CodeEditor > 

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

@textarea

描述：通過參數傳遞文本元素

 < CodeEditor @textarea =" focus " > </ CodeEditor > 

 focus ( node ) {
  node . focus ( ) ;
}