Скачать vuejs medium editor - vuejs medium editor Скачать исходный код

vuejs medium editor

Другие ресурсы

v3.0.0

Скачать

Vuejs Средний редактор

Компонент Vue 2 и 3 JS для среднего редактора обертки с https://github.com/yabwe/medium-editor, но все плагины переписываются в Vue.js Все конфигурации средних редакторов поддерживаются

Демо

Функции

Средний как редактор
Загрузка изображения и описание
- Ширина настройки изображения настраиваемая ширина для обычного / размер / полноэкранного размера
- Загрузка Имгура
Встраивать суть
Встроенное синтаксис кода выделение
Встраивать видео
- Видео и шорты на YouTube
- Vimeo Video
- Ткацкий видео

Использование

Установка

 yarn add vuejs-medium-editor

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

ИЛИ

 npm install vuejs-medium-editor

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

Использование

Добавить в глобальный компонент в Vue 2

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

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

Или 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' )

Не забудьте включить файл CSS в свой проект для 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'

Или в styles , как ниже

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

Для 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'

Или в styles , как ниже

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

Пример

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

Доступные реквизиты

Prefill (String) - предварительно заполненное значение редактора - значение по умолчанию,
readonly (boolean) - заставьте редактор только читать. По умолчанию - ложь
Параметры - используется для передачи параметров редактора, см. Ниже
Onchange - Pass Onchange Event
Hideimage - скрывает опцию загрузки изображения (по умолчанию -false)
Hidegist - скрывает код GIST Enced - по умолчанию (false)
hidevideo - скрывает видео в Embed - по умолчанию (false)

События

Загружено - imgur image Загрузить обратный вызов

Параметры

панель инструментов

Вы также можете настроить кнопки панели инструментов

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

Доступные параметры: все варианты доступны здесь. Вы также можете переопределить параметры, как в 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>' ,
    } ,
  ]
}

изображения

Использование параметра изображения на панели инструментов, добавьте ссылку на изображение, выделяйте в редактирование, затем выберите значок изображения

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

Кроме того, доступный вариант: благодаря запросу Ergofriend Pull в оригинальном репо.

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

Подсветка кода

Подсветка кода встроено с использованием hight.js Добавить фрагмент кода, выделить, затем выберите код на панели инструментов (вам нужно добавить pre в панели инструментов, см. Параметры выше)

Вы должны включить файл highligh.js CSS в стилях

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

Вы можете получить больше стилей темы здесь

Код, ориентированный на GIST, также встроенный. Нажмите кнопку +, затем нажмите «Код» (добавить GIST), затем добавьте URL GIST, нажмите Enter, чтобы закончить

Читать только пример

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

Nuxt.js Использование

Создайте плагин файл vuejs-medium-editor.js inside /plugins dir

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

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

импортировать плагин в nuxt.config.js с отключением режима SSR

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

Включите файл CSS для 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
]

Для 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
]