vuejs medium editor

Vuejs Medium Editor

Vue 2 und 3 JS-Komponente für mittelgroße Editor-Wrapper mit https://github.com/yabwe/medium-editor, aber alle Plugins werden in vue.js erneut auftreten. Alle Medium-Editor-Konfigurationen werden unterstützt

Demo

Demo

Merkmale

• Medium wie Herausgeber
• Bild -Uploader und Beschreibung
  • Bildbreite Konfigurierbare Breite für Normal- / Erweiterung / Vollbildgröße
  • Imgur Uploading
• Gist einbetten
• Inline -Code -Syntax -Hervorhebung
• Einbetten Video
  • YouTube -Video und Shorts
  • Vimeo Video
  • Webstuhl Video

Verwendung

Installation

 yarn add vuejs-medium-editor

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

ODER

 npm install vuejs-medium-editor

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

Verwendung

Zu globaler Komponente in Vue 2 hinzufügen

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

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

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

Vergessen Sie nicht, die CSS -Datei in Ihr Projekt für Vue 2 aufzunehmen

 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'

Oder in styles wie unten

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

Für 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'

Oder in styles wie unten

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

Beispiel

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

Verfügbare Requisiten

• Prefill (String) - Vorgefüllter Editorwert - Standardwert,
• Readonly (boolean) - Machen Sie den Editor nur lesen. Standard - Falsch
• Optionen - verwendet, um die Editoroptionen zu übergeben, siehe unten unten
• Onchange - Pass onChange Event
• HideImage - Bündelige Bild -Upload -Option (Standard -False)
• HideGist - verbirgt Gist Code eingebettet - Standard (Falsch)
• hidevideo - versteckt Video -Einbett - Standard (Falsch)

Ereignisse

• hochgeladen - Imgur Bild hochladen Rückruf hochladen

Optionen

Symbolleiste

Sie können auch die Symbolleistenschaltflächen anpassen

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

Verfügbare Optionen: Alle Optionen sind hier verfügbar Sie können auch Optionen wie im mittleren Editor überschreiben.

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>' ,
    } ,
  ]
}

Bilder

Verwenden Sie die Bildoption in der Symbolleiste, fügen Sie Bildlink hinzu, markieren Sie sie zum Bearbeiten und wählen Sie das Bildsymbol aus

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

Auch verfügbare Option: Dank an Ergofriend Pull Anfrage auf dem Original -Repo

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

1. Das Codes -Hervorhebung wird mit pre eingebaut.

Sie sollten die CSS -Datei highligh.js in die Stile aufnehmen

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

Hier können Sie mehr Themenstile bekommen

2. Code -Highliting mit GIST, ebenfalls eingebaut. Klicken Sie auf + Schaltfläche, dann klicken

Lesen Sie nur Beispiel

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

Nuxt.js Nutzung

vuejs-medium-editor.js /plugins

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

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

Importieren Sie ein Plugin in nuxt.config.js mit deaktivieren SSR -Modus

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

Fügen Sie eine CSS -Datei für Vue 2 hinzu

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

Für 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
] 

Über mich

Magak Emmanuel

Lizenz

MIT

Happy Coding, Star vor der Gabel ???