新增导出面板,便于转载拷贝发布;

2026-03-03 16:24:28 +08:00 · 2022-03-15 00:26:22 +08:00
parent bc399a4782
commit 80b06b0b00
7 changed files with 8040 additions and 8 deletions
--- a/view/admin/post/output.html
+++ b/view/admin/post/output.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{$post.title}</title>
+    {include file="common/_require"}
+    <link rel="stylesheet" href="/static/lib/prismjs/prism.css">
+    <script src="/static/lib/prismjs/prism.js"></script>
+    <link rel="stylesheet" href="/static/css/index.articles.css">
+    <script src="/static/lib/html2canvas/html2canvas.js"></script>
+    <style>
+        .article-body {
+            padding: 15px
+        }
+
+        .article-body>* {
+            margin: 10px 0
+        }
+
+        .options-box {
+            position: fixed;
+            right: 0;
+            top: 20%;
+            margin: 15px;
+            padding: 15px;
+            border-radius: 5;
+            border: 1px solid #e8e8e8;
+            background: #fff;
+
+        }
+
+        .options-box>* {
+            display: block;
+            margin-bottom: 15px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="article-body">
+        <h1 id="post-title" style="user-select: all;">{$post.title}</h1>
+        <div id="post-desc" style="user-select: all;">
+            {$post.desc}
+        </div>
+        <article id="post-content" class="ul-content">{$post->content_html|raw}</article>
+    </div>
+
+    <div class="options-box layui-btn-container">
+        <a class="copy-option layui-btn layui-btn-sm" href="#post-title">选中标题</a>
+        <a class="copy-option layui-btn layui-btn-sm" href="#post-desc">选中描述</a>
+        <a class="copy-option layui-btn layui-btn-sm select-content" href="#post-content">选中内容</a>
+        <div class="layui-btn layui-btn-sm code2base64">
+            代码转临时图片
+        </div>
+        <div class="layui-btn layui-btn-sm resetcode">
+            还原代码
+        </div>
+    </div>
+
+    <script>
+        $('.code2base64').click(function () {
+            $('#post-content').find('pre').each(function (index, elem) {
+                if ($(elem).hasClass('tobase64')) {
+                    return true;
+                }
+
+                $(elem).addClass('tobase64');
+
+                html2canvas(elem).then(function (canvas) {
+                    var imgData = canvas.toDataURL("image/jpeg", 1);
+
+                    $.post('{:url("File/tempBase64Save")}', {
+                        data: imgData
+                    }, function (result) {
+                        var imgDom = $('<img />');
+                        $(imgDom).attr('src', result.data.src);
+
+                        $(imgDom).insertAfter(elem).addClass('pre-to-canvas')
+                        $(elem).hide();
+                    })
+
+                });
+            })
+            $('.resetcode').click(function () {
+                $('#post-content').find('.pre-to-canvas').remove();
+                $('#post-content').find('pre').show().each(function (index, elem) {
+                    $(elem).removeClass('tobase64')
+                })
+
+
+            })
+
+
+        })
+
+
+        $('.copy-option').focusout(function (e) {
+            copyContent($(this).attr('href'))
+        })
+
+        function copyContent(id) {
+            var content = $(id)[0];
+
+            // 创建 Range 对象
+            const range = new Range();
+
+
+            // Range 起始位置在段落2
+            range.selectNode(content);
+            console.log(range);
+            // 获取 selection 对象
+            const selection = window.getSelection();
+            selection.removeAllRanges()
+            // 添加光标选择的范围
+            selection.addRange(range);
+        }
+
+    </script>
+</body>
+
+</html>