基于mathlive将数学公式编辑器集成到可视化搭建平台

徐小夕在之前的文章中介绍了她的可视化搭建产品——橙子试卷，并且根据用户的反馈，实现了一个新功能：编辑数学公式。她认为这个功能在技术上可行且具有广泛的应用前景，因此她投入时间进行了研究和开发，并计划分享集成了数学公式编辑器的可视化编辑器地址。

数学公式编辑器的技术实现

徐小夕介绍了在web中展示数学公式的三种表示法：latex、mathml和ascimath，并展示了如何使用MathJax前端开源库来编写数学公式。然而，为了简化用户体验，她选择了开源库mathlive来实现一个易于使用的数学公式编辑器界面，虽然对于vue3项目的文档和案例很少，但她依然分享了如何将其集成到vue3项目中。

1. 安装和引入MathLive组件

徐小夕介绍了使用npm、yarn或pnpm来安装mathlive，并展示了如何在vue3项目中注册和使用mathlive组件。

2. 在项目中使用

她解释了如何在页面中定义mathlive组件，并分享了vue版的props配置和CSS样式的自定义方法。通过这些步骤，可以实现一个数学公式编辑器。

快速集成到可视化搭建平台

徐小夕分享了如何将数学公式编辑器组件集成到橙子试卷平台中，包括UI代码和组件配置层代码的编写。她说明了如何通过配置DSL自动生成属性面板，从而将编辑器组件转变为零代码组件。

后期规划

最后，徐小夕提到她将持续迭代橙子试卷平台，并且鼓励用户提供反馈和建议。