element-tiptap富文本编辑器保存的数据没有换行符，是什么问题

Element-tiptap富文本编辑器保存的数据没有换行符可能是由于富文本回车编译的是空的p标签。为了解决这个问题，可以尝试给p标签一个最小高度

【以下回答由 GPT 生成】

问题原因: element-tiptap是基于ProseMirror构建的富文本编辑器，其默认的行为是在保存数据时自动去除所有的空行和换行符。

解决方案: 要想在保存数据时保留换行符，可以通过配置ProseMirror来实现。

首先，安装ProseMirror的相关依赖库：

npm install prosemirror-model prosemirror-commands prosemirror-state prosemirror-view

在Vue组件中引入ProseMirror的相关库：

import { EditorView } from 'prosemirror-view';
import { EditorState } from 'prosemirror-state';
import { schema } from 'prosemirror-schema-basic';
import { keymap } from 'prosemirror-keymap';

创建一个div元素，作为编辑器的容器：

<div id="editor"></div>

在Vue组件的mounted方法中初始化ProseMirror编辑器：

mounted() {
  const container = document.getElementById('editor');

  const state = EditorState.create({
    schema,
    plugins: [
      keymap({ 'Mod-Enter': () => false }), // 阻止默认的换行键行为
    ],
    doc: schema.nodeFromJSON(JSON.parse(this.content)), // 将保存的数据转换为ProseMirror的节点
  });

  this.view = new EditorView(container, {
    state,
    dispatchTransaction: this.dispatchTransaction, // 设置交互事件的回调函数
  });
},

在Vue组件中实现dispatchTransaction方法，该方法会在用户交互事件发生后被调用：

methods: {
  dispatchTransaction(transaction) {
    const newState = this.view.state.apply(transaction);
    this.view.updateState(newState);

    const content = JSON.stringify(newState.doc.toJSON()); // 将编辑器中的数据转换为JSON字符串
    this.content = content;

    this.$emit('update:content', content); // 触发组件的content属性更新事件
  },
},

在Vue组件中，将编辑器的内容绑定到一个data属性中，实现双向数据绑定：

data() {
  return {
    content: '<p>大大领导马卡拉曼达柯利达卡拉曼达克拉</p><p></p><p></p><p>DNA尽可能多看看</p>',
  };
},

在Vue组件的template中，将编辑器的内容绑定到编辑器容器中：

<template>
  <div>
    <!-- 在mounted方法中初始化编辑器 -->
    <div id="editor"></div>

    <!-- 将编辑器的内容显示出来 -->
    <div v-html="content"></div>
  </div>
</template>

通过以上步骤，我们使用ProseMirror在保存数据时就会保留原始的换行符。

【相关推荐】

你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7492577
你也可以参考下这篇文章：「后端小伙伴来学前端了」Vue集成 Element-tiptap 富文本编辑器，实现气泡菜单，划词弹出菜单

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^