Mac开发-NSTextView软回车转换为硬回车

本文探讨了在NSTextView中如何将软回车转换为硬回车的解决方案,利用TextKit框架中的NSLayoutManager和enumerateLineFragmentsForGlyphRange方法,详细介绍了实现过程并提供了demo供参考。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

背景说明

软回车和硬回车:在字处理软件中,由Enter键按下去导致一行文字换行的叫硬回车,程序自动换行的叫做软回车。

当NSTextView的宽度被限制时,会自动换行,这里就是添加了软回车,当我们手动键入Enter,则是在字符串中插入了\n换行符,数据内容已经改变。软回车不会改变数据内容,即不会插入\n

需求为当NSTextView进行软回车时,记录下来,在某个时机发出其内容,并将软回车转换为硬回车,即在对应位置插入\n

TextKit

NSTextView的基础使用参考 https://blog.youkuaiyun.com/lovechris00/article/details/78014081

TextKit 框架主要的成员对象(典型的MVC):

  • NSTextStorage 是 NSMutableAttributedString 的子类,负责存储需要处理的文本及其属性。
  • NSLayoutManager 负责将 NSTextStorage 中的文本数据渲染到显示区域上,负责字符的编码和布局。
  • NSTextContainer 描述了一个显示区域,默认是矩形,其子类可以定义任意的形状。它不仅定义了可填充的区域,而且内部还定义了一个不可填充区域(Bezier Path 数组)。
    在这里插入图片描述
    参考这篇文章 https://www.jianshu.com/p/a12ecae89d6b 和 官方文档 中搜索。

即NSTextStorage负责文本内容,NSLayoutManager负责布局换行,字符处理,NSTextContainer负责显示的区域。
在我们使用NSTextView时,默认都会关联上述3个。监听软回车则需要监听到换行,或者每行所占字符数,即着重点在NSLayoutManager中。

解决方案

最初

layoutManager:shouldBreakLineByWordBeforeCharacterAtIndex方法是NSLayoutManager的代理方法,在文本改变时,会抛出软回车位置。

起初我想用这个回调,但发现layoutManager:shouldBreakLineByWordBeforeCharacterAtIndex在文本内容全是英文时,返回的软回车位置不对。
例如:

本应该软回车位置为 11 22 33 时
当中文时,返回为 11 22 33
当英文时,返回为 0  11 22 会缺少最后一位

这个回调当文本改变时就会回调。

最终方案

我又找到了一个可以计算出每行的字符长度的方法
即NSLayoutManager中的 enumerateLineFragmentsForGlyphRange

// Enumerates line fragments intersecting with glyphRange.
- (void)enumerateLineFragmentsForGlyphRange:(NSRange)glyphRange usingBlock:(void (^)(NSRect rect, NSRect usedRect, NSTextContainer *textContainer, NSRange glyphRange, BOOL *stop))block NS_AVAILABLE(10_11, 7_0);

这个方法需要主动调用,会在block块中返回每行的字符串范围。

参数说明如下

rect 预留给该行使用的大小
usedRect 实际该行使用的大小
textContainer 自己的textContainer实例
glyphRange 文本Range,由Postion和length组成。表示该行开始位置,以及长度

那我们就很好处理了,分别记录,然后从后向前插入\n即可

__weak typeof(self) wself = self;
    [_layoutManagerB enumerateLineFragmentsForGlyphRange:NSMakeRange(0, testString.length) usingBlock:^(NSRect rect, NSRect usedRect, NSTextContainer * _Nonnull textContainer, NSRange glyphRange, BOOL * _Nonnull stop) {
        __strong typeof(self) sself = wself;
        NSInteger index = glyphRange.location + glyphRange.length;
        [sself.breaklineIndexs addObject:@(index)];
        if (sself.layoutManagerB.numberOfGlyphs == index) { //因为最后一个字符后一定会插入\n,当字符数量==index时,即stop
            NSString *result = [self getBreaklineString];
            NSLog(@"添加硬回车后的字符串为 %@",result);
            *stop = YES;
        }
    }];

附上最终的demo,供大家参考

链接:https://pan.baidu.com/s/1-jgSF9IucvzzCRo0yun1HA 密码:3nc2

学习不断,有错误请指出,如果对你有帮助,请点个赞?

<think>我们正在处理富文本编辑器中的粘贴内容,目标是将软回车(通常是HTML中的`<br>`标签)转换硬回车(通常是HTML中的`<p>`标签或`<div>`标签)。根据引用[2]中的描述,织梦程序中的编辑器在回车键换行时产生的是`<br>`,而粘贴文本时产生的是`<div>`,他们希望统一转换成`<p>`标签。我们可以借鉴这个思路。 实现方法: 1. 在用户粘贴内容时,我们可以监听粘贴事件(paste event),然后获取剪贴板中的内容。 2. 对获取的内容进行处理,将`<br>`标签和连续的换行符(可能是文本中的换行)转换为段落分隔符(如`<p>`标签)。 具体步骤: 步骤1:监听粘贴事件 步骤2:获取剪贴板内容(可能是纯文本或HTML) 步骤3:清理内容,将软回车转换硬回车 步骤4:将处理后的内容插入编辑器 注意:不同的编辑器处理方式可能不同,这里以通用的JavaScript实现为例。 示例代码(使用原生JavaScript): ```javascript document.getElementById('editor').addEventListener('paste', function(e) { // 阻止默认粘贴行为 e.preventDefault(); // 获取剪贴板数据 var clipboardData = e.clipboardData || window.clipboardData; var pastedText = clipboardData.getData('text/plain'); var pastedHTML = clipboardData.getData('text/html'); // 如果获取到HTML内容,则处理HTML,否则处理纯文本 if (pastedHTML) { // 创建一个临时div来操作HTML var tempDiv = document.createElement('div'); tempDiv.innerHTML = pastedHTML; // 将所有的<br>标签替换为段落分隔符 // 这里我们使用一个简单的方法:将连续的<br>(可能代表多个换行)转换为段落 // 首先,我们遍历所有节点,将<br>替换为</p><p>,然后包裹在<p>标签中 // 注意:这里需要处理多种情况,比如<br>在行内元素中等,但简单起见,我们直接替换 // 方法1:使用正则表达式替换(注意:正则可能不够严谨,但适用于简单情况) var html = tempDiv.innerHTML; // 将单个<br>或连续的<br>(包括不同写法)替换为段落结束和开始 // 这里我们替换<br>、<br/>、<br />等,并考虑多个连续的情况 html = html.replace(/(<br\s*\/?>[\s\r\n]*)+/gi, '</p><p>'); // 然后确保整个内容包裹在<p>标签中 if (!/^<p>/i.test(html)) { html = '<p>' + html; } if (!/<\/p>$/i.test(html)) { html = html + '</p>'; } // 现在,我们有了用<p>包裹的文本 // 但是,注意可能原来就有<p>标签,所以上面的替换可能导致重复的段落标签,需要进一步优化 // 方法2:更安全的方法是遍历DOM节点,但代码较长 // 这里为了简便,使用正则,实际项目可能需要更健壮的方法 // 将处理后的HTML插入编辑器 // 这里假设编辑器支持插入HTML,具体取决于编辑器API // 例如,使用execCommand插入HTML(注意:execCommand已废弃,但一些编辑器仍支持) document.execCommand('insertHTML', false, html); } else { // 纯文本处理:将连续的换行符(\n)转换为段落 var paragraphs = pastedText.split(/\n\s*\n/); // 两个换行符之间可能有空格 var newHTML = paragraphs.map(function(para) { // 将每个段落包裹在<p>标签中 return '<p>' + para.replace(/\n/g, '<br>') + '</p>'; }).join(''); document.execCommand('insertHTML', false, newHTML); } }); ``` 注意:上述代码是一个基础示例,实际应用中可能需要根据具体编辑器的要求进行调整。另外,正则表达式处理HTML可能不够健壮,对于复杂的HTML结构,建议使用DOM解析器(如DOMParser)来遍历节点并替换。 引用[2]中提到织梦程序修改编辑器将BR和DIV转换成P标签,我们可以参考他们的方法,但具体实现可能依赖于编辑器。有些编辑器(如CKEditor)有内置的粘贴过滤器,可以通过配置实现。 例如,在CKEditor中,可以配置粘贴过滤器来自动转换标签: ```javascript CKEDITOR.replace('editor', { pasteFilter: 'semantic-content', // 其他配置 }); ``` 或者使用更高级的配置,通过自定义插件来处理。 总结: 在富文本编辑器中,将粘贴内容中的软回车(换行符)转换硬回车(段落分隔符)可以通过监听粘贴事件并处理粘贴内容来实现。处理方式包括替换`<br>`标签为`<p>`标签,或者将连续的换行符转换为段落。 相关问题: 1. 在富文本编辑器中,如何防止粘贴内容引入不安全标签? 2. 除了替换换行符,还有哪些常见的粘贴内容清理操作? 3. 如何在不同富文本编辑器(如TinyMCE、CKEditor、Quill等)中实现类似功能?</think>在富文本编辑器中实现粘贴内容时将软回车(换行符)转换硬回车(段落分隔符),可通过以下方法实现: ### 解决方案 1. **监听粘贴事件** 通过 JavaScript 监听编辑器的 `paste` 事件,拦截并处理粘贴内容: ```javascript editor.addEventListener('paste', (event) => { event.preventDefault(); // 阻止默认粘贴行为 const clipboardData = event.clipboardData || window.clipboardData; let pastedText = clipboardData.getData('text/plain'); // 获取纯文本 // 替换逻辑:将换行符 \n 转换为段落标签 pastedText = pastedText.replace(/\n+/g, '</p><p>'); pastedText = '<p>' + pastedText + '</p>'; // 包裹段落标签 // 将处理后的内容插入编辑器 document.execCommand('insertHTML', false, pastedText); }); ``` 2. **正则表达式替换规则** - 软回车(换行符)通常为 `\n`(Windows)或 `\r\n`(macOS/Linux) - 替换为硬回车(段落标签): ```javascript // 单行替换:单个 \n 转 <br>(软回车) text.replace(/\n/g, '<br>'); // 段落替换:连续换行转 </p><p>(硬回车) text.replace(/\n+/g, '</p><p>'); ``` 3. **编辑器集成示例**(以 CKEditor 为例) 在编辑器配置中添加粘贴过滤器: ```javascript CKEDITOR.replace('editor', { pasteFilter: { rules: { elements: { br: (element) => { // 将 <br> 替换为段落分隔 return new CKEDITOR.htmlParser.element('p', {}); } } } } }); ``` 4. **安全处理** 添加 HTML 净化逻辑(参考引用[^1]),防止恶意标签: ```javascript import DOMPurify from 'dompurify'; // 使用 DOMPurify 库 const cleanHTML = DOMPurify.sanitize(pastedText); ``` ### 关键点说明 - **软回车 vs 硬回车** - 软回车 (`<br>`/`\n`):单行换行,无段落间距 - 硬回车 (`<p>`/`</p>`):段落分隔,带默认间距 - **适用场景** 当粘贴来源为纯文本(如记事本、代码编辑器)时,此方法可确保格式统一为段落结构[^2]。 ### 不同编辑器适配 | 编辑器 | 实现方式 | |--------------|-----------------------------| | **TinyMCE** | 配置 `paste_postprocess` 回调 | | **Quill.js** | 使用 `clipboard` 模块拦截 | | **UEditor** | 修改 `filterInputRule` 规则 | > 提示:部分编辑器(如引用[^2]提到的织梦编辑器)需修改源码实现标签转换,建议优先使用事件拦截方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值