我正在尝试在 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>但像往常一样按键、keydown、keyup 事件在 div 中捕获，因为它是内容可编辑的。
我不想使用
<span contenteditable="false">
<span contenteditable="true">
{{block1.text}}
</span>
</span>
<span contenteditable="false">
<span contenteditable="true">
{{block2.text}}
</span>
</span>
因为这会阻止编辑器内光标的自由移动。
解决我的问题的最佳解决方案是什么？
最佳答案
抱歉，现在我更好地了解了您的困境，让我看看是否可以重新表述该问题:
- 您正在使用
contenteditablediv动态更改准所见即所得输入字段的样式 div吞下子元素的事件- 您还想关注特定范围内的事件
现在我在尝试解决您的问题时发现了一些内容:
- 尝试在
contenteditable上使用 v-modeldiv导致此警告(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
不幸的是，我无法找出您正在寻找的确切答案 - 也就是说，我无法弄清楚如何从 DOMNodeElement 触发 Vue 事件在 contenteditable div 。相反，我所做的是这个非常糟糕的解决方案，其中我用 ref 观看 div 的内容。然后将每一行渲染为 span元素并将其推回 div关于两个事件:blur ，或更改 div 外部的焦点，以及特定的按键(meta + Enter)。
您可以在这里看到:https://jsfiddle.net/briankung/9fpg40q0/1/
不幸的是，我不知道你到底想要什么，但这是我在凌晨 1 点所做的最好的尝试。抱歉，我无法提供更多帮助。
关于javascript - 如何在 vuejs/vue.js 中的 contenteditable true div 内的 span 标签中调用按键事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41636596/