@7polo/block-editor 中文文档教程

Question

block-editor

基于 editorjs 封装的VUE组件

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

---

使用说明

props

属性	说明	默认
readOnly	是否可编辑	true
blockData	数据
state	用户外部更新状态的	true

<block-editor :readOnly="readOnly"
            v-model:blockData="article.content"
            @change="onContentChange"
            @stateChange="(state) => $emit('stateChange', state)"

---

插件

本工程里也提供一些常用的插件， 可按需进行剪裁

code

代码编辑器插件， 支持如下功能：

• 代码实时高亮
• 语言可配置
• 主题可配置
• 行号显示

数据格式

{
  "code": "",
  "language": "java",
  "theme": "tomorrow"
}

配置

var editor = EditorJS({
  "tools": {
    "header": {
      "class": Code,
      "config": {
        "showLine": true,
        "theme": 'tomorrow'
      }
    }
  }
});