search

surmon-china / vue-codemirror

@codemirror code editor component for @vuejs
https://github.surmon.me/vue-codemirror
MIT License
3.25k stars 379 forks source link

how to use codemirror's show-hint in vue #66

Open 2450184176 opened 6 years ago

2450184176 commented 6 years ago

one problem happened in my project：

  1. you can see my code,following: 
    
<template>
<div class="main">
    <codemirror ref="myCm"
                :value="code"
                :options="cmOptions"
                @ready="onCmReady"
                @focus="onCmFocus"
                @changes="onChange"
                @input="onCmCodeChange">
    </codemirror>
</div>
</template>
2.then it occurs error,following:

vue.runtime.esm.js?2b0e:587 [Vue warn]: Error in event handler for "changes": "RangeError: Maximum call stack size exceeded"

found in

--->

at src\views\page\main.vue at src\views\layout.vue at src\App.vue warn @ vue.runtime.esm.js?2b0e:587logError @ vue.runtime.esm.js?2b0e:1733globalHandleError @ vue.runtime.esm.js?2b0e:1728handleError @ vue.runtime.esm.js?2b0e:1717Vue.$emit @ vue.runtime.esm.js?2b0e:2536(anonymous function) @ vue-codemirror.js?8f94:1signal @ codemirror.js?56b3:1156endOperation_finish @ codemirror.js?56b3:3857endOperations @ codemirror.js?56b3:3758(anonymous function) @ codemirror.js?56b3:3741finishOperation @ codemirror.js?56b3:2119endOperation @ codemirror.js?56b3:3738(anonymous function) @ codemirror.js?56b3:3875makeChange @ codemirror.js?56b3:5189replaceRange @ codemirror.js?56b3:5415createObj.replaceRange @ codemirror.js?56b3:6082(anonymous function) @ codemirror.js?56b3:9635Completion.pick @ show-hint.js?9b74:86Completion.finishUpdate @ show-hint.js?9b74:128(anonymous function) @ show-hint.js?9b74:114(anonymous function) @ show-hint.js?9b74:377fetchHints @ show-hint.js?9b74:365run @ show-hint.js?9b74:376resolved @ show-hint.js?9b74:381fetchHints @ show-hint.js?9b74:361Completion.update @ show-hint.js?9b74:113(anonymous function) @ show-hint.js?9b74:46onChange @ main.vue?5faf:60invoker @ vue.runtime.esm.js?2b0e:2023Vue.$emit @ vue.runtime.esm.js?2b0e:2534(anonymous function) @ vue-codemirror.js?8f94:1signal @ codemirror.js?56b3:1156endOperation_finish @ codemirror.js?56b3:3857endOperations @ codemirror.js?56b3:3758(anonymous function) @ codemirror.js?56b3:3741finishOperation @ codemirror.js?56b3:2119endOperation @ codemirror.js?56b3:3738(anonymous function) @ codemirror.js?56b3:3875makeChange @ codemirror.js?56b3:5189replaceRange @ codemirror.js?56b3:5415createObj.replaceRange @ codemirror.js?56b3:6082(anonymous function) @ codemirror.js?56b3:9635Completion.pick @ show-hint.js?9b74:86Completion.finishUpdate @ show-hint.js?9b74:128(anonymous function) @ show-hint.js?9b74:114(anonymous function) @ show-hint.js?9b74:377fetchHints @ show-hint.js?9b74:365run @ show-hint.js?9b74:376resolved @ show-hint.js?9b74:381fetchHints @ show-hint.js?9b74:361Completion.update @ show-hint.js?9b74:113(anonymous function) @ show-hint.js?9b74:46onChange @ main.vue?5faf:60invoker @ vue.runtime.esm.js?2b0e:2023Vue.$emit @ vue.runtime.esm.js?2b0e:2534(anonymous function) @ vue-codemirror.js?8f94:1signal @ codemirror.js?56b3:1156endOperation_finish @ codemirror.js?56b3:3857endOperations @ codemirror.js?56b3:3758(anonymous function) @ codemirror.js?56b3:3741finishOperation @ codemirror.js?56b3:2119endOperation @ codemirror.js?56b3:3738(anonymous function) @ codemirror.js?56b3:3875makeChange @ codemirror.js?56b3:5189replaceRange @ codemirror.js?56b3:5415createObj.replaceRange @ codemirror.js?56b3:6082(anonymous function) @ codemirror.js?56b3:9635Completion.pick @ show-hint.js?9b74:86Completion.finishUpdate @ show-hint.js?9b74:128(anonymous function) @ show-hint.js?9b74:114(anonymous function) @ show-hint.js?9b74:377fetchHints @ show-hint.js?9b74:365run @ show-hint.js?9b74:376resolved @ show-hint.js?9b74:381fetchHints @ show-hint.js?9b74:361Completion.update @ show-hint.js?9b74:113(anonymous function) @ show-hint.js?9b74:46onChange @ main.vue?5faf:60invoker @ vue.runtime.esm.js?2b0e:2023Vue.$emit @ vue.runtime.esm.js?2b0e:2534(anonymous function) @ vue-codemirror.js?8f94:1signal @ codemirror.js?56b3:1156endOperation_finish @ codemirror.js?56b3:3857endOperations @ codemirror.js?56b3:3758(anonymous function) @ codemirror.js?56b3:3741finishOperation @ codemirror.js?56b3:2119endOperation @ codemirror.js?56b3:3738(anonymous function) @ codemirror.js?56b3:3875makeChange @ codemirror.js?56b3:5189replaceRange @ codemirror.js?56b3:5415createObj.replaceRange @ codemirror.js?56b3:6082(anonymous function) @ codemirror.js?56b3:9635Completion.pick @ show-hint.js?9b74:86Completion.finishUpdate @ show-hint.js?9b74:128(anonymous function) @ show-hint.js?9b74:114(anonymous function) @ show-hint.js?9b74:377fetchHints @ show-hint.js?9b74:365run @ show-hint.js?9b74:376resolved @ show-hint.js?9b74:381fetchHints @ show-hint.js?9b74:361Completion.update @ show-hint.js?9b74:113(anonymous function) @ show-hint.js?9b74:46onChange @ main.vue?5faf:60invoker @ vue.runtime.esm.js?2b0e:2023Vue.$emit @ vue.runtime.esm.js?2b0e:2534(anonymous function) @ vue-codemirror.js?8f94:1signal @ codemirror.js?56b3:1156endOperation_finish @ codemirror.js?56b3:3857endOperations @ codemirror.js?56b3:3758(anonymous function) @ codemirror.js?56b3:3741finishOperation @ codemirror.js?56b3:2119endOperation @ codemirror.js?56b3:3738(anonymous function) @ codemirror.js?56b3:3875makeChange @ codemirror.js?56b3:5189replaceRange @ codemirror.js?56b3:5415createObj.replaceRange @ codemirror.js?56b3:6082(anonymous function) @ codemirror.js?56b3:9635Completion.pick @ show-hint.js?9b74:86Completion.finishUpdate @ show-hint.js?9b74:128(anonymous function) @ show-hint.js?9b74:114(anonymous function) @ show-hint.js?9b74:377fetchHints @ show-hint.js?9b74:365run @ show-hint.js?9b74:376resolved @ show-hint.js?9b74:381fetchHints @ show-hint.js?9b74:361Completion.update @ show-hint.js?9b74:113(anonymous function) @ show-hint.js?9b74:46onChange @ main.vue?5faf:60invoker @ vue.runtime.esm.js?2b0e:2023Vue.$emit @ vue.runtime.esm.js?2b0e:2534(anonymous function) @ vue-codemirror.js?8f94:1signal @ codemirror.js?56b3:1156endOperation_finish @ codemirror.js?56b3:3857endOperations @ codemirror.js?56b3:3758(anonymous function) @ codemirror.js?56b3:3741finishOperation @ codemirror.js?56b3:2119endOperation @ codemirror.js?56b3:3738(anonymous function) @ codemirror.js?56b3:3875makeChange @ codemirror.js?56b3:5189replaceRange @ codemirror.js?56b3:5415createObj.replaceRange @ codemirror.js?56b3:6082(anonymous function) @ codemirror.js?56b3:9635Completion.pick @ show-hint.js?9b74:86Completion.finishUpdate @ show-hint.js?9b74:128(anonymous function) @ show-hint.js?9b74:114(anonymous function) @ show-hint.js?9b74:377fetchHints @ show-hint.js?9b74:365run @ show-hint.js?9b74:376resolved @ show-hint.js?9b74:381fetchHints @ show-hint.js?9b74:361Completion.update @ show-hint.js?9b74:113(anonymous function) @ show-hint.js?9b74:46onChange @ main.vue?5faf:60invoker @ vue.runtime.esm.js?2b0e:2023Vue.$emit @ vue.runtime.esm.js?2b0e:2534(anonymous function) @ vue-codemirror.js?8f94:1signal @ codemirror.js?56b3:1156endOperation_finish @ codemirror.js?56b3:3857endOperations @ codemirror.js?56b3:3758(anonymous function) @ codemirror.js?56b3:3741finishOperation @ codemirror.js?56b3:2119endOperation @ codemirror.js?56b3:3738(anonymous function) @ codemirror.js?56b3:3875makeChange @ codemirror.js?56b3:5189replaceRange @ codemirror.js?56b3:5415createObj.replaceRange @ codemirror.js?56b3:6082(anonymous function) @ codemirror.js?56b3:9635Completion.pick @ show-hint.js?9b74:86Completion.finishUpdate @ show-hint.js?9b74:128(anonymous function) @ show-hint.js?9b74:114(anonymous function) @ show-hint.js?9b74:377fetchHints @ show-hint.js?9b74:365run @ show-hint.js?9b74:376resolved @ show-hint.js?9b74:381fetchHints @ show-hint.js?9b74:361Completion.update @ show-hint.js?9b74:113(anonymous function) @ show-hint.js?9b74:46onChange @ main.vue?5faf:60invoker @ vue.runtime.esm.js?2b0e:2023Vue.$emit @ vue.runtime.esm.js?2b0e:2534(anonymous function) @ vue-codemirror.js?8f94:1signal @ codemirror.js?56b3:1156endOperation_finish @ codemirror.js?56b3:3857endOperations @ codemirror.js?56b3:3758(anonymous function) @ codemirror.js?56b3:3741finishOperation @ codemirror.js?56b3:2119endOperation @ codemirror.js?56b3:3738(anonymous function) @ codemirror.js?56b3:3875makeChange @ codemirror.js?56b3:5189replaceRange @ codemirror.js?56b3:5415createObj.replaceRange @ codemirror.js?56b3:6082(anonymous function) @ codemirror.js?56b3:9635Completion.pick @ show-hint.js?9b74:86Completion.finishUpdate @ show-hint.js?9b74:128(anonymous function) @ show-hint.js?9b74:114(anonymous function) @ show-hint.js?9b74:377fetchHints @ show-hint.js?9b74:365run @ show-hint.js?9b74:376resolved @ show-hint.js?9b74:381fetchHints @ show-hint.js?9b74:361 vue.runtime.esm.js?2b0e:1737 RangeError: Maximum call stack size exceeded(…) ```
surmon-china commented 6 years ago

@2450184176 

onCmReady(cm) {
    cm.on('keypress', () => {
        cm.showHint()
    })
}
BH-NOTHING commented 5 years ago

@surmon-china There is also a small problem,codemirror will automatical selecte hint every time.If I want to write 'fua',however what i get is 'functiona'

BH-NOTHING commented 5 years ago

ok，After scaning the source code,i solved it by adding {completeSingle:false}

onCmReady(cm) {
    cm.on('keypress', () => {
        cm.showHint({completeSingle:false})
    })
}
2450184176 commented 5 years ago

you both great!!!

wjhcc2018 commented 5 years ago

https://jsfiddle.net/dzw6zb72/ cm 里面没有 showHint，报 showHint 未定义呀

surmon-china commented 5 years ago

@wjhcc2018 import some resource with show-hint

surmon-china commented 5 years ago

@BH-NOTHING nice!

weinipaodekuai commented 1 year ago

groovy 代码提示不支持吗？

vmato commented 7 months ago 
        onCmReady(cm) {
            console.log('the editor is ready', cm);
            cm.on('keypress', () => {
                alert(1)
                //cm.showHint()
            })
        },

getting "cm.on is not a function"

console:

the editor is ready Object { state: {…}, view: {…}, container: div#cme.v-codemirror }

Tyrone2333 commented 3 months ago 
        onCmReady(cm) {
            console.log('the editor is ready', cm);
            cm.on('keypress', () => {
                alert(1)
                //cm.showHint()
            })
        },

getting "cm.on is not a function"

console:

the editor is ready Object { state: {…}, view: {…}, container: div#cme.v-codemirror }

import 'codemirror/addon/hint/show-hint'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/sql-hint'