uni-app mp-html 富文本组件 全端支持 支持编辑 latex等扩展 Jyf 编辑时 <hr/>不展示横线

在uni-app中使用mp-html富文本组件时，确实可以支持多种格式的富文本内容展示，包括LaTeX等扩展内容。不过，对于你提到的编辑时<hr/>标签不展示横线的问题，这通常是因为mp-html组件在编辑模式下的渲染行为与预览模式有所不同。为了解决这个问题，我们可以通过自定义渲染逻辑来处理<hr/>标签，确保它在编辑模式下也能正确显示。

以下是一个基于Vue和uni-app的示例代码，展示了如何在mp-html组件中自定义处理<hr/>标签，使其在编辑模式下也能展示横线：

<template>
  <view>
    <mp-html
      :content="content"
      :custom-nodes="customNodes"
      @ready="onReady"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: '<p>This is a paragraph.</p><hr/><p>Another paragraph.</p>',
      customNodes: {
        hr(node, context) {
          // 自定义渲染hr标签
          return `
            <view class="custom-hr" style="border: none; border-top: 1px solid #ccc; margin: 20px 0;"></view>
          `;
        },
      },
    };
  },
  methods: {
    onReady() {
      console.log('mp-html component is ready');
    },
  },
};
</script>

<style>
/* 自定义hr样式 */
.custom-hr {
  width: 100%;
  height: 0;
  border: none;
  border-top: 1px solid #ccc; /* 可以根据需要调整颜色 */
  margin: 20px 0; /* 可以根据需要调整间距 */
}
</style>

在这个示例中，我们通过customNodes属性为<hr/>标签提供了一个自定义渲染函数。这个函数返回一个包含自定义样式的<view>元素，用于模拟<hr/>标签的横线效果。这样，即使在编辑模式下，<hr/>标签也能正确显示为一条横线。

请注意，上述代码是基于uni-app的mp-html组件的自定义节点渲染功能。如果你的uni-app版本或mp-html组件版本不支持customNodes属性，你可能需要查阅最新的uni-app文档或mp-html组件文档，了解如何自定义节点渲染。此外，对于LaTeX等扩展内容的支持，你可能需要额外配置或引入相关的解析和渲染库。