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