1
This commit is contained in:
@@ -172,67 +172,53 @@
|
||||
})
|
||||
}, 300);
|
||||
});
|
||||
// 英文单词截断
|
||||
// 1. 基础处理函数
|
||||
function processTextNodes($element) {
|
||||
$element.contents().each(function() {
|
||||
if (this.nodeType === 3) { // 文本节点
|
||||
const text = this.nodeValue.trim();
|
||||
if (text) {
|
||||
$(this).replaceWith(
|
||||
$('<span>').addClass('word-wrapper').text(text)
|
||||
);
|
||||
}
|
||||
} else if (this.nodeType === 1 && !$(this).is('br, img, a')) { // 元素节点(非换行/图片/链接)
|
||||
processTextNodes($(this));
|
||||
}
|
||||
// 英文截断
|
||||
// 1. 替换所有 为普通空格(保留连续空格)
|
||||
$('.ql-editor').html(function(_, html) {
|
||||
return html.replace(/ /g, ' ');
|
||||
});
|
||||
}
|
||||
|
||||
// 2. 智能断词处理
|
||||
function smartWordBreak(html) {
|
||||
return html
|
||||
// 处理超长单词(15字符以上)
|
||||
.replace(/([a-zA-Z]{15,})/g, function(match) {
|
||||
return match
|
||||
.replace(/([a-z])([A-Z])/g, '$1<wbr>$2') // 驼峰分词
|
||||
.replace(/([_-])/g, '$1<wbr>') // 连接符分词
|
||||
.replace(/(.{8})/g, '$1<wbr>'); // 每8字符分词
|
||||
})
|
||||
// 保护常见复合词
|
||||
.replace(/(launch parameters|featured apps)/gi, function(match) {
|
||||
return match.replace(/\s/g, '<wbr> ');
|
||||
// 2. 处理特殊换行情况
|
||||
function applySmartWrapping() {
|
||||
$('.ql-editor').find('*').contents().filter(function() {
|
||||
return this.nodeType === 3 && this.nodeValue.trim().length > 0;
|
||||
}).replaceWith(function() {
|
||||
return $('<span>').addClass('wrapped-text').text(this.nodeValue);
|
||||
});
|
||||
}
|
||||
|
||||
// 3. 执行处理
|
||||
const $editor = $('.ql-editor');
|
||||
|
||||
// 先处理文本节点
|
||||
processTextNodes($editor);
|
||||
|
||||
// 再处理所有.word-wrapper
|
||||
$('.word-wrapper').each(function() {
|
||||
$('.wrapped-text').each(function() {
|
||||
const $this = $(this);
|
||||
$this.html(smartWordBreak($this.text()));
|
||||
let text = $this.text();
|
||||
|
||||
// 处理超长连续字符串(20字符以上)
|
||||
text = text.replace(/([^\s]{20,})/g, function(match) {
|
||||
return match.replace(/(.{10})/g, '$1​');
|
||||
});
|
||||
|
||||
// 4. 监听动态内容变化(适用于富文本编辑器)
|
||||
// 保护特定术语不换行
|
||||
const protectedTerms = ['launch parameters', 'specific files'];
|
||||
protectedTerms.forEach(term => {
|
||||
text = text.replace(new RegExp(term, 'gi'), term.replace(/ /g, ' '));
|
||||
});
|
||||
|
||||
$this.html(text);
|
||||
});
|
||||
}
|
||||
|
||||
// 初始处理
|
||||
applySmartWrapping();
|
||||
|
||||
// 3. 监听动态内容变化
|
||||
if (typeof MutationObserver !== 'undefined') {
|
||||
const observer = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutation) {
|
||||
$(mutation.addedNodes).each(function() {
|
||||
processTextNodes($(this));
|
||||
$('.word-wrapper', this).each(function() {
|
||||
$(this).html(smartWordBreak($(this).text()));
|
||||
mutations.forEach(function() {
|
||||
applySmartWrapping();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe($editor[0], {
|
||||
observer.observe($('.ql-editor')[0], {
|
||||
childList: true,
|
||||
subtree: true
|
||||
subtree: true,
|
||||
characterData: true
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -155,24 +155,21 @@ body {
|
||||
tab-size: 4;
|
||||
-moz-tab-size: 4;
|
||||
text-align: left;
|
||||
/* 换行控制 */
|
||||
word-wrap: break-word; /* 兼容旧浏览器 */
|
||||
overflow-wrap: break-word; /* 现代浏览器标准 */
|
||||
word-break: normal; /* 保持单词完整 */
|
||||
|
||||
/* 排版优化 */
|
||||
white-space: normal;
|
||||
hyphens: manual; /* 禁用自动连字符 */
|
||||
|
||||
/* 容器约束 */
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: normal;
|
||||
white-space: normal !important;
|
||||
|
||||
}
|
||||
.word-wrapper {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
/* 保护重要术语不换行 */
|
||||
.protected-term {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
.ql-editor>* {
|
||||
cursor: text;
|
||||
word-break: normal;
|
||||
|
||||
Reference in New Issue
Block a user