@xuwaer/vue3-gherkin-editor v0.0.5

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 }"
/>

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