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许可证在输入时立即获得测试结果，并在代码旁边查看编辑器中的结果。