').css({
- width: '500px',
- position: 'fixed',
- left: '-9999px',
- top: '0',
- visibility: 'hidden',
- background: '#ffffff',
- fontSize: '14px',
- lineHeight: '1.8',
- boxSizing: 'border-box'
- });
- $('body').append($mc);
-
- // 串行测高每组
- var gi = 0;
-
- function measureNext() {
- if (gi >= groups.length) {
- $mc.remove();
- // 给尚未设置高度的 block 设默认值
- for (var k = 0; k < blocks.length; k++) {
- if (!blocks[k].estimatedHeight) {
- blocks[k].estimatedHeight = 40;
- }
- }
- // 用测量的实际高度后的 blocks 调用原有 paginateContent 分页
- var contentPages = paginateContent(blocks, contentAreaHeight, sizeConfig);
- deferred.resolve(contentPages);
- return;
+ // 从 #render-preview 获取子元素（已预处理的干净内容）
+ var previewEl = document.getElementById('render-preview');
+ if (!previewEl) {
+ // fallback: 如果预览区不存在，给所有block设默认高度
+ for (var k = 0; k < blocks.length; k++) {
+ if (!blocks[k].estimatedHeight) blocks[k].estimatedHeight = 40;
}
+ var contentPages = paginateContent(blocks, contentAreaHeight, sizeConfig);
+ deferred.resolve(contentPages);
+ return deferred.promise();
+ }
+ var previewChildren = Array.prototype.slice.call(previewEl.children);
+
+ // 逐组测高
+ for (var gi = 0; gi < groups.length; gi++) {
var group = groups[gi];
- $mc.empty();
+ var groupHeight = 0;
for (var j = 0; j < group.domIndices.length; j++) {
var di = group.domIndices[j];
- if (di < editorChildren.length) {
- $mc.append(editorChildren[di].cloneNode(true));
+ if (di < previewChildren.length) {
+ var rect = previewChildren[di].getBoundingClientRect();
+ groupHeight += Math.round(rect.height);
}
}
- requestAnimationFrame(function () {
- var h = Math.round($mc[0].getBoundingClientRect().height);
+ if (groupHeight === 0) groupHeight = group.blocks.length * 40;
- // 按比例分配测量的实际高度给组内各个 block
- var totalEstimated = 0;
- for (var k = 0; k < group.blocks.length; k++) {
- totalEstimated += (group.blocks[k].estimatedHeight || 40);
- }
- for (var k = 0; k < group.blocks.length; k++) {
- var ratio = (group.blocks[k].estimatedHeight || 40) / (totalEstimated || 1);
- group.blocks[k].estimatedHeight = Math.round(h * ratio);
- }
-
- gi++;
- measureNext();
- });
+ // 按比例分配测量的实际高度给组内各个 block
+ var totalEstimated = 0;
+ for (var k = 0; k < group.blocks.length; k++) {
+ totalEstimated += (group.blocks[k].estimatedHeight || 40);
+ }
+ for (var k = 0; k < group.blocks.length; k++) {
+ var ratio = (group.blocks[k].estimatedHeight || 40) / (totalEstimated || 1);
+ group.blocks[k].estimatedHeight = Math.round(groupHeight * ratio);
+ }
}
- measureNext();
+ // 给尚未设置高度的 block 设默认值
+ for (var k = 0; k < blocks.length; k++) {
+ if (!blocks[k].estimatedHeight) {
+ blocks[k].estimatedHeight = 40;
+ }
+ }
+
+ var contentPages = paginateContent(blocks, contentAreaHeight, sizeConfig);
+ deferred.resolve(contentPages);
return deferred.promise();
}
@@ -1348,6 +1342,7 @@ var PhoneImageEngine = (function () {
generateImages: generateImages,
saveImages: saveImages,
saveConfig: saveConfig,
+ syncPreview: syncPreview,
setPageAlignment: setPageAlignment,
exportLongImage: exportLongImage,
getContentHtml: function () {
diff --git a/view/admin/post/phone_image.html b/view/admin/post/phone_image.html
index 6bb1d09..3c7065a 100644
--- a/view/admin/post/phone_image.html
+++ b/view/admin/post/phone_image.html
@@ -70,6 +70,31 @@
background: #fff;
}
+ .render-preview-area {
+ width: 540px;
+ overflow-y: auto;
+ border-right: 1px solid #e8e8e8;
+ background: #fff;
+ flex-shrink: 0;
+ }
+
+ .render-preview-area .preview-header {
+ padding: 8px 15px;
+ background: #fafafa;
+ border-bottom: 1px solid #e8e8e8;
+ font-size: 13px;
+ color: #999;
+ position: sticky;
+ top: 0;
+ z-index: 5;
+ }
+
+ #render-preview {
+ min-height: 300px;
+ padding: 10px;
+ box-sizing: border-box;
+ }
+
.paginated-preview-area {
flex: 1;
overflow-x: auto;
@@ -137,6 +162,12 @@
@@ -214,6 +245,12 @@
autoSaveTimer = setTimeout(function () {
doAutoSave();
}, 2600);
+
+ // 预览同步：300ms 防抖（独立于自动保存）
+ clearTimeout(window._previewSyncTimer);
+ window._previewSyncTimer = setTimeout(function () {
+ PhoneImageEngine.syncPreview();
+ }, 300);
};
// 粘贴处理：处理外部图片下载
@@ -289,6 +326,9 @@
PhoneImageEngine.init(postData, initConfig);
+ // 初始同步预览区
+ PhoneImageEngine.syncPreview();
+
// ========== 设置弹框 ==========
$('#btn-settings').click(function () {
var settingsHtml = '
';