반응형
vuejs/vue.js에서 만족스러운 진정한 div 내부 스팬 태그에서 키프레스 이벤트를 호출하는 방법?
나는 이런 구조를 가진 vue.js에서 편집자를 만들려고 한다.
코드 조각:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ContentEditable problem in vue.js</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div id="editor"
contenteditable="true"
class="form-control"
style="height: 200px; overflow-y: auto">
<!-- @input="update($event,anyBlock)" if I put this inside the div tag it will call update method-->
<span @input="update($event,block1)">
<!-- This update method is not getting called
If we make this span tag contenteditable true and
put it inside a contenteditable false tag(say a span tag) it will work
But It will not give you feel like an editor, so please avoid that solution.-->
{{ block1.text }}
</span>
<span @input="update($event,block2)">
<!-- Not need to say. This has similar problem-->
{{ block1.text }}
</span>
</div>
</div>
<pre>
{{ $data }}
</pre>
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js'></script>
<script>
new Vue({
el:'.container',
data:{
block1: {
id: '1',
type: 'text',
text: 'Edit me id :1!'
},
block2: {
id: '2',
type: 'text',
text: 'Edit me id :2!'
}
},
methods: {
update: function (event, block) {
console.dir(event)
if (block.id === '1') {
this.block1.text = event.target.innerText
// If you call this function from div the whole text is going to be copied inside the div.
} else {
this.block2.text = event.target.innerText
}
}
}
})
</script>
</html>그러나 언제나처럼 키프레스, 키다운, 키업 이벤트가 만족스러우므로 디브에 포착된다.
사용하고 싶지 않다
<span contenteditable="false">
<span contenteditable="true">
{{block1.text}}
</span>
</span>
<span contenteditable="false">
<span contenteditable="true">
{{block2.text}}
</span>
</span>
이것은 편집기 내부의 자유 커서 이동을 차단하기 때문이다.
내 문제에 대한 가장 좋은 해결책은 무엇일까?
미안, 이제 네 곤경을 더 잘 이해했으니까, 내가 문제를 다시 설명할 수 있는지 알아볼게.
- A를 사용하고 있는 경우
contenteditablediv준 WYSIWYG 입력 필드의 스타일링을 즉시 변경 - 그
div어린이 요소에서 사건을 삼켜버리다. - 또한 특정 범위의 이벤트를 계속 주시하고 싶으십니까?
그리고 이제 네 문제를 해결하려고 노력하던 중 발견한 몇 가지 것에 대해 말해보도록 하자면,
- v-model을 에서 사용하려고 하는 중
contenteditablediv이 경고(Vue 2.1.8):[Vue warn]: v-model is not supported on element type: <div>. If you are working with contenteditable, it's recommended to wrap a library dedicated for that purpose inside a custom component. - 만족스러운 포장지: https://jakiestfu.github.io/Medium.js/docs/ (Vue의 창시자인 Evan You가 여기서 언급하는 것: https://github.com/vuejs/vue/issues/1670)
- 만족스러운 이벤트: http://codebits.glennjones.net/editing/events-contenteditable.htm
불행히도, 나는 당신이 찾고 있는 정확한 답을 알아낼 수 없었다. 즉, 나는 어떻게 Vue 이벤트를 발포할 수 있는지 알 수 없었다.DOMNodeElement의contenteditable div. 내가 대신 한 것은 이 지독하게 진부한 해결책이었는데, 거기서 나는 div의 내용물을 a로 지켜보았다.ref그리고 각 행을 다음과 같이 렌더링한다.span원소 그리고 그것을 다시 안으로 밀어넣다.div다음 두 가지 경우에:blur또는 div 외부에서 포커스를 변경하고 특정 키 누름(meta+입력)을 변경한다.
여기서 볼 수 있다: https://jsfiddle.net/briankung/9fpg40q0/1/
불행히도 네가 뭘 하려는지 정확히 모르겠지만 새벽 1시에 최선을 다한 것 같아.더 도움이 되지 못해서 미안해.
반응형
'Programing' 카테고리의 다른 글
| Promise.resolve의 RxJS 대안? (0) | 2022.04.06 |
|---|---|
| Python 2는 문자열과 int를 어떻게 비교하는가?왜 리스트는 숫자보다 크고 튜플은 리스트보다 큰가? (0) | 2022.04.06 |
| 라우터 서버 측면 렌더링 오류 대응: 경고: propType 실패: 필수 prop 'history'가 'RoutingContext'에 지정되지 않음 (0) | 2022.04.06 |
| 노드 및 도커 - 바벨 또는 형식 제작을 처리하는 방법 (0) | 2022.04.06 |
| 라우터 v5로 대응 오류: 개체가 반응 하위 개체로 유효하지 않음(찾은 항목: 키가 {child}인 개체) (0) | 2022.04.06 |