Easy-Email-Editor 自定义区块实现文本内联编辑功能

在 Easy-Email-Editor 项目中，开发者经常需要创建自定义区块来满足特定的邮件设计需求。一个常见的需求是让自定义区块中的文本能够像内置的"高级文本"组件一样，支持直接点击选中文本并弹出编辑工具栏进行样式修改。

实现原理

Easy-Email-Editor 通过富文本编辑器实现了文本的内联编辑功能。要让自定义区块支持这一特性，需要在区块定义时正确配置富文本编辑器的相关属性。

关键实现步骤

1. 区块结构设计：自定义区块需要遵循与内置文本区块类似的结构，通常包含 mj-section 和 mj-column 容器，内部使用 mj-text 组件作为文本容器。

2. 富文本编辑器配置：在自定义区块的配置中，需要明确指定哪些文本元素应该启用富文本编辑功能。这通常通过设置 contenteditable 属性和相应的编辑器配置实现。

3. 数据绑定：确保文本内容与编辑器状态正确绑定，使得编辑后的内容能够实时反映到区块中并保存。

示例实现

参考项目中的 ProductRecommendation 自定义区块实现，可以看到关键部分是在区块定义中正确配置富文本编辑器。具体做法是：

• 在区块的 JSON 定义中，为需要支持内联编辑的文本元素添加富文本编辑器配置
• 确保文本容器具有正确的 contenteditable 属性设置
• 配置编辑器工具栏选项，决定哪些样式修改功能对用户可用

注意事项

1. 区块的 MJML 结构需要保持与内置文本区块一致，特别是容器层级关系
2. 文本样式属性（如 font-family, font-size 等）需要正确定义，以确保编辑工具栏能正确识别和应用样式
3. 对于复杂的自定义区块，可能需要额外的编辑器配置来处理嵌套元素

通过以上方法，开发者可以在 Easy-Email-Editor 中创建支持内联文本编辑的自定义区块，提供与内置组件一致的用户体验。