ulthon/ulthon_information
1
0
Fork 0
mirror of https://gitee.com/ulthon/ulthon_information.git synced 2026-07-01 16:32:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(phone-image): wangeditor 排版引擎核心重构

Browse Source 
- 两栏布局：取消左侧工具栏，中间改为wangeditor v5编辑器
- 顶部操作栏：设置/保存/生成并保存+更多下拉(历史/重新生成/下载/长图)
- 设置弹框：尺寸选择+水印输入，删除全局字号滑块
- wangeditor完整工具栏+divider分割线标记分页
- 删除旧渲染管线：renderContentFlow/insertPageBreak/removePageBreak/convertFlowBlocksToImages/measureBlockHeights
- 新增captureEditorBlocks：从编辑器DOM测高+按分割线分组+实际高度分页
- 新增exportLongImage：从wangeditor DOM截长图
- getContentHtml改为从wangeditor实例读取
This commit is contained in:
augushong
2026-05-11 22:45:38 +08:00
parent 518085d493
commit 1f8128385f
2 changed files with 473 additions and 564 deletions
Download Patch File Download Diff File Expand all files Collapse all files

559
public/static/js/phone-image.js
View File

@@ -13,7 +13,6 @@ var PhoneImageEngine = (function () {
// ===== 配置 =====
var config = {
size: 'xiaohongshu',
fontSize: 14,
watermark: '',
pageAlignments: {}, // key=页码(1-based), value='top'|'center'
sizes: {
@@ -39,25 +38,6 @@ var PhoneImageEngine = (function () {
// ===== 分页结果 =====
var pages = [];
// ===== 截图缓存 =====
var convertedBlockCache = {}; // key: simpleHash(block.html), value: { imgHtml: '...' }
/**
* 简单字符串哈希 (djb2 变体)
* @param {string} str
* @returns {string} 哈希字符串
*/
function simpleHash(str) {
var hash = 0;
if (!str) return '0';
for (var i = 0; i < str.length; i++) {
var char = str.charCodeAt(i);
hash = ((hash << 5) - hash) + char;
hash = hash & hash; // 转32位整数
}
return '' + hash;
}
/**
* 确保隐藏渲染区域存在
*/
@@ -91,38 +71,11 @@ var PhoneImageEngine = (function () {
if (userConfig) {
$.extend(config, userConfig);
}
// 清空缓存，避免旧数据干扰
convertedBlockCache = {};
// 内容流事件委托（只绑定一次）
$(document).off('click', '.break-inserter-btn');
$(document).off('click', '.remove-break-btn');
$(document).off('click', '.thumb-alignment-toggle');
$(document).on('click', '.break-inserter-btn', function () {
var afterIndex = parseInt($(this).parent().data('after-index'), 10);
insertPageBreak(afterIndex);
});
$(document).on('click', '.remove-break-btn', function () {
var index = parseInt($(this).data('index'), 10);
removePageBreak(index);
});
$(document).on('click', '.thumb-alignment-toggle', function () {
var pageNum = parseInt($(this).data('page-num'), 10);
var currentAlign = (config.pageAlignments && config.pageAlignments[pageNum]) || 'top';
var newAlign = currentAlign === 'top' ? 'center' : 'top';
setPageAlignment(pageNum, newAlign);
render();
});
}
/**
* 渲染排版预览 - 生成分页后的HTML
* 管线: preprocess -> parse -> renderContentFlow -> measure -> paginate -> generate -> renderThumbnails
* 管线: editorHtml -> parseHtmlToBlocks -> captureEditorBlocks -> generatePages -> renderThumbnails
* 带并发锁：防止多次 render 同时执行造成数据混乱
* @returns {jQuery Deferred} resolves with pages array
*/
@@ -142,52 +95,32 @@ var PhoneImageEngine = (function () {
var pageHeight = sizeConfig.height;
var contentAreaHeight = pageHeight - (config.contentPadding * 2);
var cleanHtml = preprocessContent(postData.content_html);
// 从 wangeditor 读取内容
var editorHtml = window.phoneImageEditor ? window.phoneImageEditor.getHtml() : postData.content_html;
var cleanHtml = preprocessContent(editorHtml);
var blocks = parseHtmlToBlocks(cleanHtml);
// 动态设置字号CSS变量，让fontSize滑块真正生效
var effectiveFontSize = parseInt(config.fontSize, 10) || 14;
document.documentElement.style.setProperty('--pi-font-size-base', effectiveFontSize + 'px');
// 缓存清理：如果缓存条目过多则清空，防止内存膨胀
var cacheKeys = Object.keys(convertedBlockCache);
if (cacheKeys.length > blocks.length * 3) {
convertedBlockCache = {};
}
// 空内容检测：blocks 为空时直接提示，不进入渲染流程
// 空内容检测
if (blocks.length === 0) {
$('#paginated-preview').html('<div style="text-align:center;padding:60px 20px;color:#999;">文章正文内容为空</div>');
render._locked = false;
return deferred.resolve([]).promise();
}
// 先渲染内容流(DOM) - 用于实测高度
renderContentFlow(blocks);
// 等待一帧确保中间栏渲染完成
requestAnimationFrame(function () {
// 在中间栏中将表格和代码块截图转为图片
convertFlowBlocksToImages(blocks).then(function () {
// 再等一帧让替换后的img渲染
requestAnimationFrame(function () {
measureBlockHeights(blocks);
// 封面页
pages.push(generateCoverPage(sizeConfig));
// 内容分页(使用实测高度)
var contentPages = paginateContent(blocks, contentAreaHeight, sizeConfig);
// 内容分页（使用 captureEditorBlocks，T3 会完善截图逻辑）
captureEditorBlocks(editorHtml, blocks, contentAreaHeight, sizeConfig).then(function(contentPages) {
pages = pages.concat(contentPages);
// 尾页
pages.push(generateSummaryPage(sizeConfig, pages.length));
// 两遍遍历: 现在知道了总页数, 给每页补上 N/M 页码
// 页码 N/M
var totalPages = pages.length;
for (var i = 0; i < pages.length; i++) {
if (pages[i].type === 'content') {
// 在页脚中添加 N/M 格式页码
pages[i].html = pages[i].html.replace(
'<span>' + pages[i].pageNum + '</span>',
'<span class="page-number-indicator">' + (i + 1) + '/' + totalPages + '</span>'
@@ -195,27 +128,22 @@ var PhoneImageEngine = (function () {
}
}
// 渲染缩略图（右侧）- 异步截图
renderThumbnails(sizeConfig).then(function () {
// 渲染缩略图
renderThumbnails(sizeConfig).then(function() {
render._locked = false;
// 如果渲染期间有新的渲染请求排队，自动触发
if (render._pending) {
render._pending = false;
render().catch(function () {
// 静默处理递归渲染失败
});
render().catch(function() {});
}
deferred.resolve(pages);
}).catch(function (err) {
}).catch(function(err) {
render._locked = false;
deferred.reject(err);
});
});
}).catch(function (err) {
}).catch(function(err) {
render._locked = false;
deferred.reject(err);
});
});
return deferred.promise();
}
@@ -311,7 +239,7 @@ var PhoneImageEngine = (function () {
blocks.push({
type: 'p',
html: '<p>' + p + '</p>',
estimatedHeight: estimateTextHeight(p, config.fontSize)
estimatedHeight: 40
});
}
}
@@ -340,7 +268,7 @@ var PhoneImageEngine = (function () {
case 'h5':
case 'h6':
block.type = tagName;
block.estimatedHeight = estimateHeadingHeight(tagName, $el.text());
block.estimatedHeight = 40;
break;
case 'table':
block.type = 'table';
@@ -359,7 +287,7 @@ var PhoneImageEngine = (function () {
var imgW = parseInt($el.attr('data-original-width'), 10);
var imgH = parseInt($el.attr('data-original-height'), 10);
if (imgW > 0 && imgH > 0) {
var imgRatio = getContentWidth() / imgW;
var imgRatio = 500 / imgW;
block.estimatedHeight = Math.round(imgH * imgRatio) + 20;
} else {
block.estimatedHeight = 0;
@@ -368,15 +296,15 @@ var PhoneImageEngine = (function () {
break;
case 'ul':
case 'ol':
block.estimatedHeight = estimateListHeight($el);
block.estimatedHeight = 40;
break;
case 'blockquote':
block.estimatedHeight = estimateBlockquoteHeight($el);
block.estimatedHeight = 40;
break;
case 'p':
default:
block.type = 'p';
block.estimatedHeight = estimateTextHeight($el.text(), config.fontSize);
block.estimatedHeight = 40;
break;
}
@@ -386,56 +314,126 @@ var PhoneImageEngine = (function () {
return blocks;
}
// ===== 高度估算 =====
// ===== wangeditor 集成层 =====
/**
* 获取内容区可用宽度 (540 - 40px padding)
* 获取 wangeditor 编辑区的子元素
* @returns {Array} DOM元素数组
*/
function getContentWidth() {
return 500;
function getEditorChildren() {
var editorArea = document.querySelector('#editor-text-area [data-slate-editor]');
if (!editorArea) return [];
var children = editorArea.children;
// wangeditor v5: [data-slate-editor] 下可能有一层 div 包装
// 如果只有一个 child 且是 div，则取其子元素
if (children.length === 1 && children[0].tagName.toLowerCase() === 'div') {
return Array.prototype.slice.call(children[0].children);
}
return Array.prototype.slice.call(children);
}
/**
* 估算文本高度
* @param {string} text
* @param {number} fontSize
* @returns {number} px
* 从 wangeditor 内容构建分页数据
* 完整实现：从编辑器DOM截图测高 -> 按分割线分组 -> 按高度分页 -> 生成staging HTML
* @param {string} html - 编辑器HTML内容
* @param {Array} blocks - parseHtmlToBlocks 解析后的块数组
* @param {number} contentAreaHeight - 内容区可用高度(px)
* @param {Object} sizeConfig - {width, height}
* @returns {jQuery Deferred} resolves with contentPages array
*/
function estimateTextHeight(text, fontSize) {
var charCount = text.length;
if (charCount === 0) return 0;
var charsPerLine = Math.floor(getContentWidth() / (fontSize * 1.0));
if (charsPerLine < 1) charsPerLine = 1;
var lines = Math.ceil(charCount / charsPerLine);
return lines * fontSize * 1.8 + 10; // 1.8行高 + 10px段落间距
function captureEditorBlocks(html, blocks, contentAreaHeight, sizeConfig) {
var deferred = $.Deferred();
// 按 page-break 分组
var groups = [];
var currentGroup = { blocks: [], domIndices: [] };
var domIdx = 0;
for (var i = 0; i < blocks.length; i++) {
if (blocks[i].type === 'page-break') {
if (currentGroup.blocks.length > 0) groups.push(currentGroup);
currentGroup = { blocks: [], domIndices: [] };
// page-break 对应 wangeditor 中的 divider(hr)，在 DOM 中也是一个子元素
domIdx++;
continue;
}
currentGroup.blocks.push(blocks[i]);
currentGroup.domIndices.push(domIdx);
domIdx++;
}
if (currentGroup.blocks.length > 0) groups.push(currentGroup);
if (groups.length === 0) {
deferred.resolve([]);
return deferred.promise();
}
/**
* 估算标题高度
*/
function estimateHeadingHeight(tag, text) {
var sizeMap = { h1: 28, h2: 24, h3: 20, h4: 18, h5: 16, h6: 14 };
var hSize = sizeMap[tag] || 20;
var charsPerLine = Math.floor(getContentWidth() / (hSize * 1.0));
if (charsPerLine < 1) charsPerLine = 1;
var lines = Math.ceil(text.length / charsPerLine);
return lines * hSize * 1.4 + 20; // heading行高1.4 + 20px上下间距
// 获取编辑器子元素
var editorChildren = getEditorChildren();
// 创建测量容器（500px = 540 - 20*2 padding，与内容区一致）
var $mc = $('<div>').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;
}
/**
* 估算列表高度
*/
function estimateListHeight($list) {
var items = $list.find('li').length;
return items * (config.fontSize * 1.8 + 5) + 15;
var group = groups[gi];
$mc.empty();
for (var j = 0; j < group.domIndices.length; j++) {
var di = group.domIndices[j];
if (di < editorChildren.length) {
$mc.append(editorChildren[di].cloneNode(true));
}
}
/**
* 估算引用块高度
*/
function estimateBlockquoteHeight($bq) {
var text = $bq.text();
return estimateTextHeight(text, config.fontSize) + 10;
requestAnimationFrame(function () {
var h = Math.round($mc[0].getBoundingClientRect().height);
// 按比例分配测量的实际高度给组内各个 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();
});
}
measureNext();
return deferred.promise();
}
// ===== 分页核心算法 =====
@@ -558,7 +556,7 @@ var PhoneImageEngine = (function () {
}
// 按句子拆分：句号、问号、叹号、换行（兼容不支持 lookbehind 的浏览器）
var effectiveFontSize = parseInt(config.fontSize, 10) || 14;
var effectiveFontSize = 14;
var parts = text.split(/([。！？\n])/);
var sentences = [];
var current = '';
@@ -574,7 +572,7 @@ var PhoneImageEngine = (function () {
if (sentences.length <= 1) {
// 无法按句子拆分，按固定字符数拆分
sentences = [];
var chunkSize = Math.floor(getContentWidth() / effectiveFontSize) *
var chunkSize = Math.floor(500 / effectiveFontSize) *
Math.floor(pageHeight / (effectiveFontSize * 1.8));
if (chunkSize < 10) chunkSize = 10;
for (var ci = 0; ci < text.length; ci += chunkSize) {
@@ -586,7 +584,10 @@ var PhoneImageEngine = (function () {
for (var j = 0; j < sentences.length; j++) {
var s = sentences[j].trim();
if (!s) continue;
var h = estimateTextHeight(s, effectiveFontSize);
var lineChars = Math.floor(500 / effectiveFontSize);
if (lineChars < 1) lineChars = 1;
var lines = Math.ceil(s.length / lineChars);
var h = lines * effectiveFontSize * 1.8 + 10;
result.push({
type: wrapperTag === 'blockquote' ? 'blockquote' : 'p',
html: '<' + wrapperTag + '>' + s + '</' + wrapperTag + '>',
@@ -1041,228 +1042,6 @@ var PhoneImageEngine = (function () {
});
}
/**
* 在中间栏 #content-flow 中将表格和代码块截图转为图片
* 在 renderContentFlow(blocks) 之后、measureBlockHeights(blocks) 之前调用
* 使用 convertedBlockCache 缓存已转换的图片，仅对新增/变更的 block 执行截图
* @param {Array} blocks - parseHtmlToBlocks 返回的块数组
* @returns {jQuery Deferred} resolves with blocks array
*/
function convertFlowBlocksToImages(blocks) {
var deferred = $.Deferred();
var $flow = $('#content-flow');
var blocksToConvert = []; // 需要重新截图的 block 索引
// 第一遍：检查缓存，命中则直接复用
for (var i = 0; i < blocks.length; i++) {
if (blocks[i].type !== 'table' && blocks[i].type !== 'pre') continue;
var cacheKey = simpleHash(blocks[i].html);
if (convertedBlockCache[cacheKey]) {
// 命中缓存
blocks[i].html = convertedBlockCache[cacheKey].imgHtml;
blocks[i].type = 'img';
// 更新中间栏显示
var $cachedEl = $flow.find('.content-flow-block[data-index="' + i + '"]');
if ($cachedEl.length) $cachedEl.html(blocks[i].html);
} else {
blocksToConvert.push(i);
}
}
if (blocksToConvert.length === 0) {
deferred.resolve(blocks);
return deferred.promise();
}
// 第二遍：串行截图未缓存的 block
var convertIdx = 0;
function convertNext() {
if (convertIdx >= blocksToConvert.length) {
deferred.resolve(blocks);
return;
}
var blockIdx = blocksToConvert[convertIdx];
var block = blocks[blockIdx];
var $blockEl = $flow.find('.content-flow-block[data-index="' + blockIdx + '"]');
if (!$blockEl.length) {
convertIdx++;
convertNext();
return;
}
// 对代码块：先应用 Prism 高亮
if (block.type === 'pre' && typeof Prism !== 'undefined') {
$blockEl.find('pre > code:not([class*="language-"])').addClass('language-plaintext');
$blockEl.find('pre code').each(function () { Prism.highlightElement(this); });
}
html2canvas($blockEl[0], {
scale: 2,
useCORS: true,
backgroundColor: block.type === 'table' ? '#ffffff' : '#f5f5f5',
logging: false
}).then(function (canvas) {
var imgData = canvas.toDataURL('image/jpeg', 0.92);
var imgHtml = '<img src="' + imgData + '" data-converted="true" style="max-width:100%;height:auto;display:block;margin:10px 0;" />';
// 存入缓存（用截图前的原始HTML做key）
var originalHtml = block.html;
var cacheKey = simpleHash(originalHtml);
convertedBlockCache[cacheKey] = { imgHtml: imgHtml };
block.html = imgHtml;
block.type = 'img';
$blockEl.html(imgHtml);
convertIdx++;
convertNext();
}).catch(function () {
// 截图失败，保留原样
convertIdx++;
convertNext();
});
}
convertNext();
return deferred.promise();
}
/**
* DOM实测高度 - 从#content-flow中读取每个块的实际渲染高度
* @param {Array} blocks - parseHtmlToBlocks 返回的块数组
*/
function measureBlockHeights(blocks) {
var $flow = $('#content-flow');
if (!$flow.length) return;
for (var i = 0; i < blocks.length; i++) {
var block = blocks[i];
if (block.type === 'page-break') continue;
var $blockEl = $flow.find('.content-flow-block[data-index="' + i + '"]');
if ($blockEl.length) {
var actualHeight = Math.round($blockEl[0].getBoundingClientRect().height);
if (actualHeight > 0) {
block.estimatedHeight = actualHeight;
}
}
}
}
/**
* 渲染内容流到 #content-flow 容器
* @param {Array} blocks - parseHtmlToBlocks 返回的块数组
*/
function renderContentFlow(blocks) {
var $flow = $('#content-flow');
if (!$flow.length) return;
$flow.empty();
for (var i = 0; i < blocks.length; i++) {
var block = blocks[i];
// 分页标记
if (block.type === 'page-break') {
var $marker = $('<div class="page-break-marker">' +
'<span class="break-marker-label">-- 分页标记 --</span>' +
'<button class="remove-break-btn" data-index="' + i + '" title="删除分页">&times;</button>' +
'</div>');
$flow.append($marker);
continue;
}
// 内容块
var $block = $('<div class="content-flow-block" data-index="' + i + '">' + block.html + '</div>');
$flow.append($block);
// 块与块之间的分页插入区域（不在最后一个块之后添加）
if (i < blocks.length - 1) {
var $inserter = $('<div class="break-inserter" data-after-index="' + i + '">' +
'<button class="break-inserter-btn" title="插入分页">+</button>' +
'</div>');
$flow.append($inserter);
}
}
}
/**
* 在指定位置插入分页标记
* 修改 postData.content_html，在对应位置插入 <hr>
* @param {number} blockIndex - 在哪个块之后插入 (对应 break-inserter 的 data-after-index)
*/
function insertPageBreak(blockIndex) {
// 如果正在渲染，延迟重试
if (render._locked) {
insertPageBreak._retryCount = (insertPageBreak._retryCount || 0) + 1;
if (insertPageBreak._retryCount >= 15) {
insertPageBreak._retryCount = 0;
layer.msg('操作超时，请重试');
return;
}
setTimeout(function () { insertPageBreak(blockIndex); }, 200);
return;
}
insertPageBreak._retryCount = 0;
var cleanHtml = preprocessContent(postData.content_html);
var $temp = $('<div>').html(cleanHtml);
var children = $temp.children();
// 在 blockIndex 位置的元素之后插入 <hr>
if (blockIndex >= 0 && blockIndex < children.length) {
$(children[blockIndex]).after('<hr>');
} else {
$temp.append('<hr>');
}
postData.content_html = $temp.html();
// 重新渲染
render();
}
/**
* 删除指定位置的分页标记
* @param {number} blockIndex - 分页标记的 data-index
*/
function removePageBreak(blockIndex) {
// 如果正在渲染，延迟重试
if (render._locked) {
removePageBreak._retryCount = (removePageBreak._retryCount || 0) + 1;
if (removePageBreak._retryCount >= 15) {
removePageBreak._retryCount = 0;
layer.msg('操作超时，请重试');
return;
}
setTimeout(function () { removePageBreak(blockIndex); }, 200);
return;
}
removePageBreak._retryCount = 0;
// 统计这是第几个 page-break
var cleanHtml = preprocessContent(postData.content_html);
var $temp = $('<div>').html(cleanHtml);
var hrElements = $temp.find('hr');
// 在 blocks 数组中找到这个 page-break 是第几个
var breakOrder = 0;
var currentBlocks = parseHtmlToBlocks(cleanHtml);
for (var i = 0; i < currentBlocks.length && i < blockIndex; i++) {
if (currentBlocks[i].type === 'page-break') breakOrder++;
}
if (breakOrder < hrElements.length) {
$(hrElements[breakOrder]).remove();
postData.content_html = $temp.html();
render();
}
}
// ===== 图片生成 =====
/**
@@ -1364,7 +1143,6 @@ var PhoneImageEngine = (function () {
output_type: 'phone_image',
config: {
size: saveConfig.size || config.size,
fontSize: saveConfig.fontSize || config.fontSize,
watermark: saveConfig.watermark || config.watermark,
pageAlignments: config.pageAlignments || {}
},
@@ -1405,57 +1183,75 @@ var PhoneImageEngine = (function () {
config.pageAlignments[pageNum] = align;
}
// ===== 导出长图 =====
/**
* 导出内容流为长图
* 导出长图：从 wangeditor DOM 截取完整长图
* @returns {jQuery Deferred} resolves with canvas
*/
function exportLongImage() {
var deferred = $.Deferred();
if (render._locked) {
layer.msg('请等待渲染完成');
deferred.reject('rendering');
return deferred.promise();
}
var $flow = $('#content-flow');
if (!$flow.length) {
deferred.reject('内容流容器不存在');
var editorChildren = getEditorChildren();
if (editorChildren.length === 0) {
deferred.reject('编辑器内容为空');
return deferred.promise();
}
// 临时隐藏交互元素
$flow.find('.break-inserter').hide();
$flow.find('.page-break-marker').hide();
// 创建临时容器，宽度540px与编辑器一致
var $container = $('<div>').css({
width: '540px',
position: 'fixed',
left: '-9999px',
top: '0',
visibility: 'visible',
background: '#ffffff',
padding: '20px',
boxSizing: 'border-box',
fontSize: '14px',
lineHeight: '1.8'
});
// 获取内容流的实际高度
var flowWidth = $flow.outerWidth();
var flowHeight = $flow[0].scrollHeight;
// 克隆所有非 divider 的子元素
for (var i = 0; i < editorChildren.length; i++) {
var el = editorChildren[i];
var isDivider = el.getAttribute('data-w-e-type') === 'divider' ||
el.tagName.toLowerCase() === 'hr';
if (!isDivider) {
$container.append(el.cloneNode(true));
}
}
html2canvas($flow[0], {
$('body').append($container);
requestAnimationFrame(function () {
var width = $container.outerWidth();
var height = $container[0].scrollHeight;
html2canvas($container[0], {
scale: 2,
useCORS: true,
backgroundColor: '#ffffff',
width: flowWidth,
height: flowHeight,
width: width,
height: height,
logging: false
}).then(function (canvas) {
// 恢复交互元素
$flow.find('.break-inserter').show();
$flow.find('.page-break-marker').show();
// 触发下载
$container.remove();
var link = document.createElement('a');
link.download = 'phone-image-long-' + Date.now() + '.png';
link.href = canvas.toDataURL('image/png');
link.click();
deferred.resolve(canvas);
}).catch(function (err) {
// 恢复交互元素
$flow.find('.break-inserter').show();
$flow.find('.page-break-marker').show();
$container.remove();
deferred.reject('长图导出失败: ' + err);
});
});
return deferred.promise();
}
@@ -1480,16 +1276,17 @@ var PhoneImageEngine = (function () {
saveImages: saveImages,
saveConfig: saveConfig,
setPageAlignment: setPageAlignment,
insertPageBreak: insertPageBreak,
removePageBreak: removePageBreak,
exportLongImage: exportLongImage,
getContentHtml: function () {
if (window.phoneImageEditor) {
return window.phoneImageEditor.getHtml();
}
return postData.content_html;
},
updateConfig: function (newConfig) {
if (newConfig) {
$.extend(config, newConfig);
}
},
exportLongImage: exportLongImage
}
};
})();

404
view/admin/post/phone_image.html
View File

@@ -7,9 +7,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{$post.title} - 手机图片排版</title>
<link rel="stylesheet" href="/static/lib/layui/css/layui.css">
<link rel="stylesheet" href="/static/lib/wangeditor/css/style.css">
<link rel="stylesheet" href="/static/css/phone-image-templates.css">
<link rel="stylesheet" href="/static/css/phone-image-fonts.css">
<link rel="stylesheet" href="/static/lib/prismjs/prism.css">
<style>
body {
margin: 0;
@@ -19,29 +19,37 @@
.page-header {
background: #fff;
padding: 15px 20px;
padding: 10px 20px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
}
.page-header h3 {
.page-header-left {
display: flex;
align-items: center;
gap: 10px;
}
.page-header-left h3 {
margin: 0;
font-size: 18px;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 300px;
}
.page-header-right {
display: flex;
align-items: center;
gap: 8px;
}
.main-layout {
display: flex;
height: calc(100vh - 60px);
}
.toolbar {
width: 220px;
background: #fff;
border-right: 1px solid #e8e8e8;
padding: 15px;
overflow-y: auto;
height: calc(100vh - 52px);
}
.content-flow-area {
@@ -51,6 +59,17 @@
background: #fafafa;
}
#editor-toolbar {
border-bottom: 1px solid #e8e8e8;
background: #fff;
}
#editor-text-area {
min-height: 300px;
padding: 10px;
background: #fff;
}
.paginated-preview-area {
flex: 1;
overflow-x: auto;
@@ -68,27 +87,15 @@
padding: 0 10px;
}
.toolbar .layui-form-label {
/* 设置弹框样式 */
.settings-form .layui-form-item {
margin-bottom: 15px;
}
.settings-form .layui-form-label {
width: 60px;
padding: 6px 8px;
font-size: 13px;
}
.toolbar .layui-input-block {
margin-left: 70px;
}
.toolbar .layui-form-item {
margin-bottom: 12px;
}
.action-btns {
margin-top: 15px;
}
.action-btns .layui-btn {
width: 100%;
margin-bottom: 8px;
.settings-form .layui-input-block {
margin-left: 90px;
}
</style>
</head>
@@ -98,69 +105,30 @@
<div id="post-content-html" style="display:none;">{$layoutContentHtml|raw}</div>
<div class="page-header">
<div>
<div class="page-header-left">
<a href="{:url('post/index')}" class="layui-btn layui-btn-sm layui-btn-primary"><i
class="layui-icon layui-icon-return"></i> 返回列表</a>
{* 输出管理入口已移至历史记录弹窗 *}
</div>
<h3>{$post.title}</h3>
</div>
<div class="page-header-right">
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="btn-settings"><i
class="layui-icon layui-icon-set"></i> 设置</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" id="btn-save"><i
class="layui-icon layui-icon-ok"></i> 保存</button>
<button type="button" class="layui-btn layui-btn-sm" id="btn-generate"><i
class="layui-icon layui-icon-picture"></i> 生成并保存</button>
<div class="layui-btn-group" style="margin:0;">
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="btn-more"><i
class="layui-icon layui-icon-more"></i></button>
</div>
</div>
</div>
<div class="main-layout">
<!-- 左侧工具栏 -->
<div class="toolbar">
<div class="layui-form" lay-filter="phoneImageForm">
<!-- 尺寸选择 -->
<div class="layui-form-item">
<label class="layui-form-label">尺寸</label>
<div class="layui-input-block">
<select name="size" lay-filter="size">
<option value="xiaohongshu">小红书 (1080x1440)</option>
<option value="douyin">抖音 (1080x1920)</option>
</select>
</div>
</div>
<!-- 字号 -->
<div class="layui-form-item">
<label class="layui-form-label">字号</label>
<div class="layui-input-block">
<input type="range" name="fontSize" min="10" max="24" value="14" lay-filter="fontSize"
style="width:100%;">
<span id="fontSizeValue">14px</span>
</div>
</div>
<!-- 水印 -->
<div class="layui-form-item">
<label class="layui-form-label">水印</label>
<div class="layui-input-block">
<input type="text" name="watermark" placeholder="可选水印文字" class="layui-input">
</div>
</div>
<!-- 历史记录 -->
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="btn-history" style="width:100%;margin-bottom:10px;"><i class="layui-icon layui-icon-list"></i> 历史记录</button>
<!-- 操作按钮 -->
<div class="action-btns">
<button type="button" class="layui-btn layui-btn-primary" id="btn-rerender"><i
class="layui-icon layui-icon-refresh"></i> 重新生成</button>
<button type="button" class="layui-btn layui-btn-normal" id="btn-save"><i
class="layui-icon layui-icon-ok"></i> 保存</button>
<button type="button" class="layui-btn layui-btn-normal" id="btn-generate"><i
class="layui-icon layui-icon-picture"></i> 生成并保存</button>
<button type="button" class="layui-btn layui-btn-warm" id="btn-download"><i
class="layui-icon layui-icon-download-circle"></i> 打包下载</button>
<button type="button" class="layui-btn layui-btn-primary" id="btn-export-long"><i
class="layui-icon layui-icon-picture"></i> 导出长图</button>
</div>
</div>
</div>
<!-- 中间：内容流 -->
<!-- 左侧：wangeditor 编辑器 -->
<div class="content-flow-area">
<div id="content-flow" class="content-flow"></div>
<div id="editor-toolbar"></div>
<div id="editor-text-area"></div>
</div>
<!-- 右侧：分页排版预览 -->
@@ -171,13 +139,14 @@
<script src="/static/lib/jquery/jquery-3.4.1.min.js"></script>
<script src="/static/lib/layui/layui.js"></script>
<script src="/static/lib/wangeditor/index.js"></script>
<script src="/static/lib/html2canvas/html2canvas.js"></script>
<script src="/static/lib/prismjs/prism.js"></script>
<script src="/static/js/phone-image.js"></script>
<script>
layui.use(['form', 'layer'], function () {
layui.use(['form', 'layer', 'dropdown'], function () {
var form = layui.form;
var layer = layui.layer;
var dropdown = layui.dropdown;
var lastOutputId = null;
var downloadBaseUrl = '{:url("post/downloadPostOutputZip", ["id" => 0])}';
@@ -185,6 +154,12 @@
var historyListUrl = '{:url("post/getOutputListJson", ["id" => $post->id])}';
var loadConfigUrl = '{:url("post/loadPostOutputConfig")}';
// 当前排版配置（从设置弹框维护）
var currentConfig = {
size: 'xiaohongshu',
watermark: ''
};
var postData = {
postId: {$post.id},
title: <?php echo json_encode($post->title ?? ''); ?>,
@@ -201,47 +176,163 @@
var savedConfig = <?php echo $layoutConfig ? json_encode($layoutConfig) : '{}'; ?>;
var initConfig = {
size: savedConfig.size || 'xiaohongshu',
fontSize: savedConfig.fontSize || 14,
watermark: savedConfig.watermark || '',
pageAlignments: savedConfig.pageAlignments || {}
};
// 同步当前配置
currentConfig.size = initConfig.size;
currentConfig.watermark = initConfig.watermark;
// ========== wangeditor 初始化 ==========
var E = window.wangEditor;
var editorConfig = { MENU_CONF: {} };
editorConfig.placeholder = '请输入排版内容，使用分割线标记分页位置';
editorConfig.scroll = false;
editorConfig.MENU_CONF['uploadImage'] = {
server: '{:url("File/wangEditorSave")}',
fieldName: 'file',
meta: {
type: 'editor'
}
};
editorConfig.onChange = function (editor) {
// T5会实现自动保存
};
// 粘贴处理：处理外部图片下载
editorConfig.customPaste = function (editor, event) {
var pasteStr = event.clipboardData.getData('text/html');
var imgReg = /<img.*?(?:>|\/>)/gi;
var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
var arr = pasteStr.match(imgReg);
if (arr == null || arr.length == 0) {
return true;
}
layer.load();
for (var i = 0; i < arr.length; i++) {
var src = arr[i].match(srcReg);
if (src[1]) {
var imgSrc = src[1];
var prefix = imgSrc.substr(0, 4);
if (prefix == 'http') {
$.ajax({
async: false,
type: 'POST',
url: "{:url('File/urlSave')}",
data: {
url: imgSrc,
type: 'editor'
},
success: function (result) {
pasteStr = pasteStr.replace(imgSrc, result.data.src)
}
})
} else if (prefix == 'data') {
$.ajax({
async: false,
type: 'POST',
url: '{:url("File/base64Save")}',
data: {
data: imgSrc,
type: 'editor'
},
success: function (result) {
pasteStr = pasteStr.replace(imgSrc, result.data.src)
}
})
}
}
}
layer.closeAll('loading');
editor.dangerouslyInsertHtml(pasteStr);
event.preventDefault();
return false;
};
var phoneImageEditor = E.createEditor({
selector: '#editor-text-area',
html: postData.contentHtml,
config: editorConfig
});
var toolbar = E.createToolbar({
editor: phoneImageEditor,
selector: '#editor-toolbar',
config: {
excludeKeys: ['fullScreen'],
insertKeys: {
index: 24,
keys: ['divider']
}
}
});
window.phoneImageEditor = phoneImageEditor;
PhoneImageEngine.init(postData, initConfig);
// 同步尺寸选择
$('[name="size"]').val(initConfig.size);
form.render('select');
// ========== 设置弹框 ==========
$('#btn-settings').click(function () {
var settingsHtml = '<div class="settings-form" style="padding:20px 20px 0;">';
settingsHtml += '<form class="layui-form" lay-filter="settingsForm">';
settingsHtml += '<div class="layui-form-item">';
settingsHtml += '<label class="layui-form-label">尺寸</label>';
settingsHtml += '<div class="layui-input-block">';
settingsHtml += '<select name="s_size" lay-filter="s_size">';
settingsHtml += '<option value="xiaohongshu"' + (currentConfig.size === 'xiaohongshu' ? ' selected' : '') + '>小红书 (1080x1440)</option>';
settingsHtml += '<option value="douyin"' + (currentConfig.size === 'douyin' ? ' selected' : '') + '>抖音 (1080x1920)</option>';
settingsHtml += '</select>';
settingsHtml += '</div>';
settingsHtml += '</div>';
settingsHtml += '<div class="layui-form-item">';
settingsHtml += '<label class="layui-form-label">水印</label>';
settingsHtml += '<div class="layui-input-block">';
settingsHtml += '<input type="text" name="s_watermark" value="' + (currentConfig.watermark || '') + '" placeholder="可选水印文字" class="layui-input">';
settingsHtml += '</div>';
settingsHtml += '</div>';
settingsHtml += '</form>';
settingsHtml += '</div>';
// 尺寸切换
form.on('select(size)', function (data) {
doRender();
});
// 字号调整
$('[name="fontSize"]').on('input', function () {
$('#fontSizeValue').text($(this).val() + 'px');
layer.open({
type: 1,
title: '排版设置',
area: ['400px', '220px'],
content: settingsHtml,
btn: ['确定', '取消'],
success: function (layero) {
form.render('select', 'settingsForm');
},
yes: function (index, layero) {
currentConfig.size = layero.find('[name="s_size"]').val();
currentConfig.watermark = layero.find('[name="s_watermark"]').val();
layer.close(index);
doRender();
}
});
});
// ========== 渲染逻辑 ==========
var renderTimer = null;
function doRender(extraConfig) {
clearTimeout(renderTimer);
renderTimer = setTimeout(function() {
var fontSize = parseInt($('[name="fontSize"]').val()) || 14;
renderTimer = setTimeout(function () {
var newConfig = {
size: $('[name="size"]').val(),
fontSize: fontSize,
watermark: $('[name="watermark"]').val()
size: currentConfig.size,
watermark: currentConfig.watermark
};
if (extraConfig) {
$.extend(newConfig, extraConfig);
}
// 关键修改：用 updateConfig 替代 init，不重置 postData
PhoneImageEngine.updateConfig(newConfig);
var loadIdx = layer.load();
PhoneImageEngine.render().then(function(pages) {
PhoneImageEngine.render().then(function (pages) {
layer.close(loadIdx);
layer.msg('排版完成，共 ' + pages.length + ' 页');
}).catch(function(err) {
}).catch(function (err) {
layer.close(loadIdx);
if (err !== 'rendering') {
layer.msg('渲染失败: ' + err);
@@ -250,21 +341,43 @@
}, 300);
}
// 重新生成（强制重新渲染缩略图）
$('#btn-rerender').click(function () {
// ========== 更多下拉菜单 ==========
dropdown.render({
elem: '#btn-more',
data: [
{ title: '历史记录', id: 'history' },
{ title: '重新生成', id: 'rerender' },
{ title: '打包下载', id: 'download' },
{ title: '导出长图', id: 'exportLong' }
],
click: function (data) {
switch (data.id) {
case 'history':
$('#btn-history').trigger('click');
break;
case 'rerender':
doRender();
break;
case 'download':
$('#btn-download-hidden').trigger('click');
break;
case 'exportLong':
$('#btn-export-long-hidden').trigger('click');
break;
}
},
align: 'right'
});
// 保存配置（不生成图片）
// ========== 保存配置（不生成图片） ==========
$('#btn-save').click(function () {
var btn = $(this);
btn.prop('disabled', true);
layer.msg('保存中...');
PhoneImageEngine.saveConfig(postData.postId, {
size: $('[name="size"]').val(),
fontSize: parseInt($('[name="fontSize"]').val()) || 14,
watermark: $('[name="watermark"]').val(),
size: currentConfig.size,
watermark: currentConfig.watermark,
content_html: PhoneImageEngine.getContentHtml()
}, saveConfigUrl).then(function (data) {
if (data.output_id) lastOutputId = data.output_id;
@@ -277,16 +390,15 @@
});
});
// 生成并保存
// ========== 生成并保存 ==========
$('#btn-generate').click(function () {
var btn = $(this);
btn.prop('disabled', true).text('生成中...');
btn.prop('disabled', true).html('<i class="layui-icon layui-icon-picture"></i> 生成中...');
layer.msg('正在生成图片，请稍候...');
PhoneImageEngine.saveImages(postData.postId, {
size: $('[name="size"]').val(),
fontSize: parseInt($('[name="fontSize"]').val()) || 14,
watermark: $('[name="watermark"]').val(),
size: currentConfig.size,
watermark: currentConfig.watermark,
content_html: PhoneImageEngine.getContentHtml()
}).then(function (data) {
if (data.output_id) {
@@ -301,8 +413,10 @@
});
});
// 打包下载
$('#btn-download').click(function () {
// ========== 打包下载（隐藏按钮，由更多菜单触发） ==========
var downloadBtn = $('<button type="button" id="btn-download-hidden" style="display:none;"></button>');
$('body').append(downloadBtn);
downloadBtn.on('click', function () {
if (!lastOutputId) {
layer.msg('请先生成并保存图片');
return;
@@ -311,21 +425,29 @@
window.open(url);
});
// 导出长图
$('#btn-export-long').click(function () {
var btn = $(this);
btn.prop('disabled', true).text('导出中...');
// ========== 导出长图（隐藏按钮，由更多菜单触发） ==========
var exportLongBtn = $('<button type="button" id="btn-export-long-hidden" style="display:none;"></button>');
$('body').append(exportLongBtn);
exportLongBtn.on('click', function () {
PhoneImageEngine.exportLongImage().then(function () {
btn.prop('disabled', false).html('<i class="layui-icon layui-icon-picture"></i> 导出长图');
layer.msg('长图已导出');
}).catch(function (err) {
btn.prop('disabled', false).html('<i class="layui-icon layui-icon-picture"></i> 导出长图');
layer.msg('导出失败: ' + err);
});
});
// 历史记录弹窗
$('#btn-history').click(function () {
// ========== 历史记录（隐藏按钮，由更多菜单和设置旁入口触发） ==========
var historyBtn = $('<button type="button" id="btn-history" style="display:none;"></button>');
$('body').append(historyBtn);
// 重新生成（隐藏按钮，由更多菜单触发）
var rerenderBtn = $('<button type="button" id="btn-rerender" style="display:none;"></button>');
$('body').append(rerenderBtn);
rerenderBtn.on('click', function () {
doRender();
});
historyBtn.on('click', function () {
var loadIdx = layer.load();
$.get(historyListUrl, function (res) {
layer.close(loadIdx);
@@ -390,22 +512,12 @@
// 构建历史配置
var historyConfig = {};
if (cfg.size) historyConfig.size = cfg.size;
if (cfg.fontSize || cfg.font_size) historyConfig.fontSize = cfg.fontSize || cfg.font_size;
if (cfg.watermark !== undefined) historyConfig.watermark = cfg.watermark;
if (cfg.pageAlignments) historyConfig.pageAlignments = cfg.pageAlignments;
// 同步表单控件
if (cfg.size) {
$('[name="size"]').val(cfg.size);
form.render('select');
}
if (historyConfig.fontSize) {
$('[name="fontSize"]').val(historyConfig.fontSize);
$('#fontSizeValue').text(historyConfig.fontSize + 'px');
}
if (cfg.watermark !== undefined) {
$('[name="watermark"]').val(cfg.watermark);
}
// 同步当前配置
if (cfg.size) currentConfig.size = cfg.size;
if (cfg.watermark !== undefined) currentConfig.watermark = cfg.watermark;
lastOutputId = outputId;
layer.closeAll();
@@ -413,10 +525,10 @@
// 全量初始化引擎（加载历史是新内容，需要完整初始化）
PhoneImageEngine.init(postData, historyConfig);
var loadIdx3 = layer.load();
PhoneImageEngine.render().then(function(pages) {
PhoneImageEngine.render().then(function (pages) {
layer.close(loadIdx3);
layer.msg('已加载历史配置，共 ' + pages.length + ' 页');
}).catch(function(err) {
}).catch(function (err) {
layer.close(loadIdx3);
if (err !== 'rendering') layer.msg('渲染失败: ' + err);
});