es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Registro de Quill en Nuxt con el módulo de redimensionamiento de imágenes.

04 Jun, 2023 Programación

Aquí en mi proyecto Nuxt estoy usando vue2-editor y Quill junto con quill-image-resize-module.
Puedo usar el vue-editor pero no sé cómo usar Quill. Cuando importo Quill, dice que document no está definido.
Aquí está mi código.

<template>
  <div>
    <client-only> <vue-editor class="editor" v-model="arr['desc']"></vue-editor></client-only>
  </div>
</template>

<script>
let VueEditor
if (process.client) {
  VueEditor = require('vue2-editor').VueEditor
}
import Quill from "quill"
window.Quill = Quill
const ImageResize = require("quill-image-resize-module").default
Quill.register("modules/imageResize", ImageResize)
export default {
  data() {
    return {
      arr: {},
    }
  },
  components: { VueEditor },
}
</script>

Mis dependencias.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que estás tratando de importar Quill en tu proyecto Nuxt, pero te encuentras con un error que dice “document is not defined”. Este error ocurre porque Quill depende del DOM, que no está disponible durante el renderizado del lado del servidor. Para solucionar este problema, puedes usar el componente solo cliente proporcionado por Nuxt para renderizar el editor Quill solo en el lado del cliente.

    Aquí tienes una versión actualizada de tu código que debería funcionar:

    <template>
  <div>
    <client-only>
      <div id="editor" ref="editor"></div>
    </client-only>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  mounted() {
    if (process.client) {
      const Quill = require("quill");
      const ImageResize = require("quill-image-resize-module").default;
      Quill.register("modules/imageResize", ImageResize);

      const quillEditor = new Quill(this.$refs.editor, {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            [{ header: 1 }, { header: 2 }],
            [{ align: [] }],
            [{ list: "ordered" }, { list: "bullet" }],
            [{ color: [] }, { background: [] }],
            ["link", "image", "video"],
          ],
          imageResize: {},
        },
        placeholder: "Ingresa tu texto aquí...",
        theme: "snow",
      });

      quillEditor.on("text-change", () => {
        this.$emit("input", this.$refs.editor.children[0].innerHTML);
      });
      quillEditor.setContents(quillEditor.clipboard.convert(this.arr.desc));
    }
  },
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      arr: {
        desc: this.value,
      },
    };
  },
};
</script>

    En este código actualizado, estamos importando el componente “VueEditor” del paquete “vue2-editor” y mostrando un

    <

    div> con el id “editor” dentro de un componente solo cliente. Luego, utilizamos el gancho montado () para inicializar el editor Quill y registrar el módulo de redimensionamiento de imagen.

    El enganche montado () verifica si el código se está ejecutando en el cliente utilizando el indicador “process.client”. Si es así, importamos Quill, registramos el módulo de redimensionamiento de imagen e inicializamos el editor Quill dentro del

    <

    div> con el id “editor”. También agregamos algunos escuchas de eventos para actualizar el valor del componente cada vez que cambian los contenidos del editor.

    También agregamos una propiedad llamada “value” que controla el valor inicial del editor. Esto permite que el componente padre actualice el valor del editor programáticamente.

    Asegúrate de actualizar tu plantilla para usar este nuevo componente en lugar de VueEditor:

    <my-quill v-model="arr['desc']"></my-quill>

    ¡Espero que esto te ayude! Déjame saber si tienes más preguntas.

Comments are closed.