Estoy tratando de averiguar cómo detectar el cambio de valor en la caja de texto desde dentro del componente.

Para la entrada simplemente podemos utilizar

<input
  :value="value"
  @input="update($event.target.value)"
>

Sin embargo en textarea esto no va a funcionar.

Lo que estoy trabajando es el CKEditor componente, que deben actualizar wysiwyg contenido del modelo del valor de la componente de los padres (que se adjunta a este componente secundario) se actualiza.

Mi Editor componente actualmente se parece a esto:

<template>
    <div class="editor" :class="groupCss">
        <textarea :id="id" v-model="input"></textarea>
    </div>
</template>

<script>
    export default {
        props: {
            value: {
                type: String,
                default: ''
            },
            id: {
                type: String,
                required: false,
                default: 'editor'
            }
        },
        data() {
            return {
                input: this.$slots.default ? this.$slots.default[0].text : '',
                config: {
                    ...
                }
            }
        },
        watch: {
            input(value) {
                this.update(value);
            }
        },
        methods: {
            update(value) {
                CKEDITOR.instances[this.id].setData(value);
            },
            fire(value) {
                this.$emit('input', value);
            }
        },
        mounted () {
            CKEDITOR.replace(this.id, this.config);
            CKEDITOR.instances[this.id].setData(this.input);
            this.fire(this.input);
            CKEDITOR.instances[this.id].on('change', () => {
                this.fire(CKEDITOR.instances[this.id].getData());
            });
        },
        destroyed () {
            if (CKEDITOR.instances[this.id]) {
                CKEDITOR.instances[this.id].destroy()
            }
        }
    }
</script>

y lo incluyo en el componente padre

<html-editor
    v-model="fields.body"
    id="body"
></html-editor>

sin embargo, cuando los padres componente del modelo de cambios de valor – no acciona el observador – efectivamente, no se actualiza la ventana del editor.

Sólo necesito update() método que se llama cuando el componente principal del modelo fields.body se actualiza.

Cualquier puntero en cuanto a cómo podría acercarse a ella?

1 Comentario

  1. 2

    Que es un poco justo de código para descifrar, pero lo que me gustaría hacer es descomponer el área de texto y el WYSIWYG HTML de la ventana en dos componentes distintos y, a continuación, el padre o la madre de sincronización de los valores, así:

    Componente TextArea:

    <template id="editor">
      <textarea :value="value" @input="$emit('input', $event.target.value)" rows="10" cols="50"></textarea>
    </template>
    
    /**
     *  Editor TextArea
     */
    Vue.component('editor', {
      template: '#editor',
      props: {
        value: {
          default: '',
          type: String
        }
      }
    });
    

     

    Todo lo que estoy haciendo aquí está emitiendo la entrada de nuevo a los padres cuando los cambios, estoy usando el de entrada como el nombre del evento y value como la proposición para que yo pueda usar v-model en el editor. Ahora sólo necesito un wysiwyg ventana para mostrar el código:

    WYSIWYG Ventana:

    /**
     * WYSIWYG window
     */
    Vue.component('wysiwyg', {
      template: `<div v-html="html"></div>`,
      props: {
        html: {
          default: '',
          type: String
        }
      }
    }); 
    

    No hay mucho que hacer allí, simplemente hace que el HTML que se pasa como una patena.

    Por último solo me falta de sincronización entre los valores de los componentes:

    <div id="app">
      <wysiwyg :html="value"></wysiwyg>
      <editor v-model="value"></editor>
    </div>
    
    new Vue({
      el: '#app',
      data: {
        value: '<b>Hello World</b>'
      }
    })
    

    Ahora, cuando el editor de los cambios que emite el caso a los padres, que las actualizaciones value y a su vez los incendios que cambiar en la ventana wysiwyg. Aquí está la cosa entera en acción: https://jsfiddle.net/Lnpmbpcr/

    • Gracias @craig_h – voy a darle una oportunidad
    • Hmm no creo que vaya a funcionar como wysiwyg también debe emitir input cuando el contenido es actualizado en el momento que lo único que haría sería actualizar wysiwyg cuando escriba en editor, que me temo que no es lo que yo busco. Gracias de todos modos.
    • Ah OK, en ese caso le sugiero que busque en vuex por lo que puede extraer el estado compartido, en lugar de intentar emitir y sincronizar el estado a través de componentes del mismo.
    • Yo he terminado usando el Controlador de Eventos – cuando el padre de cambios en el modelo, yo evento de fuego – que es apresado desde dentro del editor, a continuación, se realizó la actualización.

Dejar respuesta

Please enter your comment!
Please enter your name here