145 lines
4.9 KiB
HTML
145 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>公众号式文章编辑器</title>
|
|
<!-- 引入 Layui 样式 -->
|
|
<link rel="stylesheet" href="/assets/layui/css/layui.css" />
|
|
<link rel="stylesheet" href="/assets/ywxapp/css/ywxapp.css" />
|
|
<!-- 引入 UEditorPlus 核心 -->
|
|
|
|
<script type="text/javascript" src=" /assets/library/ueditor/ueditor.config.js"></script>
|
|
<script type="text/javascript" src="/assets/library/ueditor/ueditor.all.js"></script>
|
|
<style>
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body class=" layui-container">
|
|
<!-- 核心编辑区 -->
|
|
<form class="layui-form action="">
|
|
<!-- 标题输入 -->
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-wrap">
|
|
<input type="text" name="title" autocomplete="off" placeholder="请在这里输入标题（最多64字）" lay-verify="required" class="layui-input" maxlength="64">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-wrap">
|
|
<input type="text" name="author" autocomplete="off" placeholder="请输入作者（最多8字）" maxlength="8" lay-verify="required" class="layui-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-wrap">
|
|
|
|
<script id="editor" type="text/plain" style="height: 450px;"></script>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 功能按钮：保存/预览/发表 -->
|
|
<div class="function-buttons">
|
|
<button class="layui-btn layui-btn-normal" id="saveDraft">保存为草稿</button>
|
|
<button class="layui-btn layui-btn-primary" id="preview">预览</button>
|
|
<button class="layui-btn layui-btn-danger" id="publish">发表</button>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
|
|
<!-- 引入 Layui 脚本 -->
|
|
<script src="/assets/layui/layui.js"></script>
|
|
<script src="/assets/ywxapp/ywxapp.js" module="backend"></script>
|
|
<script>
|
|
// 初始化 Layui
|
|
layui.use(["jquery", "form"], function () {
|
|
var $ = layui.jquery;
|
|
var form = layui.form;
|
|
|
|
// 1. 初始化 UEditorPlus（富文本编辑器）
|
|
var ue = UE.getEditor("editor", {
|
|
toolbars: [
|
|
[
|
|
"undo", // 撤销
|
|
"redo", "|", // 重做
|
|
"removeformat", // 清除格式
|
|
"formatmatch", // 格式刷
|
|
"|",
|
|
"fontsize", // 字号
|
|
"bold", // 加粗
|
|
"italic", // 斜体
|
|
"underline", // 下划线
|
|
"strikethrough",// 删除线
|
|
"forecolor", // 字体颜色
|
|
"backcolor", // 背景色
|
|
"|",
|
|
"justifyleft", // 居左对齐
|
|
"justifycenter", // 居中对齐
|
|
"justifyright",
|
|
"justifyjustify", // 两端对齐
|
|
"indent", // 首行缩进
|
|
"|",
|
|
"inserttable", // 插入表格
|
|
"blockquote", // 引用
|
|
"horizontal",
|
|
"insertcode", // 插入代码
|
|
"emotion", // 表情
|
|
"|",
|
|
"ai", // AI智能
|
|
"|",
|
|
"print", // 打印
|
|
"preview", // 预览
|
|
"searchreplace", // 查询替换
|
|
]
|
|
],
|
|
autoHeightEnabled: true,
|
|
initialFrameWidth: "100%",
|
|
initialFrameHeight: 450,
|
|
});
|
|
|
|
// 2. 功能按钮事件绑定
|
|
// 保存草稿
|
|
$("#saveDraft").on("click", function () {
|
|
var title = $(".editor-title input").val().trim();
|
|
var author = $(".editor-author input").val().trim();
|
|
var content = ue.getContent(); // 获取编辑器内容
|
|
|
|
// 这里对接后端 API 保存草稿（示例仅打印）
|
|
console.log("保存草稿：", { title, author, content });
|
|
layui.layer.msg("草稿已保存！", { icon: 1 });
|
|
});
|
|
|
|
// 预览
|
|
$("#preview").on("click", function () {
|
|
// 实际需打开新窗口渲染内容，这里模拟
|
|
var previewContent = `标题：${$(".editor-title input").val()}\n作者：${$(".editor-author input").val()}\n内容：${ue.getContent()}`;
|
|
layui.layer.open({
|
|
type: 1,
|
|
title: "预览",
|
|
content: `<p>${previewContent}</p>`,
|
|
area: ["500px", "400px"],
|
|
});
|
|
});
|
|
|
|
// 发表
|
|
$("#publish").on("click", function () {
|
|
var title = $(".editor-title input").val().trim();
|
|
var author = $(".editor-author input").val().trim();
|
|
var content = ue.getContent();
|
|
|
|
// 对接后端 API 发表文章（示例仅打印）
|
|
console.log("发表文章：", { title, author, content });
|
|
layui.layer.msg("文章已发表！", { icon: 1 });
|
|
});
|
|
|
|
// 3. 表单开关事件（原创/赞赏/留言等）
|
|
form.on("switch()", function (data) {
|
|
var label = data.othis.parents("div").prev("label").text();
|
|
console.log(`${label} 状态：`, data.elem.checked);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |