Vue.js中使用Ace编辑器时绑定的paste事件不触发该如何解决？

• Ace编辑器初始化完成后会自动隐藏你定义的原始<textarea>元素，转而使用内部生成的分层DOM结构（如div、span元素）承载所有编辑交互，用户实际的粘贴、输入操作都是作用在Ace创建的内部元素上，绑定在原始textarea上的事件自然不会被触发。

直接使用Ace编辑器自身提供的事件API绑定paste事件即可，无需绑定在原始textarea上。

代码修改步骤 #

1. 移除textarea上的@paste绑定：

<textarea
id="markup-textarea"
>

2. 在Ace初始化完成后通过自身的on方法绑定paste事件：

mounted: function() {
 this.$nextTick(() => {
   this.editor = ace.edit('markup-textarea', {
        mode: 'ace/mode/twig',
   });
   // 新增Ace原生paste事件绑定
   this.editor.on('paste', (event) => {
     // 调用你原有逻辑的paste方法
     this.paste(event)
     // 扩展说明：需要获取粘贴内容可直接取 event.text
     // 需要阻止默认粘贴行为可调用 event.preventDefault()
     // 需要修改粘贴内容后插入可先阻止默认行为，再调用 this.editor.insert(自定义内容)
   })
})

内容的提问来源于stack exchange，提问作者user424370