先锋 'LOG

TinyMCE的文件选择器插件制作（可选任意文件）

作者: liziyu
时间: 2021-07-29
分类: 前端
评论

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、效果

Tinymce 编辑器添加自定义图片管理插件

作者: liziyu
时间: 2021-07-28
分类: 前端
评论

1、添加插件

我们需要在tinymce的Plugins目录下新建一个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

Laravel8修改默认分页样式的两种办法

作者: liziyu
时间: 2021-07-24
分类: Laravel
评论

方法一：

//视图
//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();
}

Laravel手动创建数组分页

作者: liziyu
时间: 2021-07-24
分类: Laravel
评论

有时候可能会遇到这种情况，$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() }}

TP的public下的.htaccess伪静态配置

作者: liziyu
时间: 2021-07-21
分类: ThinkPHP
评论

记录下：

<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>

TinyMCE的文件选择器插件制作（可选任意文件）

1、`HTML`视图

2、`JS`代码

3、`tableSelect`扩展

`TinyMCE`代码

4、效果

Tinymce 编辑器添加自定义图片管理插件

1、添加插件

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

Laravel8修改默认分页样式的两种办法

方法一：

方法二：

Laravel手动创建数组分页

TP的public下的.htaccess伪静态配置

记录下：

分类

归档

其它

TinyMCE的文件选择器插件制作（可选任意文件）

1、HTML视图

2、JS代码

3、tableSelect扩展

TinyMCE代码

4、效果

Tinymce 编辑器添加自定义图片管理插件

1、添加插件

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

Laravel8修改默认分页样式的两种办法

方法一：

方法二：

Laravel手动创建数组分页

TP的public下的.htaccess伪静态配置

记录下：

分类

归档

其它

1、`HTML`视图

2、`JS`代码

3、`tableSelect`扩展

`TinyMCE`代码