vue editor js

vue-editor-js

Vue-editor-js是Editorjs包裝器組件。

請先查看此。 https://editorjs.io/

對於2.0.0版本用戶。

該插件是Editorjs的包裝組件。如果您需要將插件用於editor.js，請導入並設置配置屬性。

請參閱演示。

對於1.0.0版本用戶。

請在main.js中使用Vue.use vue-editor-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 " />

定義初始化函數以獲取editor.js的實例

如果您與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'
    } 

其他道具：

• 定制工具 - 具有名稱（鍵）的對象和自定義工具的類（值）

享受Vue.js項目的Editorjs？

如何做出貢獻？

1. 叉這個項目。
2. 編輯代碼。
3. PR

或者

1. 只需提交問題！

貢獻者

• Changjoo公園
• Yashha
• 洛斯基

wallaby.js

歡迎此存儲庫貢獻者使用wallaby.js oss許可證在輸入時立即獲得測試結果，並在代碼旁邊查看編輯器中的結果。