工具栏和底部布局问题

[mingchiuli]

描述这个Bug

更新4.20.3前

顶部：

底部：

更新4.20.3后

顶部：

底部：

版本号

4.20.3

问题重现链接

No response

[imzbf]

给个复现问题的demo看看

[mingchiuli]

给个复现问题的demo看看

Demo不太行，我在codesandbox试了试emoji那个按钮始终出不来，但是我能提供一些调试信息：

在这种display: inline情况下，顶部显示是有问题的：

手动改成block以后就正常了：

关于底部，应该还有一个scrollSwitch需要显示出来，之前版本都是有的，然而4.20.3并没显示出来

const footers: Footers[] = ['markdownTotal', 0, '=', 1, 'scrollSwitch']

之前能显示出来：

[mingchiuli]

我使用的代码：

<script lang="ts" setup>
import { UPLOAD } from '@/http/http'
import { MdEditor, type Footers, type ToolbarNames, type ExposeParam } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import '@vavt/v3-extension/lib/asset/ExportPDF.css'
import { Emoji } from '@vavt/v3-extension'
import '@vavt/v3-extension/lib/asset/Emoji.css'
import { onMounted, ref, useTemplateRef } from 'vue'
import { SensitiveType, Status, type SensitiveTrans, Colors } from '@/type/entity'

const emit = defineEmits<{
  composing: [payload: boolean]
  sensitive: [payload: SensitiveTrans]
}>()

const { transColor, formStatus } = defineProps<{
  transColor: string
  formStatus: number | undefined
}>()

const content = defineModel<string | undefined>('content')
const editorRef = useTemplateRef<ExposeParam>('editor')

const uploadPercentage = ref(0)
const showPercentage = ref(false)

const toolbars: ToolbarNames[] = [
  'revoke',
  'next',
  'bold',
  1,
  'underline',
  'italic',
  '-',
  'title',
  'strikeThrough',
  'sub',
  'sup',
  'quote',
  'unorderedList',
  'orderedList',
  'task',
  '-',
  'codeRow',
  'code',
  'link',
  'image',
  'table',
  'mermaid',
  'katex',
  '-',
  0,
  'pageFullscreen',
  'fullscreen',
  'preview',
  'htmlPreview',
  'catalog',
  'github'
]
const footers: Footers[] = ['markdownTotal', 0, '=', 1, 'scrollSwitch']

....omit
</script>

<template>
  <md-editor
    id="md-editor"
    v-model="content"
    :preview="false"
    :toolbars="toolbars"
    :toolbarsExclude="['github']"
    @on-upload-img="onUploadImg"
    :footers="footers"
    ref="editor"
  >
    <template #defToolbars>
      <Export-PDF v-model="content" />
      <emoji>
        <template #trigger> Emoji </template>
      </emoji>
    </template>
    <template #defFooters>
      <el-progress
        v-if="showPercentage"
        type="line"
        :percentage="uploadPercentage"
        :color="Colors"
        status="success"
      />
      <span class="trans-radius" :style="{ 'background-color': transColor }" />
    </template>
  </md-editor>
</template>

<style scoped>
.md-editor:deep(.md-editor-footer) {
  height: 40px;
}

.trans-radius {
  display: inline-flex;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.el-progress {
  width: 100px;
  display: inline-flex;
}
</style>

[mingchiuli]

目前代码退回到4.20.2仍然会出现这个问题，只能强制修改掉package.lock里的所有文件才能恢复。似乎是这次提交引发的：

ac82220

浏览器是firefox

[imzbf]

scrollSwitch现在需要编辑区域和预览区域同时出现才会显示，另外行高这个问题我用你的示例无法复现，看你是否能够本地创建一个基础项目，尝试能够还原后给下我源码。

ac82220 这个提交是为了居中图标而设置的。

[mingchiuli]

scrollSwitch现在需要编辑区域和预览区域同时出现才会显示，另外行高这个问题我用你的示例无法复现，看你是否能够本地创建一个基础项目，尝试能够还原后给下我源码。

ac82220 这个提交是为了居中图标而设置的。

行高这个问题我复现出来了。关键在于我将md-editor-v3嵌到了el-form里面，然后就会出问题。这个问题在4.20.3之前是没有的

代码如下：

<script lang="ts" setup>
import { MdEditor, type Footers, type ToolbarNames, type ExposeParam } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import '@vavt/v3-extension/lib/asset/ExportPDF.css'
import { Emoji } from '@vavt/v3-extension'
import '@vavt/v3-extension/lib/asset/Emoji.css'
import { ref } from 'vue'

const content = ref('content')

const toolbars: ToolbarNames[] = [
  'revoke',
  'next',
  'bold',
  1,
  'underline',
  'italic',
  '-',
  'title',
  'strikeThrough',
  'sub',
  'sup',
  'quote',
  'unorderedList',
  'orderedList',
  'task',
  '-',
  'codeRow',
  'code',
  'link',
  'image',
  'table',
  'mermaid',
  'katex',
  '-',
  0,
  'pageFullscreen',
  'fullscreen',
  'preview',
  'htmlPreview',
  'catalog',
  'github'
]
const footers: Footers[] = ['markdownTotal', 0, '=', 1, 'scrollSwitch']

const onUploadImg = async (files: File[], callback: Function) => {
  console.log('aaa')
}
</script>

<template>
  <el-form>
    <el-form-item>
      <md-editor
        id="md-editor"
        v-model="content"
        :preview="false"
        :toolbars="toolbars"
        :toolbarsExclude="['github']"
        @on-upload-img="onUploadImg"
        :footers="footers"
        ref="editor"
      >
        <template #defToolbars>
          <Export-PDF v-model="content" />
          <emoji>
            <template #trigger> Emoji </template>
          </emoji>
        </template>
        <template #defFooters>
          <span class="trans-radius" :style="{ 'background-color': '#67c23a' }" />
        </template>
      </md-editor>
    </el-form-item>
  </el-form>
</template>

<style scoped>
.md-editor:deep(.md-editor-footer) {
  height: 40px;
}

.trans-radius {
  display: inline-flex;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.el-progress {
  width: 100px;
  display: inline-flex;
}
</style>

[mingchiuli]

当这个问题出现的时候，会直接导致emoji和export-pdf这两个自定义tool显示不出来：

[mingchiuli]

还有个小问题可以从你的演示文档看到，就是滚动那个checkbox没有的时候文字不居中了

[imzbf]

还有个小问题可以从你的演示文档看到，就是滚动那个checkbox没有的时候文字不居中了

仅预览、仅编辑模式不会显示同步滚动

[mingchiuli]

还有个小问题可以从你的演示文档看到，就是滚动那个checkbox没有的时候文字不居中了

仅预览、仅编辑模式不会显示同步滚动

看下文字2024/10/08 00:40:21 Tuesday，本来是垂直居中的，现在不局中了

[imzbf]

还有个小问题可以从你的演示文档看到，就是滚动那个checkbox没有的时候文字不居中了

仅预览、仅编辑模式不会显示同步滚动

看下文字2024/10/08 00:40:21 Tuesday，本来是垂直居中的，现在不局中了

这个好像确实是，这个组件写得太简单了，只用了一个span标签，没有去定义样式，它应该像其他的页脚组件一样拥有md-editor-footer-item类的。

[mingchiuli]

还有个小问题可以从你的演示文档看到，就是滚动那个checkbox没有的时候文字不居中了

仅预览、仅编辑模式不会显示同步滚动

看下文字2024/10/08 00:40:21 Tuesday，本来是垂直居中的，现在不局中了

这个好像确实是，这个组件写得太简单了，只用了一个span标签，没有去定义样式，它应该像其他的页脚组件一样拥有md-editor-footer-item类的。

是的，应该框架给提供一下，否则只能业务开发去强行兼容，不太优雅

[imzbf]

是的，应该框架给提供一下，否则只能业务开发去强行兼容，不太优雅

好，我像顶部工具栏一样，导出一个默认的底部工具栏组件，用带有默认样式的标签包裹一下

[mingchiuli]

scrollSwitch现在需要编辑区域和预览区域同时出现才会显示，另外行高这个问题我用你的示例无法复现，看你是否能够本地创建一个基础项目，尝试能够还原后给下我源码。
ac82220 这个提交是为了居中图标而设置的。

行高这个问题我复现出来了。关键在于我将md-editor-v3嵌到了el-form里面，然后就会出问题。这个问题在4.20.3之前是没有的

代码如下：

<script lang="ts" setup>
import { MdEditor, type Footers, type ToolbarNames, type ExposeParam } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import '@vavt/v3-extension/lib/asset/ExportPDF.css'
import { Emoji } from '@vavt/v3-extension'
import '@vavt/v3-extension/lib/asset/Emoji.css'
import { ref } from 'vue'

const content = ref('content')

const toolbars: ToolbarNames[] = [
  'revoke',
  'next',
  'bold',
  1,
  'underline',
  'italic',
  '-',
  'title',
  'strikeThrough',
  'sub',
  'sup',
  'quote',
  'unorderedList',
  'orderedList',
  'task',
  '-',
  'codeRow',
  'code',
  'link',
  'image',
  'table',
  'mermaid',
  'katex',
  '-',
  0,
  'pageFullscreen',
  'fullscreen',
  'preview',
  'htmlPreview',
  'catalog',
  'github'
]
const footers: Footers[] = ['markdownTotal', 0, '=', 1, 'scrollSwitch']

const onUploadImg = async (files: File[], callback: Function) => {
  console.log('aaa')
}
</script>

<template>
  <el-form>
    <el-form-item>
      <md-editor
        id="md-editor"
        v-model="content"
        :preview="false"
        :toolbars="toolbars"
        :toolbarsExclude="['github']"
        @on-upload-img="onUploadImg"
        :footers="footers"
        ref="editor"
      >
        <template #defToolbars>
          <Export-PDF v-model="content" />
          <emoji>
            <template #trigger> Emoji </template>
          </emoji>
        </template>
        <template #defFooters>
          <span class="trans-radius" :style="{ 'background-color': '#67c23a' }" />
        </template>
      </md-editor>
    </el-form-item>
  </el-form>
</template>

<style scoped>
.md-editor:deep(.md-editor-footer) {
  height: 40px;
}

.trans-radius {
  display: inline-flex;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.el-progress {
  width: 100px;
  display: inline-flex;
}
</style>

这段代码即使是将md-editor移出el-form，仍然无法显示出emoji和export-pdf

[imzbf]

我在4.20.4中修复了这个问题，尝试一下

[mingchiuli]

我在4.20.4中修复了这个问题，尝试一下

emoji现在能展示了，居中也正常了，但是export-pdf仍然显示不出来，看到似乎长度是没有的

[mingchiuli]

应该是标签名的规则之前修改过，我改下吧
Export-PDF v-model="content" 以前是可以的，现在需要为
ExportPDF