如何在 vuejs/vue.js 中 contenteditable true div 内的 span 标签中调用 keypress 事件？

Question

I am trying to create an editor in vue.js which has the structure like this.我正在尝试在 vue.js 中创建一个具有这样结构的编辑器。

This is the code snippet:这是代码片段：

 <!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>

But as usual the keypress, keydown, keyup events are captured in the div because it is contenteditable.但像往常一样，keypress、keydown、keyup 事件在 div 中被捕获，因为它是可编辑的。

I don't want to use我不想使用

<span contenteditable="false">
         <span contenteditable="true">
                 {{block1.text}}
         </span>
</span>
<span contenteditable="false">
         <span contenteditable="true">
                 {{block2.text}}
         </span>
</span>

Because this blocks the free cursor movement inside the editor.因为这会阻止编辑器内的自由光标移动。

What will be the best possible solution for my problem?我的问题的最佳解决方案是什么？

Answer 1

Sorry, now that I understand your predicament better, let me see if I can rephrase the problem:对不起，现在我更了解你的困境，让我看看我是否可以重新表述这个问题：

You're using a contenteditable div to change the styling on the fly for a quasi-WYSIWYG input field您正在使用contenteditable div更改准 WYSIWYG 输入字段的样式
The div swallows events from the child elements div吞下来自子元素的事件
You would also like to keep an eye on events from specific spans您还想关注特定跨度的事件

And now for some of what I found while trying to solve your problem:现在，对于我在尝试解决您的问题时发现的一些内容：

Trying to use v-model on a contenteditable div results in this warning (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.尝试在contenteditable div上使用 v-model 会导致此警告（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. [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.
Contenteditable wrapper: https://jakiestfu.github.io/Medium.js/docs/ (which Evan You, creator of Vue mentions here: https://github.com/vuejs/vue/issues/1670 ) Contenteditable 包装器： https ://jakiestfu.github.io/Medium.js/docs/（Vue 的创建者 Evan You 在这里提到： https : //github.com/vuejs/vue/issues/1670 ）
Contenteditable events: http://codebits.glennjones.net/editing/events-contenteditable.htm可编辑事件： http : //codebits.glennjones.net/editing/events-contenteditable.htm

Unfortunately, I wasn't able to figure out the exact answer you were looking for - that is, I couldn't figure out how to get a Vue event to fire from a DOMNodeElement in a contenteditable div .不幸的是，我无法找出您正在寻找的确切答案 - 也就是说，我无法弄清楚如何让 Vue 事件从contenteditable div的DOMNodeElement 。 What I did instead was this terribly hacky solution wherein I watch the contents of the div with a ref and then render each line as a span element and shove it back into the div on two events: blur , or changing the focus outside of the div, and a specific keypress (meta + enter).相反，我做的是这个非常糟糕的解决方案，其中我用ref观察 div 的内容，然后将每一行渲染为一个span元素，并在两个事件中将其推回div ： blur ，或更改 div 之外的焦点，和特定的按键（元 + 输入）。

You can see that here: https://jsfiddle.net/briankung/9fpg40q0/1/你可以在这里看到： https : //jsfiddle.net/briankung/9fpg40q0/1/

Unfortunately, I don't know exactly what you're going for, but this is my best attempt at 1am.不幸的是，我不确切知道您要做什么，但这是我凌晨 1 点的最佳尝试。 Sorry I couldn't be more helpful.抱歉，我帮不上忙了。

如何在 vuejs/vue.js 中 contenteditable true div 内的 span 标签中调用 keypress 事件？

问题描述

1 个解决方案

解决方案1
2 2017-01-16 05:17:49

如何在 vuejs/vue.js 中 contenteditable true div 内的 span 标签中调用 keypress 事件？

问题描述

1 个解决方案

解决方案1 2 2017-01-16 05:17:49

解决方案1
2 2017-01-16 05:17:49