编辑器扩展
编辑器扩展，在表单等需要特定展示数据和处理数据的部件中，经常被使用。
扩展编辑器步骤
1. 新建编辑器模板文件
常规情况下，建立以下三个部分即可：
- 编辑器样式 EDITOR.less.ftl
- 默认编辑器内容 EDITOR.tsx.ftl
- 编辑器标识 template.properties
如下图所图：
2. 新建扩展编辑器标识
扩展标识内容：
EDITORTYPE=pluginseditor
EDITORTYPE 是编辑器类型，pluginseditor 是编辑器标识名称，属于用户自定义，在配置平台中使用。
3. 新建编辑器默认内容
<plugins-editor
name='${item.name}'
v-model={this.data.${item.name}}
formState={this.formState}
data={this.data}
disabled={this.detailsModel.${item.name}.disabled}
style='${item.getEditorCssStyle()}'
on-formitemvaluechange={this.onFormItemValueChange}>
</plugins-editor>
4. 新建系统应用插件
如下图所示：
其中插件类型必须是编辑器自定义绘制插件，插件标识必须与扩展编辑器标识一致。
扩展编辑器使用
此处不做扩展编辑器使用介绍，请参考其他文档。
假设编辑属性代码名称为 ordername，引用后的扩展编辑器经过 FreeMarker 引擎处理后，代码如下：
<plugins-editor
name='ordername'
v-model={this.data.ordername}}
formState={this.formState}
data={this.data}
disabled={this.detailsModel.ordername.disabled}
style='width: 100px;'
on-formitemvaluechange={this.onFormItemValueChange}>
</plugins-editor>
绑定属性简介：
name
编辑器名称。
v-model
值双向绑定。
formState
表单状态。
编辑器内使用方式如下：
@Prop() public formState?: Subject<any>
private formStateEvent: Unsubscribable | undefined;
public created(): void {
this.formStateEvent = this.formState.subscribe(($event: any) => {
// 表单加载完成
if (Object.is($event.type, 'load')) {
}
// 表单保存完成
if (Object.is($event.type, 'save')) {
}
// 表单项更新
if (Object.is($event.type, 'updateformitem')) {
}
});
}
public destroyed(): void {
if (this.formStateEvent) {
this.formStateEvent.unsubscribe();
}
}
data
表单数据。
disabled
编辑器是否启用
style
编辑器样式。
on-formitemvaluechange
编辑器值回填表单。
编辑器内使用方式如下：
this.$emit('formitemvaluechange', { name: 'ordername', value: '123123123132132132' });