vuejs medium editor

vuejsメディアエディター

https://github.com/yabwe/medium-editorを使用した中編集者用ラッパー用のVue 2および3 JSコンポーネントすべてのプラグインはvue.jsで書き直していますすべてのミディアムエディター構成はサポートされています

デモ

デモ

特徴

• 編集者のような媒体
• 画像アップローダーと説明
  • イメージ幅通常 /拡張 /フル画面のサイジングのための設定可能な幅
  • Imgurアップロード
• 埋め込まれた要点
• インラインコード構文の強調表示
• 埋め込みビデオ
  • YouTubeビデオとショーツ
  • Vimeoビデオ
  • ルームビデオ

使用法

インストール

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

Vue 2のプロジェクトにCSSファイルを含めることを忘れないでください

 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（文字列） - 事前に記入されたエディター値 - デフォルト値、
• readonly（boolean） - エディターに読み取り専用にします。デフォルト - false
• オプション - エディターのオプションを渡すために使用されます。以下を参照してください
• ONCHANGE -ONCHANGEイベントを渡します
• HideImage-イメージアップロードオプション（デフォルト-False）を隠す
• HideGist-ヘニを隠しますGISTコード埋め込み - デフォルト（false）
• hidevideo-ビデオ埋め込み - デフォルト（false）

イベント

• アップロード-IMGUR画像アップロードコールバック

オプション

ツールバー

ツールバーボタンもカスタマイズできます

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

利用可能なオプション：すべてのオプションはここで利用できます。また、ミディアムエディターのようなオプションをオーバーライドすることもできます。

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

コードハイライト

1. Code Highlightingはhighlight.jsを使用して組み立てられます。JSコードスニペットの追加、ハイライト、次にツールバーでコードを選択します（ツールバーにpre追加する必要があります。上記のオプションを参照）

スタイル内にhighligh.js cssファイルを含める必要があります

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

ここでは、より多くのテーマスタイルを入手できます

2. GISTを使用したコードハイライティングも組み込まれています。 [ +]ボタンをクリックしてから、[コードを追加します（gistを追加）し、gist URLを追加し、[Enter]をクリックして完了します

例の例を読む

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

nuxt.jsの使用

プラグインファイルvuejs-medium-editor.js内部/plugins dirを作成します

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

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

SSRモードを無効にしてnuxt.config.jsにプラグインをインポートします

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

VUE 2のCSSファイルを含めます

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
] 

私について

マガック・エマニュエル

ライセンス

mit

ハッピーコーディング、フォークの前のスター？