README

待办事项

目标 [模块]

• 检查从管理区域安装的节点及其版本
• 从管理区域启动构建并解析数据（是否找到了所有块）
• 从其他地方获取块，例如从 /local/vueeditor/，以分离模块和仅用于项目的块
• 信息块的属性
• 用户字段的属性
• 带编辑器的文本块 - 选择编辑器

块

截至2021年12月22日

• vtext - 带quilljs可视化编辑器的文本块
• vheader - 可选择大小的标题
• vquote - 用于引用的文本字段
• documents - 带名称和描述的文档上传
• gallery - 带名称和描述的图片画廊
• youtubeVideo - 来自youtube的视频（通过链接）
• vtable - 表格
• vimage - 图片上传

注册自己的块

每个块都必须有一个配置文件，名称按 blockName.config.json 的原则
配置示例

{
  "name": "Строка",
  "handler" : "\Gtd\Editor\Handler\String"
  "conf" : {
    "foo": "bar",
    "other": "some",
    "array": [
      "one", "two", "three"
    ]
  }
}

name - 用于显示块名称的文本表示
handler - 用于处理在输出到公共部分之前的数据的类
conf - 传递到您的块中

链接

webpack/webpack#6680

应用

这是一个1C-Битри克斯的模块。其中包含

• 使用typescript编写并通过webpack构建的vue编辑器组件（app文件夹）
• 用于将组件连接为信息块类型属性和uf字段的代码
• 某些块的代码，例如保存文件（service文件夹）

安装

composer require nnagornyy/gtd.vueeditor

之后，通过比特里克斯管理区域的“已安装解决方案”安装模块。
安装后应该出现文件夹 /local/vueeditor
在init.php中连接模块 \Bitrix\Main\Loader::includeModule('gtd.vueeditor');（它将连接编辑器的js和样式）。

添加块

在构建时，将从 /local/vueeditor 复制块到 模块/app/src/ext_block

在开发块时，可以在ext_block本身中进行修改，但之后必须复制到 /local/vueeditor 并提交。

块结构
文件夹 = 块名称的代码，
配置 = .config.json的代码，
组件 = .vue的代码

在组件中，data中必须有一个字段 editorData，从中获取的信息将作为块的值保存。

作为示例，可以复制vheader并使用自己的名称进行修改。
某些准备好的块中的v前缀只是为了确保它们不会与现有标签冲突。

组件示例

<template>
  <el-input v-model="editorData" placeholder="Введите заголовок"></el-input>
</template>

<script>
    export default {
      name: "simpleHeader",
      data(){
        return{
          editorData: '',
        }
      }
    }
</script>

<style scoped>

</style>

如果手动启动编辑器（例如，作为视图组件使用时），将新块的名称添加到构造函数的allowBlock参数中。

构建

模块内部

cd local/modules/gtd.vueeditor/app
yarn build-prod

或者，可以在外部添加构建命令（例如，对于 /local/package.json）

"scripts": {
    "build:editor": "cd modules/gtd.vueeditor/app; yarn; yarn build-prod",
    "dev:editor": "cd modules/gtd.vueeditor/app; yarn; yarn build-dev"
  },

构建工件保存到 /local/vueeditor_assets/
如果您提交工件，则需要在重新构建带有新块后手动将文件夹添加到git中。
如果您即时构建，请将其添加到gitignore中。

作为vue组件使用

块编辑器的构造函数作为全局变量存在 document.vueeditor(value, inputName, allowBlock, appId)。

可以在自己的项目中添加组件包装器，该包装器将初始化编辑器对象。
示例

<template>
  <div id="editor"></div>
</template>

<script>

export default {
  name: "editor",
  props:{
    value:{
      type: Array,
      default: function(){
        return [];
      }
    },
    allowBlocks:{
      type: Array,
      default: function(){
        return [];
      }
    }
  },
  data(){
    return {}
  },
  mounted() {
    const editor = new document.vueeditor(JSON.parse(JSON.stringify(this.value)) , 'someName', this.allowBlocks, 'editor');
    editor
        .onValueChange((value) => {
          this.$emit('input', JSON.parse(JSON.stringify(value)));
        })
        .initEditor();
  }
}
</script>

在用于块编辑器的组件中添加

<editor
  v-model="event.contentRaw"
  :allow-blocks="editorBlocks"
></editor>
...
import Editor from 'path2component/editor.vue';
...
components: { Editor },
...
editorBlocks: [ 'vtext', 'documents', 'vquote', 'someNewBlock' ],

作为信息块属性使用

// todo

作为UF字段使用

// todo

添加数据获取处理器

从数据库获取数据时，可以使用块处理器在输出之前处理数据。

重要！块编辑器应直接使用未处理的数据，处理是为了在公开场合显示。

1. 使用解析器来获取块的已处理数据

public function getContent(): array
{
    \Bitrix\Main\Loader::includeModule('gtd.vueeditor');
    $arr = $this->getContentArrayFromDB();
    $editor = new \Gtd\VueEditor\Block\BlockParser($arr, $_SERVER['DOCUMENT_ROOT'].'/local/vueeditor/');
    $res = $editor->processingBlock();
    return $res;
}

第一个参数 - 从块编辑器来的数据库中反序列化的数组。
第二个参数（可选）- 查找自定义块的配置位置（默认查找在模块/app/src/ext_block）。

需要配置路径，如果您提交了工件但未在战斗中启动构建。那么，来自/local/vueeditor 的组件将不会放入模块/app/src/ext_block，并且脚本将无法在默认文件夹中找到配置。

1. 添加一个实现接口 \Gtd\VueEditor\Block\Handler 的类

2. 在块配置中添加类的路径。
   例如，在 myblock.conj.json 中: "handler": "\\My\\Module\\Blocks\\MyBlock"

3. 实现方法 setBlock(\Gtd\VueEditor\Block\Block $block) 和 getData()。可以从默认处理器 \Gtd\VueEditor\Block\DefaultHandler 在 gtd.vueeditor/lib/block/defaulthandler.php 中复制这些方法。

setBlock 方法接收原始块，在这里可以处理数据或者简单地将它们写入类的变量中，以便在 getData 中使用。
getData 方法应该返回将进入块的字段 content 的数据，并在输出时使用。

预设

// todo