vue editor js

Vue-Editor-JS

Vue-Editor-JSはEditorJSラッパーコンポーネントです。

これを最初に確認してください。 https://editorjs.io/

2.0.0バージョンユーザーの前。

このプラグインは、editorJSのラッパーコンポーネントです。 editor.jsにプラグインを使用する必要がある場合は、インポートして構成プロパティを設定します。

demo.vueをご覧ください

1.0.0バージョンの前のユーザーの前。

Vue.use vue-editor-jsをmain.jsで使用してください。

サポートされているプラグイン

• 人格
• ヘッダ
• リスト
• 画像
• InlineCode
• 埋め込み
• 引用
• マーカー
• コード
• リンク
• デリミタ
• 生
• テーブル
• 警告
• 段落
• チェックリスト

インストール

 # NPM
npm install --save vue-editor-js

# or Yarn
yarn add vue-editor-js

使用法

main.jsで

 // ...
import Editor from 'vue-editor-js'

Vue . use ( Editor )
// ...

nuxt.jsで

 // in nuxt.config.js
plugins: [
  {
    src : '~/plugins/vue-editor.js' , ssr : false
  }
] ,

// in ~/plugins/vue-editor.js
import Vue from 'vue'
import Editor from 'vue-editor-js'

Vue . use ( Editor ) 

  < editor ref="editor" : config = " config " : initialized = " onInitialized " />

初期化のインスタンスを取得するための初期化関数を定義します。初期化時に

Nuxtで使用することと混同している場合は、こちらをご覧ください

ローカルインポート

単一のコンポーネントにエディターをインポートする場合は、以下の手順に従ってください。

1. 必ず@vue/composition-apiをインストールしてください

 # NPM
npm i --save @vue/composition-api

# or Yarn
yarn add @vue/composition-api

2. main.js：

 import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'

Vue . use ( VueCompositionApi )

3. main.jsで'vue-editor-js'から何もインポートしないでください
4. あなたのコンポーネントで：

 import { Editor } from 'vue-editor-js'

export default {
  // ...
  components : {
    Editor ,
  } ,
  // ...
} 

ツール

サポートされているツール

サポートされているプラグインと同じですが、命名が異なります

• ヘッダ
• リスト
• コード
• InlineCode
• 人格
• 埋め込み
• LinkTool
• マーカー
• テーブル
• 生
• デリミタ
• 引用
• 画像
• 警告
• 段落
• チェックリスト

使用法

1. EditorJSツールをインストールします

 # NPM
npm install --save @editorjs/header

# or Yarn
yarn add @editorjs/header

2. パッケージを構成小道具に挿入します

< editor
    ...
    : config = " {
        tools: {
          header: require ( ' @editorjs/header ' )
        }
    } "
/>

サンプルコードを保存します

< template >
	< div id = " app " >
		< Editor ref = " editor " :config = " config " />

		< button @click = " invokeSave " >Save</ button >
	</ div >
</ template >

< script >
	export default {
		methods : {
			invokeSave () {
				this . $refs . editor . _data . state . editor . save ()
					. then (( data ) => {
						// Do what you want with the data here
						console . log (data)
					})
					. catch ( err => { console . log (err) })
			}
		},
	}
</ script >

画像をアップロードする（> = 1.1.0）

画像をアップロードするには、画像を処理するためのバックエンドが必要です。 Vue-Editor-JSは、可用性のための特別なconfigプロップを提供します。サーバーをテストして画像をアップロードする場合は、サーバーの例を参照してください。

< editor : config = " config " />

< script >
...
data () {
  return {
      config : {
        image : {
          // Like in https://github.com/editor-js/image#config-params
          endpoints : {
            byFile : ' http://localhost:8090/image ' ,
            byUrl : ' http://localhost:8090/image-by-url ' ,
          },
          field : ' image ' ,
          types : ' image/* ' ,
        },
      }
  }
}
</ script >

パーソナリティアバターをアップロードする（> = 2.0.1）

  config: {
    personality: {
      endpoints: 'http://localhost:8090/image'
    } 

他の小道具：

• CustomTools-名前（キー）とカスタムツールのクラス（値）を備えたオブジェクト

vue.jsプロジェクトでeditorjsをお楽しみください。

貢献する方法は？

1. このプロジェクトをフォークします。
2. コードを編集します。
3. Pr

または

1. 問題を提出するだけです！

貢献者

• チャンジューパーク
• ヤシャ
• ロスキル

wallaby.js

このリポジトリの貢献者は、wallaby.js ossライセンスを使用して、入力するときにすぐにテスト結果を取得し、コードのすぐ隣のエディターに結果を確認できます。