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 ( ) ;
}