React Quill工具栏底部定位及光标溢出问题求助

问题需求 #

1. 将React Quill工具栏固定在卡片底部，并在工具栏上方添加分割线
2. 修复输入时光标超出卡片范围的问题

现有代码 #

index.css #

.editor .ql-container {
    background: transparent;
    border: none;
}

.editor .ql-toolbar {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-bottom: 20px;
}

.editor .ql-snow.ql-toolbar {
    display: block;
    background: transparent;
    border: none;
}

.editor .ql-container.ql-snow {
    border: none;
}

.editor .ql-bubble .ql-editor {
    border: none;
}

.editor .ql-editor {
    min-height: 18em;
    border: none;
}

.editor .toolbar-container {
    position: relative;
}

.toolbar {
    position: absolute;
    bottom: 0;
    width: 100%;
}

compose_email.js #

import Flex from "components/common/Flex";
import React, { useState } from "react";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";
import './index.css';
import { Input } from "reactstrap";
import { Card } from "react-bootstrap";
import Divider from "components/common/Divider";

export default function ComposeEmail() {

    const [subject, setSubject] = useState("");
    const [body, setBody] = useState("");

    const handleSubjectChange = (event) => {
        setSubject(event.target.value);
    };

    const handleBodyChange = (value) => {
        setBody(value);
    };

    const handleSend = () => {
        setSubject("");
        setBody("");
    };

    const toolbarOptions = {
        container: [
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            ["bold", "italic", "underline", "strike"],
            [{ color: [] }, { background: [] }],
            [{ align: [] }],
            ["link", "image", "video"],
            ["clean"],
        ],
        handlers: {},
    };

    return (
        <div style={{ height: '100vh' }}>
            <Card
                elevation={2}
                style={{
                    borderRadius: 10,
                    marginTop: 20,
                    height: '80%',
                    position: 'relative'
                }}>
                <Flex
                    direction={'column'}
                    style={{
                        marginTop: 20,
                        borderRadius: 0
                    }}>
                    <Flex
                        className={'gap-2'}
                        alignItems={'center'}
                        style={{
                            borderRadius: 10,
                            paddingLeft: 16,
                            paddingRight: 16
                        }}
                    >
                        <h5 className="text-600"><strong>Subject</strong></h5>
                        <Input
                            type="text"
                            id="subject"
                            value={subject}
                            placeholder="Your subject"
                            onChange={handleSubjectChange}
                            className="outline-none border-none"
                            style={{
                                outline: 'none',
                                border: 'none',
                                fontWeight: 600,
                                background: 'transparent'
                            }}
                        />
                    </Flex>
                    <Divider />
                    <ReactQuill
                        value={body}
                        onChange={handleBodyChange}
                        modules={{ toolbar: toolbarOptions }}
                        className={'editor'}
                        placeholder="Start typing..."
                    />
                </Flex>
            </Card>
        </div>
    );
}

解决方案 #

1. 工具栏底部布局+分割线实现 #

修改index.css，调整编辑器容器和工具栏的样式，同时添加分割线：

/* 编辑器容器：设置相对定位，预留工具栏空间 */
.editor {
  position: relative;
  height: 100%;
  padding-bottom: 60px; /* 给工具栏留出高度，避免内容被遮挡 */
}

.editor .ql-container {
  background: transparent;
  border: none;
  height: 100%;
}

/* 工具栏：固定底部，添加顶部分割线 */
.editor .ql-toolbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 16px; /* 和主题栏内边距对齐 */
  border-top: 1px solid #e5e7eb; /* 顶部边框作为分割线 */
  background: transparent;
}

.editor .ql-snow.ql-toolbar {
  border: none;
}

.editor .ql-container.ql-snow {
  border: none;
}

/* 编辑区域：占满容器高度，设置内边距 */
.editor .ql-editor {
  height: 100%;
  min-height: unset;
  border: none;
  padding: 16px;
}

同时调整组件布局，确保编辑器区域占满卡片剩余空间：

// 修改Card的样式，添加flex布局
<Card
  elevation={2}
  style={{
    borderRadius: 10,
    marginTop: 20,
    height: '80%',
    display: 'flex',
    flexDirection: 'column' // 让内部子元素垂直分配空间
  }}>
  {/* 修改包裹Flex的样式，添加flex:1 */}
  <Flex
    direction={'column'}
    style={{
      marginTop: 20,
      borderRadius: 0,
      flex: 1, // 占满Card剩余高度
      overflow: 'hidden' // 避免内容溢出
    }}>
    {/* 主题栏部分保持不变 */}
    <Divider />
    <ReactQuill
      value={body}
      onChange={handleBodyChange}
      modules={{ toolbar: toolbarOptions }}
      className={'editor'}
      placeholder="Start typing..."
    />
  </Flex>
</Card>

2. 光标超出卡片问题修复 #

通过上述CSS调整，给编辑器容器设置固定高度并限制overflow，编辑区域高度设为100%，同时配合Card的flex布局，确保内容始终在卡片范围内，光标自然不会超出。核心是让编辑器区域的高度被严格限制在卡片内部，避免内容无限制延伸。

内容的提问来源于stack exchange，提问作者ololo