vuejs medium editor

Vuejs Editor Médio

Vue 2 e 3 JS Component for Medium Editor Wrapper com https://github.com/yabwe/medium-editor, mas todos os plugins estão reescrita no vue.js Todas as configurações de editor médio são suportadas

Demonstração

Demonstração

Características

• Editor médio como
• Uploader e descrição da imagem
  • Largura da imagem Largura configurável para dimensionamento normal / expandido / de tela cheia
  • Upload de imgur
• Incorporar esguicha
• Sintaxe do código embutido destaque
• Vídeo de incorporação
  • Vídeo e shorts do YouTube
  • Vídeo do Vimeo
  • Vídeo de tear

Uso

Instalação

 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

Uso

Adicionar ao componente global no 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ão se esqueça de incluir o arquivo CSS em seu projeto 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'

Ou em styles como abaixo

<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 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 em styles como abaixo

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

Exemplo

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

Adereços disponíveis

• pré -encerrar (string) - valor do editor preenchido pré - valor padrão,
• READONLY (Boolean) - Faça o editor apenas ler. Padrão - Falso
• Opções - usado para passar as opções do editor, veja abaixo
• OnChange - Passe o evento
• Opção HideImage - Hides Image Upload (padrão -false)
• Hidegist - Hides GIST Código Incorporado - Padrão (false)
• Hidevideo - oculta o vídeo incorporado - padrão (false)

Eventos

• Carregado - Imgur Image Upload de retorno de chamada

Opções

barra de ferramentas

Você pode personalizar os botões da barra de ferramentas também

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

Opções disponíveis: Todas as opções estão disponíveis aqui, você também pode substituir as opções como no editor médio;

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

imagens

Usando a opção de imagem na barra de ferramentas, adicione o link da imagem, destaque para editar e selecione o ícone da imagem

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

Além disso, opção disponível: graças ao Ergofriend Pull Solicy no repositório 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 ,
 }

Código destacando

1. O destaque do código está embutido usando o Highlight.js Adicionar snippet de código, destaque e selecione Código na barra de ferramentas (você precisa adicionar pre -na barra de ferramentas, consulte as opções acima)

Você deve incluir o arquivo CSS highligh.js dentro dos estilos

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

Você pode obter mais estilos de tema aqui

2. Código Highliting usando GIST, também embutido. Clique no botão +, depois clique em Código (Adicione GIST) e adicione URL GIST, clique em Enter para terminar

Leia apenas exemplo

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

Uso do Nuxt.js

Crie um arquivo de plug-in vuejs-medium-editor.js Inside /plugins Dir

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

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

Importe um plug -in em nuxt.config.js com o modo SSR desativado

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

Inclua um arquivo 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
] 

Sobre mim

Magak Emmanuel

Licença

Mit

Codificação feliz, estrela antes do garoto ???