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

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/app/admin/controller/File.php
+++ b/app/admin/controller/File.php
@@ -4,6 +4,8 @@ namespace app\admin\controller;

 use app\model\UploadFiles;
 use app\UploadFiles as AppUploadFiles;
+use League\Flysystem\Util\MimeType;
+use think\facade\App;
 use think\facade\View;
 use think\Request;

@@ -74,6 +76,39 @@ class File extends Common
    {
        return AppUploadFiles::saveBase64File($request->param('data'), $request->param('type'));
    }
+    public function tempBase64Save(Request $request)
+    {
+
+        $file_data = $request->param('data');
+        if (strstr($file_data, ",")) {
+            $file_data = explode(',', $file_data);
+            $file_data = $file_data[1];
+        }
+        $file_data = base64_decode($file_data);
+
+        $mime_type = MimeType::detectByContent($file_data);
+        $ext_name = array_search($mime_type, MimeType::getExtensionToMimeTypeMap());
+
+        $public_file_path = '/temp_img/' . uniqid() . '.' . $ext_name;
+
+
+
+        $temp_file = App::getRootPath() . 'public' . $public_file_path;
+
+        $dirname = dirname($temp_file);
+
+        if (!is_dir($dirname)) {
+            mkdir($dirname, 0777, true);
+        }
+
+        file_put_contents($temp_file, $file_data);
+
+        // TODO:将文件存入数据库并且删除过期文件
+
+        return json_message([
+            'src' => $public_file_path
+        ]);
+    }

    public function clear($id)
    {
--- a/app/admin/controller/Post.php
+++ b/app/admin/controller/Post.php
@@ -126,6 +126,14 @@ class Post extends Common
        return View::fetch();
    }

+    public function output($id)
+    {
+        $model_post = ModelPost::find($id);
+
+        View::assign('post', $model_post);
+        return View::fetch();
+    }
+
    /**
     * 保存更新的资源
     *
--- a/database/migrations/20220314154624_create_table_temp_img.php
+++ b/database/migrations/20220314154624_create_table_temp_img.php
@@ -0,0 +1,42 @@
+<?php
+
+use app\common\ColumnFormat;
+use think\migration\Migrator;
+use think\migration\db\Column;
+
+class CreateTableTempImg extends Migrator
+{
+    /**
+     * Change Method.
+     *
+     * Write your reversible migrations using this method.
+     *
+     * More information on writing migrations is available here:
+     * http://docs.phinx.org/en/latest/migrations.html#the-abstractmigration-class
+     *
+     * The following commands can be used in this method and Phinx will
+     * automatically reverse them when rolling back:
+     *
+     *    createTable
+     *    renameTable
+     *    addColumn
+     *    renameColumn
+     *    addIndex
+     *    addForeignKey
+     *
+     * Remember to call "create()" or "update()" and NOT "save()" when working
+     * with the Table class.
+     */
+    public function change()
+    {
+        $table = $this->table('temp_img');
+
+        $table->addColumn(ColumnFormat::stringUrl('path'))->setComment('临时文件路径');
+
+        $table->addColumn(ColumnFormat::timestamp('create_time'));
+        $table->addColumn(ColumnFormat::timestamp('update_time'));
+        $table->addColumn(ColumnFormat::timestamp('delete_time'));
+
+        $table->create();
+    }
+}
--- a/public/static/lib/html2canvas/html2canvas.js
+++ b/public/static/lib/html2canvas/html2canvas.js
--- a/view/admin/post/index.html
+++ b/view/admin/post/index.html
@@ -76,6 +76,7 @@
                                        <a class="layui-btn layui-btn-sm" target="_blank" href="{$vo.read_url}">查看</a>
                                        <a class="layui-btn layui-btn-sm" href="{:url('edit',['id'=>$vo.id,'type'=>$Request.param.type])}">设置</a>
                                        <a class="layui-btn layui-btn-sm" href="{:url('editContent',['id'=>$vo.id,'type'=>$Request.param.type])}">编辑</a>
+                                        <a class="layui-btn layui-btn-sm" target="_blank" href="{:url('output',['id'=>$vo.id,'type'=>$Request.param.type])}">导出</a>
                                        <div class="layui-btn layui-btn-sm delete">删除</div>
                                    </div>
                                </td>
--- 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>
--- a/view/index/post/read.html
+++ b/view/index/post/read.html
@@ -12,9 +12,6 @@
  <script src="/static/lib/prismjs/prism.js"></script>
  <script src="/static/lib/clipboard/clipboard.js"></script>
  <style>
-    .ql-editor {
-      padding: unset
-    }

    .share {
      cursor: pointer;
@@ -238,11 +235,6 @@
      })
    })

-    $('.ql-editor pre').each(function (n, e) {
-
-      hljs.highlightBlock(e);
-    })
-
    $('.share').click(function () {
      var html = $('.share-tips-options').prop("outerHTML")