Question

我正在尝试在vue.js中创建一个具有这样结构的编辑器。

这是代码段：

＆＃13;

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

＆＃13;

但与往常一样 keypress，keydown，keyup事件都会在div 中捕获，因为它是可以满足的。

我不想使用

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

因为这会阻止编辑器内的自由光标移动。

对于我的问题，什么是最好的解决方案？

Answer 1

对不起，既然我更了解你的困境，那么让我看看我是否可以改写这个问题：

您正在使用contenteditable div动态更改样式，以获得准WYSIWYG输入字段
div从子元素中吞下事件
您还希望关注特定跨度的事件

现在我尝试解决问题时发现的一些内容：

尝试在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.
Contenteditable wrapper：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

不幸的是，我无法弄清楚你正在寻找的确切答案 - 也就是说，我无法弄清楚如何从{{1}中的DOMNodeElement开始发射Vue事件}} contenteditable。我做的是这个非常hacky的解决方案，其中我用div观看div的内容，然后将每一行渲染为ref元素并将其推回到span上的两个事件：div，或更改div之外的焦点，以及特定的按键（元+输入）。

您可以在此处看到：https://jsfiddle.net/briankung/9fpg40q0/1/

不幸的是，我不知道你到底想要什么，但这是我凌晨1点的最佳尝试。对不起，我无能为力。

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

1 个答案: