@xuwaer/vue3-gherkin-editor

vue3-gherkin-editor

gherkin-editor for vue3

Install

npm add @xuwaer/vue3-gherkin-editor

1、GherkinEditor

import GherkinEditor from '@xuwaer/vue3-gherkin-editor'

<GherkinEditor
  class="full"
  v-model="content"
  showGutter
  activateLinter
  :setOptions="{ showLineNumbers: true }"
/>

Props	Type	Default	Description
v-model	string		内容
language	string	en
readOnly	boolean	false
onParse	function		文本解析 activateLinter为true时生效
autoFocus	boolean	false
theme	cucumber、jira	cucumber	样式
mode	string	gherkin_i18n	见react-gherkin-editor
fontSize	number	14
showPrintMargin	boolean	false
showGutter	boolean	false
highlightActiveLine	boolean	false
activateLinter	boolean	false
setOptions	object		见AceEditor

2、GherkinLinter

import  { GherkinLinter } from '@xuwaer/vue3-gherkin-editor'

const linter = new GherkinLinter((val: string) => {
  console.log('parse', val) // 解析结果
})
linter.setLanguage('en')
linter.parse(data) // 需要解析的文本

3、Ace Editor Instance

import { computed, ref } from 'vue'
import GherkinEditor from '@xuwaer/vue3-gherkin-editor'
import { type Ace } from 'ace-builds';

const editorRef = ref(null)
const editor = computed<Ace.Editor>(() => editorRef.value?.editor)

<GherkinEditor
  class="full"
  v-model="content"
  showGutter
  ref="editorRef"
  activateLinter
  :setOptions="{ showLineNumbers: true }"
/>

参考项目

https://github.com/ajaxorg/ace https://github.com/SmartBear/react-gherkin-editor https://github.com/CarterLi/vue3-ace-editor