Descargar vuejs medium editor - Descargar el código fuente vuejs medium editor

vuejs medium editor

Otros recursos

v3.0.0

Descargar

Vuejs Medium Editor

Vue 2 y 3 componente JS para envoltura de editor medio con https://github.com/yabwe/medium-editor, pero todos los complementos se están rehaciendo en vue.js, todas las configuraciones de editor de medios son compatibles con

Manifestación

Características

Medio como editor
Cargador de imágenes y descripción
- Ancho configurable de ancho de imagen para tamaño normal / expandir / pantalla completa
- Subiendo imgur
Insertar
Resaltado de sintaxis del código en línea
Video de incrustación
- Video y pantalones cortos de YouTube
- Video de Vimeo
- Video de telar

Uso

Instalación

 yarn add vuejs-medium-editor

# Vue 3
yarn add vuejs-medium-editor@next

O

 npm install vuejs-medium-editor

# Vue 3
npm install vuejs-medium-editor@next

Uso

Agregar al componente global en Vue 2

 import Vue from 'vue'
import MediumEditor from 'vuejs-medium-editor'

Vue . component ( 'medium-editor' , MediumEditor )

O Vue 3

 import { createApp } from 'vue'
import MediumEditor from 'vuejs-medium-editor'
import App from './App.vue'

const app = createApp ( App )

app . component ( 'medium-editor' , MediumEditor )
app . mount ( '#app' )

No olvide incluir el archivo CSS en su proyecto para Vue 2

 import 'medium-editor/dist/css/medium-editor.css'
import 'vuejs-medium-editor/src/themes/default.css'
// for the code highlighting
import 'highlight.js/styles/github.css'

O en styles como abajo

<style lang = "css" >
@import "~medium-editor/dist/css/medium-editor.css" ;
@import "~vuejs-medium-editor/src/themes/default.css" ;
/*@import '~highlight.js/styles/github.css';*/
@import '~highlight.js/styles/github.css' ;
< / style >

Para para vue 3

 import 'medium-editor/dist/css/medium-editor.css'
import 'vuejs-medium-editor/dist/themes/default.css'
// for the code highlighting
import 'highlight.js/styles/github.css'

O en styles como abajo

<style lang = "css" >
@import "medium-editor/dist/css/medium-editor.css" ;
@import "vuejs-medium-editor/dist/themes/default.css" ;
/*@import '~highlight.js/styles/github.css';*/
@import 'highlight.js/styles/github.css' ;
< / style >

Ejemplo

< medium-editor
  v-model = " content "
  : options = " options "
  : onChange = " onChange "
  v-on : uploaded = " uploadCallback "
/>

<script>
import Editor from 'vuejs-medium-editor'

export default {
  data() {
    return {
      content: '',
      options: {},
    }
  },
  components: {
    'medium-editor': Editor,
  },
  methods: {
    onChange() {
      console.log(this.content)
    },
    uploadCallback(url) {
      console.log('uploaded url', url)
    },
  },
}
</script>

Accesorios disponibles

Prefill (cadena) - Valor de editor previamente lleno - Valor predeterminado,
Readonly (Boolean) - Haga que el editor solo lea. Predeterminado - falso
Opciones: se usa para pasar opciones del editor, ver a continuación
Onchange - Pass Onchange Event
Opción de carga de imagen HideImage - Hides (predeterminado -false)
HidEgist - Hides Gist Code Incrus - Predeterminado (falso)
HidEvideo - Hides Video Incredo - Predeterminado (Falso)

Eventos

Subido - Imagen Imagen Subir la devolución de llamada

Opción

barra de herramientas

También puede personalizar los botones de la barra de herramientas

options: {
  toolbar : {
    buttons : [
      'bold' ,
      'italic' ,
      'underline' ,
      'quote' ,
      'h1' ,
      'h2' ,
      'h3' ,
      'pre' ,
      'unorderedlist' ,
    ]
  }
}

Opciones disponibles: Todas las opciones están disponibles aquí, también puede anular opciones como en Medium Editor;

options: {
  buttons : [
    'anchor' ,
    {
      name : 'pre' ,
      action : 'append-pre' ,
      aria : 'code highlight' ,
      tagNames : [ 'pre' ] ,
      contentDefault : '<b><\></b>' ,
      contentFA : '<i class="fa fa-code fa-lg"></i>' ,
    } ,
  ]
}

imágenes

Usando la opción de imagen en la barra de herramientas, agregue el enlace de imagen, resalte para editar, luego seleccione el icono de la imagen

buttons: [
  {
    name : 'image' ,
    action : 'image' ,
    aria : 'insert image from url' ,
    tagNames : [ 'img' ] ,
    contentDefault : '<b>image</b>' ,
    contentFA : '<i class="fa fa-picture-o"></i>' ,
  } ,
]

Además, opción disponible: gracias a la solicitud de extracción de Ergofriend en el repositorio original

 options: {
    uploadUrl : "https://api.imgur.com/3/image" ,
    uploadUrlHeader : { 'Authorization' : 'Client-ID a3tw6ve4wss3c' } ,
    file_input_name : "image" ,
    file_size : 1024 * 1024 * 10 ,
    imgur : true ,
 }

resaltado de código

El resaltado del código está incorporado usando el fragmento de código resaltar.js, resaltar, luego seleccionar código en la barra de herramientas (necesita agregar pre en la barra de herramientas, ver opciones anteriores)

Debe incluir el archivo highligh.js css dentro de los estilos

<style >
    /*default css  */
    @import 'highlight.js/styles/default.css' ;
    /* github style */
    @import 'highlight.js/styles/github.css' ;
< / style >

Puedes obtener más estilos temáticos aquí

Código Highliting usando GIST, también incorporado. Haga clic en + Botón, luego haga clic en Código (Agregue GIST), luego agregue URL GIST, haga clic en Entrar para finalizar

Solo lee ejemplo

< medium-editor : prefill = " defaultValue " : read-only = " true " />

Uso de nuxt.js

Cree un archivo de complemento vuejs-medium-editor.js adentro /plugins Dir

 import Vue from 'vue'
import MediumEditor from 'vuejs-medium-editor'

Vue . component ( 'medium-editor' , MediumEditor )

Importar un complemento en nuxt.config.js con el modo SSR desactivado

plugins: [ { src : '~/plugins/vuejs-medium-editor' , ssr : false } ]

incluir un archivo CSS para Vue 2

css: [
  'medium-editor/dist/css/medium-editor.css' ,
  'vuejs-medium-editor/src/themes/default.css' ,
  'highlight.js/styles/github.css' , //if using code highlight
]

Para vue 3

css: [
  'medium-editor/dist/css/medium-editor.css' ,
  'vuejs-medium-editor/dist/themes/default.css' ,
  'highlight.js/styles/github.css' , //if using code highlight
]