vuejs medium editor

Éditeur de médium Vuejs

Vue 2 et 3 JS Composant pour l'éditeur moyen Emballage avec https://github.com/yabwe/medium-editor mais tous les plugins sont réécrits dans vue.js Toutes les configurations d'éditeur moyen sont prises en charge

Démo

Démo

Caractéristiques

• Éditeur
• Téléchargeur d'image et description
  • Largeur d'image Largeur configurée pour le dimensionnement normal / extension / plein écran
  • Téléchargement d'Imgur
• Intégrer l'essentiel
• Syntaxe de code en ligne Fait survient
• Vidéo intégrée
  • Vidéo et shorts YouTube
  • Vidéo Vimeo
  • Vidéo à tisser

Usage

Installation

 yarn add vuejs-medium-editor

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

OU

 npm install vuejs-medium-editor

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

Usage

Ajouter à la composante globale du vue 2

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

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

Ou 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' )

N'oubliez pas d'inclure le fichier CSS dans votre projet pour 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'

Ou dans styles comme ci-dessous

<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 >

Pour 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'

Ou dans styles comme ci-dessous

<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 > 

Exemple

< 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>

Accessoires disponibles

• Préfill (String) - valeur de l'éditeur pré-rempli - valeur par défaut,
• ReadOnly (Boolean) - Faites lire l'éditeur uniquement. Par défaut - faux
• Options - Utilisé pour transmettre les options d'éditeur, voir ci-dessous
• ENCHANGE - PASS EVENCE ONCHANGE
• Hideimage - Cache l'option de téléchargement d'image (par défaut -false)
• Hidegist - cache Gist Code Embed - Default (false)
• hidevideo - cache la vidéo intégrée - par défaut (false)

Événements

• Téléchargé - Rappel Imgur Image Téléchargez

Options

barre d'outils

Vous pouvez également personnaliser les boutons de la barre d'outils

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

Options disponibles: Toutes les options sont disponibles ici, vous pouvez également remplacer les options comme dans 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>' ,
    } ,
  ]
}

images

À l'aide de l'option Image dans la barre d'outils, ajoutez un lien d'image, mettez en surbrillance pour modifier, puis sélectionnez l'icône de l'image

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

Aussi, option disponible: grâce à la demande d'Ergofriend Pull sur le dépôt d'origine

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

Code de mise en évidence

1. La surbrillance du code est intégrée à l'aide de Sightlight.js Ajouter un extrait de code, Sélectionner, puis sélectionner le code dans la barre d'outils (vous devez ajouter pre dans la barre d'outils, voir Options ci-dessus)

Vous devez inclure le fichier highligh.js CSS dans les styles

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

Vous pouvez obtenir plus de styles de thème ici

2. Code Hostliting à l'aide de GIST, également intégré. Cliquez sur le bouton +, puis cliquez sur Code (ajoutez l'escroc), puis ajoutez URL GIST, cliquez sur Entrer pour terminer

Lire uniquement l'exemple

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

Nuxt.js Utilisation

Créer un fichier de plugin vuejs-medium-editor.js à l'intérieur /plugins Dir

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

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

Importez un plugin dans nuxt.config.js avec le mode SSR désactivé

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

Inclure un fichier CSS pour 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
]

Pour 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
] 

Sur moi

Magak Emmanuel

Licence

Mit

Codage heureux, étoile avant la fourche ???