彻底解决！js-screen-shot插件文本输入换行失效的5种实战方案

彻底解决！js-screen-shot插件文本输入换行失效的5种实战方案

【免费下载链接】js-screen-shot web端自定义截图插件(原生JS版) 项目地址: https://gitcode.com/gh_mirrors/js/js-screen-shot

你是否在使用js-screen-shot插件时，遇到文本输入无法换行的尴尬？用户输入长文本时被迫挤在一行，格式混乱难以阅读？本文将从源码层面深度剖析换行失效的根本原因，并提供5种可直接落地的解决方案，帮助你彻底解决这一痛点。

问题现象与技术背景

文本输入的用户体验痛点

在基于js-screen-shot构建的截图工具中，当用户选择文本工具并输入多行内容时，无论使用Enter键还是Shift+Enter组合，文本始终显示为单行，导致：

• 长文本阅读困难
• 格式控制失效
• 用户操作流程中断

技术栈与核心组件

js-screen-shot作为Web端自定义截图插件，采用原生JavaScript实现，其文本输入功能依赖两大核心模块：

• 文本输入控制器：基于contenteditable属性的div元素
• 绘制引擎：DrawText.ts中的文本渲染函数

根源分析：从输入到渲染的全链路追踪

输入阶段：事件监听机制的缺陷

// src/main.ts 中注册的快捷键监听
container.addEventListener("keydown", (event: KeyboardEvent) => {
  // 仅处理Enter和Escape键，未对换行符做特殊处理
  if (((event.metaKey || event.ctrlKey) && event.code === "Enter") || 
      event.code === "Escape") {
    // 直接绘制文本但未处理换行
    drawText(text, x, y, color, fontSize, context);
  }
});

渲染阶段：文本处理逻辑的关键问题

// src/lib/split-methods/DrawText.ts 核心实现
export function drawText(
  text: string,
  mouseX: number,
  mouseY: number,
  color: string,
  fontSize: number,
  context: CanvasRenderingContext2D
) {
  context.save();
  context.fillStyle = color;
  context.font = `bold ${fontSize}px none`;
  
  // 关键问题：仅按\n拆分，但未处理输入源的换行符差异
  const lines = text.split("\n"); 
  const lineHeight = fontSize * 1.4;
  
  lines.forEach((line, index) => {
    const lineY = mouseY + lineHeight * index;
    context.fillText(line, mouseX, lineY);
  });
  context.restore();
}

数据流转中的隐形转换

解决方案：从修复到优化的完整路径

方案一：输入事件处理增强（快速修复版）

// 修改src/main.ts中的keydown事件处理
container.addEventListener("keydown", (event: KeyboardEvent) => {
  if (event.key === "Enter" && !event.shiftKey) {
    event.preventDefault(); // 阻止默认行为产生<br>标签
    // 直接插入\n换行符
    document.execCommand('insertText', false, '\n');
  }
});

方案二：文本预处理管道构建（全面兼容版）

// 在src/lib/common-methods/添加TextProcessor.ts
export function processTextForLineBreaks(text: string): string[] {
  // 处理不同来源的换行符
  return text
    .replace(/<br\s*\/?>/gi, '\n')  // 转换HTML换行标签
    .replace(/\r\n|\r/g, '\n')      // 标准化换行符
    .split('\n')                    // 拆分为行数组
    .map(line => line.trim());      // 清理每行空白
}

// 修改DrawText.ts调用
import { processTextForLineBreaks } from "@/lib/common-methods/TextProcessor";

export function drawText(/* 参数 */) {
  // ...
  const lines = processTextForLineBreaks(text); 
  // ...
}

方案三：输入框属性优化（基础配置版）

// 修改src/lib/main-entrance/CreateDom.ts
this.textInputController = document.createElement("div");
this.textInputController.contentEditable = "true";
this.textInputController.spellcheck = false;
// 添加白名单允许换行格式
this.textInputController.setAttribute("data-gramm", "false");
this.textInputController.style.whiteSpace = "pre-wrap";  // 保留空白和换行
this.textInputController.style.wordBreak = "break-all";  // 长单词换行

方案四：自定义换行符输入（用户体验增强版）

// 在src/main.ts中注册组合键处理
this.registerContainerShortcuts(this.textInputController);

private registerContainerShortcuts(container: HTMLElement) {
  container.addEventListener("keydown", (event: KeyboardEvent) => {
    // 支持Shift+Enter强制换行
    if (event.key === "Enter" && event.shiftKey) {
      event.preventDefault();
      document.execCommand('insertText', false, '\n');
    }
  });
}

方案五：文本测量与自动换行（高级功能版）

// 在DrawText.ts中添加自动换行逻辑
export function drawText(/* 参数 */) {
  context.save();
  // ...字体设置
  
  const maxWidth = 200; // 可配置的最大行宽
  const lines = [];
  let currentLine = '';
  
  text.split(' ').forEach(word => {
    const testLine = currentLine + (currentLine ? ' ' : '') + word;
    const metrics = context.measureText(testLine);
    if (metrics.width > maxWidth && currentLine) {
      lines.push(currentLine);
      currentLine = word;
    } else {
      currentLine = testLine;
    }
  });
  lines.push(currentLine);
  
  lines.forEach((line, index) => {
    const lineY = mouseY + lineHeight * index;
    context.fillText(line, mouseX, lineY);
  });
  
  context.restore();
}

实施指南：从代码集成到测试验证

集成步骤与版本兼容

方案	实施复杂度	浏览器兼容性	适用场景
方案一	★☆☆☆☆	所有支持contenteditable的浏览器	快速修复
方案二	★★☆☆☆	IE11+	企业级应用
方案三	★☆☆☆☆	所有现代浏览器	基础优化
方案四	★★☆☆☆	所有现代浏览器	用户体验优先
方案五	★★★☆☆	IE11+	长文本展示

测试用例设计

// 在tests/lib/split-methods/添加DrawText.test.ts
describe('文本换行测试', () => {
  test('HTML换行标签应该被正确转换', () => {
    const input = '第一行<br>第二行<br/>第三行';
    const lines = processTextForLineBreaks(input);
    expect(lines).toEqual(['第一行', '第二行', '第三行']);
  });
  
  test('混合换行符应该被统一处理', () => {
    const input = 'line1\r\nline2\rline3\nline4';
    const lines = processTextForLineBreaks(input);
    expect(lines).toEqual(['line1', 'line2', 'line3', 'line4']);
  });
});

性能优化建议

总结与扩展思考

核心解决思路回顾

本文通过5种方案构建了完整的换行解决方案：

1. 输入层：控制换行符生成
2. 处理层：标准化换行格式
3. 渲染层：正确解析并绘制多行文本

扩展功能建议

1. 段落缩进：添加首行缩进和段落间距控制
2. 文本对齐：实现左对齐、居中、右对齐功能
3. 自动换行：基于容器宽度的智能文本折行
4. 行高调整：允许用户自定义行间距

【免费下载链接】js-screen-shot web端自定义截图插件(原生JS版) 项目地址: https://gitcode.com/gh_mirrors/js/js-screen-shot