ulthon/ulthon_information
1
0
Fork 0
mirror of https://gitee.com/ulthon/ulthon_information.git synced 2026-07-01 16:22:49 +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

410
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>
{* 输出管理入口已移至历史记录弹窗 *}
<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>
<h3>{$post.title}</h3>
</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');
doRender();
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 () {
doRender();
// ========== 更多下拉菜单 ==========
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);
});
@@ -433,4 +545,4 @@
<div id="render-staging" style="position:fixed;left:-9999px;top:0;visibility:hidden;"></div>
</body>
</html>
</html>