tq-ace-editor

安装

npm install tq-ace-editor
// or
yarn tq-ace-editor

使用

局部引用

<template>
  <Editor />
</template>
<script>
  import Editor from 'tq-ace-editor'
  export default {
    components: { Editor }
  }
</script>

全局引入

// main.js
import Editor from 'tq-ace-editor'
Vue.component('Editor',Editor)

示例

<template>
  <Editor
    height="80vh"
    width="100%"
    ref="editor"
    v-model="content"
    :options="aceOption"
    lang="sh"
    @init="editorInit"
    theme="tomorrow_night_bright"/>
</template>
<script>
  import Editor from 'tq-ace-editor'
  export default {
    data() {
      return {
        content: '',
        aceOption: {
          enableBasicAutocompletion: true,
          enableSnippets: true,
          enableLiveAutocompletion: true,
          tabSize: 6,
          fontSize: 14
        }
      }
    },
    components: { Editor },
    methods: {
      editorInit() {
        require('brace/ext/language_tools')
        require('brace/mode/sh')
        require('brace/theme/tomorrow_night_bright')
        require('brace/snippets/sh')
      }
    }
  }
</script>

hook

名称	说明	类型	默认值
init	编辑器初始化钩子，当初始化完成后触发	fn	-

属性

名称	说明	类型	默认值
value	编辑器内容	String	-
lang	编辑器语言	String	text
theme	编辑器主题名	String	chrome
height	编辑器高度	String	100%
width	编辑器宽度	String	100%
options	编辑器配置项	Object	{}

options 选项

editor选项

选项名	值类型	默认值	可选值	备注
selectionStyle	String	text	line/text	选中样式
highlightActiveLine	Boolean	true	-	高亮当前行
highlightSelectedWord	Boolean	true	-	高亮选中文本
readOnly	Boolean	false	-	是否只读
cursorStyle	String	ace	ace/slim/smooth/wide	光标样式
mergeUndoDeltas	String/Boolean	false	always	合并撤销
behavioursEnabled	Boolean	true	-	启用行为
wrapBehavioursEnabled	Boolean	true	-	启用换行
autoScrollEditorIntoView	Boolean	false	-	启用滚动
copyWithEmptySelection	Boolean	true	-	复制空格
useSoftTabs	Boolean	false	-	使用软标签
navigateWithinSoftTabs	Boolean	false	-	软标签跳转
enableMultiselect	Boolean	false	-	选中多处

renderer选项

选项名	值类型	默认值	可选值	备注
hScrollBarAlwaysVisible	Boolean	false	-	纵向滚动条始终可见
vScrollBarAlwaysVisible	Boolean	false	-	横向滚动条始终可见
highlightGutterLine	Boolean	true	-	高亮边线
animatedScroll	Boolean	false	-	滚动动画
showInvisibles	Boolean	false	-	显示不可见字符
showPrintMargin	Boolean true	-	显示打印边距
printMarginColumn	Number	80	-	设置页边距
printMargin	Boolean/Number	false	-	显示并设置页边距
fadeFoldWidgets	Boolean	false	-	淡入折叠部件
showFoldWidgets	Boolean	true	-	显示折叠部件
showLineNumbers	Boolean	true	-	显示行号
showGutter	Boolean	true	-	显示行号区域
displayIndentGuides	Boolean	true	-	显示参考线
fontSize	Number/String	inherit	-	设置字号
fontFamily	String	inherit	-	设置字体
maxLines	Number	-	-	至多行数
minLines	Number	-	-	至少行数
scrollPastEnd	Boolean/Number	0	-	滚动位置
fixedWidthGutter	Boolean	false	-	固定行号区域宽度
theme	String	-	-	主题引用路径，例如"ace/theme/textmate"

mouseHandler选项

选项名	值类型	默认值	可选值	备注
scrollSpeed	Number	-	-	滚动速度
dragDelay	Number	-	-	拖拽延时
dragEnabled	Boolean	true	-	是否启用拖动
focusTimout	Number	-	-	聚焦超时
tooltipFollowsMouse	Boolean	false	-	鼠标提示

session选项

选项名	值类型	默认值	可选值	备注
firstLineNumber	Number	1	-	起始行号
overwrite	Boolean	-	-	重做
newLineMode	String	auto	auto/unix/windows	新开行模式
useWorker	Boolean	-	-	使用辅助对象
useSoftTabs	Boolean	-	-	使用软标签
tabSize	Number	-	-	标签大小
wrap	Boolean	-	-	换行
foldStyle	String	-	markbegin/markbeginend/manual	折叠样式
mode	String	-	-	代码匹配模式，例如“ace/mode/text"

扩展选项

选项名	值类型	默认值	可选值	备注
enableBasicAutocompletion	Boolean	-	-	启用基本自动完成
enableLiveAutocompletion	Boolean	-	-	启用实时自动完成
enableSnippets	Boolean	-	-	启用代码段
enableEmmet	Boolean	-	-	启用Emmet
useElasticTabstops	Boolean	-	-	使用弹性制表位

主题

使用主题的时候记得一定要先引主题再使用！require('brace/theme/主题名')

主题列表

* ambiance
* chaos
* chrome
* clouds
* clouds_midnight
* cobalt
* crimson_editor
* dawn
* dracula
* dreamweaver
* eclipse
* github
* gob
* gruvbox
* idle_fingers
* iplastic
* katzenmilch
* kr_theme
* kuroir
* merbivore
* merbivore_soft
* monokai
* mono_industrial
* pastel_on_dark
* solarized_dark
* solarized_light
* sqlserver
* terminal
* textmate
* tomorrow
* tomorrow_night
* tomorrow_night_blue
* tomorrow_night_bright
* tomorrow_night_eighties
* twilight
* vibrant_ink
* xcode

语言

使用主题的时候记得一定要先引主题再使用！require('brace/mode/语言名')

语言列表

* abap
* abc
* actionscript
* ada
* apache_conf
* applescript
* asciidoc
* assembly_x86
* autohotkey
* batchfile
* bro
* c9search
* cirru
* clojure
* cobol
* coffee
* coldfusion
* csharp
* csound_document
* csound_orchestra
* csound_score
* css
* curly
* c_cpp
* d
* dart
* diff
* django
* dockerfile
* dot
* drools
* eiffel
* ejs
* elixir
* elm
* erlang
* forth
* fortran
* ftl
* gcode
* gherkin
* gitignore
* glsl
* gobstones
* golang
* graphqlschema
* groovy
* haml
* handlebars
* haskell
* haskell_cabal
* haxe
* hjson
* html
* html_elixir
* html_ruby
* ini
* io
* jack
* jade
* java
* javascript
* json
* jsoniq
* jsp
* jssm
* jsx
* julia
* kotlin
* latex
* lean
* less
* liquid
* lisp
* livescript
* live_script
* logiql
* lsl
* lua
* luapage
* lucene
* makefile
* markdown
* mask
* matlab
* mavens_mate_log
* maze
* mel
* mipsassembler
* mips_assembler
* mushcode
* mysql
* nix
* nsis
* objectivec
* ocaml
* pascal
* perl
* pgsql
* php
* pig
* plain_text
* powershell
* praat
* prolog
* properties
* protobuf
* python
* r
* razor
* rdoc
* red
* rhtml
* rst
* ruby
* rust
* sass
* scad
* scala
* scheme
* scss
* sh
* sjs
* smarty
* snippets
* soy_template
* space
* sparql
* sql
* sqlserver
* stylus
* svg
* swift
* swig
* tcl
* test.
* tex
* text
* textile
* toml
* tsx
* turtle
* twig
* typescript
* vala
* vbscript
* velocity
* verilog
* vhdl
* wollok
* xml
* xquery
* yaml

其他

要使用语言或者主题时，记得都要require一下相关的文件才能使用！记得切换npm仓库为私有仓库不然无法下载这个包！