将redactor用作vue组件[重复]答案

【问题标题】：Use redactor as a vue component [duplicate]将redactor用作vue组件[重复]
【发布时间】：2017-08-16 19:34:52
【问题描述】：

我正在尝试将 redactor 用作 vuejs 2 组件，但我遇到了很多麻烦，因为一旦加载 redactor 就会创建一个新 div，所以我无法在该 div 上收听 keyup 事件。请看我下面的代码。

Vue 组件

<template>
  <div>
    <textarea @keyup="internalValue" class="form-control question-create-editor" id="question_description" placeholder="Go wild with all the details here - make image upload work" rows="3">
  </div>
</template>

<script>
  export default {
    props: ['value'],
    data () {
      return {
        internalValue: this.value
      }
    },
    mounted: function(){
      $(function() {
        // $( document ).ready(function() {
          $('#question-create-form .question-create-editor').redactor({
            imageUpload:'/urlGoesHereBro/',
            plugins: ['video', 'imagemanager', 'counter', 'limiter'],
            buttonsHide:['html', 'formatting', 'deleted', 'indent', 'outdent', 'alignment', 'horizontalrule']
          });
          $('#question-create-form .redactor-editor').attr('v-model', 'questionDescription');
        // });
      });
    },
    watch: {
      internalValue(v){
        this.$emit($('.redactor-editor').html(), v);
      }
    }
};
</script>

注册组件

Vue.component('vueredactor', require('./components/redactor-qa.vue'));

初始化 VUE

var App = new Vue({
        el: '#app',
        data: {
          questionDescription: null
        }
    });

HTML

<div id="app">
  <vueredactor v-model="questionDescription"></vueredactor>
</div>

【问题讨论】：

正确包装一个小部件需要做很多事情。这对你来说将是一次学习冒险。 :) 不要使用文档级别的 jQuery 选择器，而是使用 this.$el 作为您的顶级 DOM 元素。参考这里：vuejs.org/v2/api/#mounted
感谢您的信息，我将开始我的新冒险:)
对于遇到相同问题的任何人，请参阅此问题中的答案：stackoverflow.com/questions/43035340/…

标签： vue.js vuejs2 vue-component redactor

【解决方案1】：

关于新的 div，你可以监听它上面的事件，但不能通过应用 Vue 属性。因为您在组件内部，所以您可以使用 jQuery 来查找元素，将侦听器附加到它们，以及任何其他有意义的 DOM 操作，以便在 Vue 和您的小部件之间架起桥梁。只需将自己限制在组件内的元素中即可。

Vue 为您提供了一个 $el 成员（不要被美元符号所迷惑，它不是 jQuery 对象）作为组件实例的根元素。我没有任何编辑器的经验，所以我不能告诉你什么会起作用，但你可能有类似的东西

mounted: function(){
  $(function() {
      $(this.$vm).find('.question-create-editor').redactor({
        imageUpload:'/urlGoesHereBro/',
        plugins: ['video', 'imagemanager', 'counter', 'limiter'],
        buttonsHide:['html', 'formatting', 'deleted', 'indent', 'outdent', 'alignment', 'horizontalrule']
      });
      $(this.$vm).find('.new-redactor-div').keyup((e) => {
        this.$emit('change', e);
      });
  });
},

【讨论】：