vue2 editor

Vue2Editor

Un editor de texto rico fácil de usar pero poderoso y personalizable impulsado por quill.js y vue.js

Ver documentos

Notas de lanzamiento

Instalar

Puedes usar hilo o npm

npm install vue2-editor

O

yarn add vue2-editor

Uso

 // Basic Use - Covers most scenarios
import { VueEditor } from "vue2-editor" ;

// Advanced Use - Hook into Quill's API for Custom Functionality
import { VueEditor , Quill } from "vue2-editor" ; 

Nuxt.js

Agregar vue2-editor/nuxt a la sección de módulos de nuxt.config.js

 {
  modules: [ "vue2-editor/nuxt" ] ;
}

Para evitar ver advertencias de Vue sobre un desajuste en el contenido, deberá envolver el componente VueEditor con el componente client-only que NUXT proporciona como se muestra aquí:

 < client-only >
  < VueEditor />
</ client-only > 

Accesorios

Nombre	Tipo	Por defecto	Descripción
almódulos	Formación	-	Declarar módulos de pluma para registrarse
desactivado	Booleano	FALSO	Establecer en verdadero para deshabilitar el editor
editorOptions	Objeto	-	Oferta objeto para fusionarse en configuración predeterminada (agregar formatos, módulos de pluma personalizados, etc.)
editortoolbar	Formación	** Demasiado largo para la mesa. Ver el ejemplo de la barra de herramientas a continuación	Use una barra de herramientas personalizada
identificación	Cadena	contenedor	Establezca la ID (necesaria si múltiples editores en la misma vista)
marcador de posición	Cadena	-	Texto de marcador de posición para el editor
USECUSTOMAGEGEHANDLER	Booleano	FALSO	Manejo de carga de imagen en lugar de usar la conversión predeterminada a Base64
modelo V	Cadena	-	Establezca V-Model en la propiedad de contenido o datos a la que desea vincularlo

Eventos

Nombre	Parámetros	Descripción
difuminar	pluma	Evento emitido en blur
enfocar	pluma	Emitido en el evento focus
agregado	archivo, editor, cursorlocation	Emitido cuando useCustomImageHandler es verdadero y se agrega una foto al editor
anotado por la imagen	archivo, editor, cursorlocation	Emitido cuando useCustomImageHandler es verdadero y la foto ha sido eliminada
cambio de selección	rango, OldRange, fuente	Emitido en el evento selection-change de Quill
cambio de texto	Delta, Olddelta, fuente	Emitido en el evento text-change de Quill

Ejemplos

Ejemplo - Configuración básica

< template >
  < div id = " app " >
    < vue-editor v-model = " content " ></ vue-editor >
  </ div >
</ template >

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

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h1>Some initial content</h1> "
    };
  }
};
</ script >

Ejemplo - Manejador de imágenes personalizado

Si elige usar el controlador de imágenes personalizado, se emite un evento cuando se selecciona la foto AA. Puede ver a continuación que se pasan 3 parámetros.

1. Pasa el archivo para que se maneje como necesite
2. La instancia del editor
3. La posición del cursor en el momento de la carga para que la imagen se pueda insertar en la posición correcta en el éxito

Nota Además de este ejemplo, he creado un repositorio de ejemplo que demuestra esta nueva característica con un servidor real.

< template >
  < div id = " app " >
    < vue-editor
      id = " editor "
      useCustomImageHandler
      @image-added = " handleImageAdded "
      v-model = " htmlForEditor "
    >
    </ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;
import axios from " axios " ;
export default {
  components : {
    VueEditor
  },

  data () {
    return {
      htmlForEditor : " "
    };
  },

  methods : {
    handleImageAdded : function ( file , Editor , cursorLocation , resetUploader ) {
      // An example of using FormData
      // NOTE: Your key could be different such as:
      // formData.append('file', file)

      var formData = new FormData ();
      formData . append ( " image " , file);

      axios ({
        url : " https://fakeapi.yoursite.com/images " ,
        method : " POST " ,
        data : formData
      })
        . then ( result => {
          const url = result . data . url ; // Get url from response
          Editor . insertEmbed (cursorLocation, " image " , url);
          resetUploader ();
        })
        . catch ( err => {
          console . log (err);
        });
    }
  }
};
</ script >

Ejemplo - Establecer contenido después de la carga de la página

< template >
  < div id = " app " >
    < button @click = " setEditorContent " >Set Editor Contents</ button >
    < vue-editor v-model = " htmlForEditor " ></ vue-editor >
  </ div >
</ template >

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

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      htmlForEditor : null
    };
  },

  methods : {
    setEditorContent : function () {
      this . htmlForEditor = " <h1>Html For Editor</h1> " ;
    }
  }
};
</ script >

Ejemplo - Uso de múltiples editores

< template >
  < div id = " app " >
    < vue-editor id = " editor1 " v-model = " editor1Content " ></ vue-editor >
    < vue-editor id = " editor2 " v-model = " editor2Content " ></ vue-editor >
  </ div >
</ template >

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

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      editor1Content : " <h1>Editor 1 Starting Content</h1> " ,
      editor2Content : " <h1>Editor 2 Starting Content</h1> "
    };
  }
};
</ script >

< style >
#editor1 ,
#editor2 {
  height : 350 px ;
}
</ style >

Ejemplo - Barra de herramientas personalizada

< template >
  < div id = " app " >
    < vue-editor v-model = " content " :editorToolbar = " customToolbar " ></ vue-editor >
  </ div >
</ template >

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

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h1>Html For Editor</h1> " ,
      customToolbar : [
        [ " bold " , " italic " , " underline " ],
        [{ list : " ordered " }, { list : " bullet " }],
        [ " image " , " code-block " ]
      ]
    };
  }
};
</ script >

Ejemplo - Guardar el contenido

< template >
  < div id = " app " >
    < button @click = " saveContent " ></ button >
    < vue-editor v-model = " content " ></ vue-editor >
  </ div >
</ template >

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

export default {
  components : {
    VueEditor
  },

  data () {
    return {
      content : " <h3>Initial Content</h3> "
    };
  },

  methods : {
    handleSavingContent : function () {
      // You have the content to save
      console . log ( this . content );
    }
  }
};
</ script >

Ejemplo: use una vista previa en vivo

< template >
  < div id = " app " >
    < vue-editor v-model = " content " ></ vue-editor >
    < div v-html = " content " ></ div >
  </ div >
</ template >

< script >
import { VueEditor } from ' vue2-editor '

components : {
  VueEditor
},

export default {
  data () {
    return {
      content : ' <h1>Initial Content</h1> '
    }
  }
}
</ script >

Cómo usar módulos de pluma personalizados

Hay dos formas de usar módulos personalizados con Vue2Editor. Esto se debe en parte a que ha habido casos en los que se arrojan errores al importar e intentar declarar módulos personalizados, y en parte porque creo que en realidad separa las preocupaciones muy bien.

Versión 1 - Importar y registrarse

Vue2Editor ahora exporta Quill para ayudar en este proceso.

1. Al importar VueEditor, también importe Quill.
2. Importa tus módulos personalizados
3. Registre los módulos personalizados con Quill
4. Agregue la configuración necesaria al objeto editorOptions

< template >
  < div id = " app " >
    < vue-editor
      :editorOptions = " editorSettings "
      v-model = " content " >
  </ div >
</ template >

< script >
  import { VueEditor , Quill } from ' vue2-editor '
  import { ImageDrop } from ' quill-image-drop-module '
  import ImageResize from ' quill-image-resize-module '

  Quill . register ( ' modules/imageDrop ' , ImageDrop)
  Quill . register ( ' modules/imageResize ' , ImageResize)

  export default {
    components : {
      VueEditor
    },
    data () {
      return {
        content : ' <h1>Initial Content</h1> ' ,
        editorSettings : {
          modules : {
            imageDrop : true ,
            imageResize : {}
          }
        }
      }
    }
  }
</ script >

Versión 2 - Importas | Registros de Vue2Editor

(Forma recomendada)

1. Importa tus módulos personalizados
2. Use el accesorio de customModules para declarar una matriz de módulos.
3. Agregue la configuración necesaria para esos módulos en el objeto editorOptions en los módulos que se ve a continuación

< template >
  < div id = " app " >
    < vue-editor
      :customModules = " customModulesForEditor "
      :editorOptions = " editorSettings "
      v-model = " content "
    >
    </ vue-editor >
  </ div >
</ template >

< script >
import { VueEditor } from " vue2-editor " ;
import { ImageDrop } from " quill-image-drop-module " ;
import ImageResize from " quill-image-resize-module " ;

export default {
  components : {
    VueEditor
  },
  data () {
    return {
      content : " <h1>Initial Content</h1> " ,
      customModulesForEditor : [
        { alias : " imageDrop " , module : ImageDrop },
        { alias : " imageResize " , module : ImageResize }
      ],
      editorSettings : {
        modules : {
          imageDrop : true ,
          imageResize : {}
        }
      }
    };
  }
};
</ script >

---

Desarrollo

Vue2Editor ahora usa POI para el desarrollo

• yarn dev : Ejemplo de ejemplo en modo de desarrollo
• yarn docs : desarrollo para documentos
• yarn build : componente de compilación en ambos formatos
• yarn lint : ejecute Eslint

Licencia

MIT