1、HTML视图

<div style="display: none;text-align: center"><button type="button" class="layui-btn" id="picker">选择图片</button></div>

2、JS代码

tableSelect.render({
        elem: '#picker',
        checkedKey: 'id',
        searchKey: 'original_name',
        searchPlaceholder: '文件源名称',
        height:'300',
        width:'800',
        table: {
            url: '/manage/uploads/show',
            cols: [[
                { type: 'radio' },
                { field: 'path', title: '缩略图', width:100, templet:'#row-file' },
                { field: 'original_name', title: '文件名' },
                { field: 'path', title: '文件地址' },
                { field: 'extension', width:100, title: '文件类型' },
            ]]
        },
        done: function (elem, data) {
            //console.log(data);
            let NEWJSON = [];
            layui.each(data.data, function (index, item) {
                NEWJSON.push(item.path)
            });
            let template = '<img src="/storage/' + NEWJSON.join(',') + '">';
            let categoryId = data.data[0].category_id;
            if(categoryId == 3) {
                template = '<a href="/storage/' + NEWJSON.join(',') + '">'+ data.data[0].original_name +'</a>';
            }
            if(categoryId == 4) {
                template = '<video src="/storage/' + NEWJSON.join(',') + '" controls="controls"></video>';
            }
            tinyMCE.editors[0].insertContent(template);
        }
    });

3、tableSelect扩展

layui.use(['form', 'jquery', 'tinymce', 'tableSelect'], function() {
    let form = layui.form;
    let $ = layui.jquery;
    let tableSelect = layui.tableSelect;


    tableSelect.render({
    elem: '#picIcon',
    checkedKey: 'id',
    searchKey: 'original_name',
    searchPlaceholder: '文件源名称',
    height:'300',
    width:'800',
    table: {
        url: '/manage/uploads/show',
        cols: [[
            { type: 'radio' },
            { field: 'path', title: '缩略图', width:100, templet:'#row-file' },
            { field: 'original_name', title: '文件名' },
            { field: 'path', title: '文件地址' },
            { field: 'extension', width:100, title: '文件类型' },
        ]]
    },
    done: function (elem, data) {
        let NEWJSON = []
        layui.each(data.data, function (index, item) {
            NEWJSON.push(item.path)
        })
        //elem.val(NEWJSON.join(","));
        $('#icon').val(NEWJSON.join(","))
    }
});

});

TinyMCE代码

tinymce.init({
    selector: '#content',
    language:'zh_CN',
    height:450,

    toolbar: 'filemanager',
    setup: function (editor) {
        editor.ui.registry.addButton('filemanager', { //这里的filemanager与上面toolabar中定义filemanger对应
            title: '文件选择',
            icon: 'duplicate',
            onAction: function () {
                $("#picker").click();
                //editor.windowManager.openUrl({
                //title: '文件选择器',
                //url: '/manage/picker',
                //height: 400,
                //width: 800
                //});
            }
        })
    },
});

4、效果

121.png

221.png

1、添加插件

我们需要在tinymcePlugins目录下新建一个filemanager文件夹,并添加一个名为plugin.min.js,其中editor传参后再图片管理页面通过var editor = top.tinymce.activeEditor.windowManager.getParams().editor; 获取编辑器对象,进行图片插入操作。

tinymce.PluginManager.add("filemanager", function (editor, url) {
    editor.addButton("filemanager", {
        title: "图片管理",
        icon: 'image',
        onclick: function () {
            editor.windowManager.open({
                title: "图片管理",
                url:  "/Administrator/Filemanager/Editor",
                width: window.innerWidth * 0.9,
                height: window.innerHeight * 0.8
            }, {
                    editor: editor // pointer to access editor from cshtml
            })
        }
    })
});

2、将选中图片插入编辑器

<script>
        //获取tinymce编辑器
        var editor = top.tinymce.activeEditor.windowManager.getParams().editor;

        layui.use(['upload'], function () {
            var upload = layui.upload;
            var dirId = $("#dirId").val() == "" ? 0 : $("#dirId").val();
            upload.render({ //允许上传的文件后缀
                elem: '#upload-img-btn'
                , url: 'UploadImage?dirId='   dirId
                , accept: 'file' //普通文件
                , multiple: true
                , size: 1024 * 2 //限制文件大小,单位 KB
                , exts: 'jpg|jpeg|png|gif' //只允许上传压缩文件
                , done: function (res) {
                    if (res.code == 0) {
                        window.location.reload();
                    }
                }
            });

            //删除图片
            $("#delete-img-btn").click(function () {
                var checkeds = [];
                $("input[name='file-id']:checkbox").each(function () {
                    if (true == $(this).is(':checked')) {
                        checkeds.push({
                            id: $(this).data('id'),
                            type: $(this).data('type')
                        });
                    }
                });
                if (checkeds.length == 0) {
                    layer.alert('请先选择需要删除的文件!');
                }
                else {
                    layer.confirm('删除后将无法恢复,请确认是否要删除所选文件?', {
                        btn: ['确定删除', '我在想想'] //按钮
                    }, function () {
                        $.ajax({
                            type: 'post',
                            url: 'CheckedFilesDelete',
                            data: { checkeds : checkeds },
                            success: function (result) {
                                if (result.code == 0) {
                                    window.location.reload();
                                }
                                else {
                                    showMsg(result.msg);
                                }
                            }
                        })
                    }, function () {
                    });
                }
            })
        })

        //添加图片至编辑器
        $(".file-img").click(function () {
            var url = $(this).data("url"),
                title = $(this).data("title");

            //添加确认
            layer.confirm('是否需要添加此图片?', {
                btn: ['确认添加', '我在想想'] //按钮
            }, function () {
                editor.execCommand('mceInsertContent', false, '<img alt="'   title   '" src="'url   '"/>');
                editor.windowManager.close();
            }, function () {});
        })
        
    </script>

转自:https://blog.csdn.net/qq_45670012/article/details/101991421

方法一:

//视图
//pagination::simple-default  //tailwind樣式
//pagination::simple-bootstrap-4  //bootstrap UI
$data->links('pagination::bootstrap-4')

//CSS定义
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
.pagination > li {
    display: inline;
}
.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #428bca;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    color: #009688;
    background-color: #eee;
    border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #009688;
    border-color: #009688;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
}
.clear{
    clear: both;
}

方法二:

也即是官方给的方法,在\App\Providers\AppServiceProvider中的boot方法中引用。

use Illuminate\Support\ServiceProvider;

/**
 * Bootstrap any application services.
 *
 * @return void
 */
public function boot()
{
    Paginator::useBootstrap();
}

有时候可能会遇到这种情况,$dataA$dataB是从数据库取出的两个不同的数据集合,需要同时将$dataA$dataB分配到视图并进行分页展示,那这种情况怎么办呢?

//控制器中
public function index(LiveService $liveService, Request $request)
    {
        //数据A
        $dataA = User::where('status', 1)->get()->toArray();
        //数据B
        $dataB = User::where('status', 2)->get()->toArray();
        $data = array_merge($dataA, $dataB);
        //当前页数 默认1
        $page = $request->page ?: 1;
        //每页的条数
        $perPage = 4;
        //计算每页分页的初始位置
        $offset = ($page * $perPage) - $perPage;
          //实例化LengthAwarePaginator类,并传入对应的参数
        $data = new LengthAwarePaginator(array_slice($data, $offset, $perPage, true), count($data), $perPage,
            $page, ['path' => $request->url(), 'query' => $request->query()]);
        return view('admin.users.index', compact('data'));
    }

//视图中
{{ $data->links() }}

记录下:

<IfModule mod_rewrite.c>
  Options +FollowSymlinks -Multiviews
  RewriteEngine On

  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^(.*)$ index.php [L,E=PATH_INFO:$1]
</IfModule>