liziyu 发布的文章

GIT可视化版本管理软件SourceTreeSetup

作者: liziyu
时间: 2020-10-19
分类: Server
评论

SourceTreeSetup:
https://www.sourcetreeapp.com/

一个好用的编辑器Markdown

作者: liziyu
时间: 2020-10-15
分类: Blog
评论

typora: https://www.typora.io/

收集整理一些前端常用js组件

作者: liziyu
时间: 2020-10-12
分类: JavaScript
评论

JQuery：https://jquery.cuishifeng.cn/
xm-select：https://maplemei.gitee.io/xm-select/#/basic/use
treetable-lay：https://gitee.com/whvse/treetable-lay/wikis/pages
layui-soul-table：https://saodiyang.gitee.io/layui-soul-table/
OPTable：https://hbangmao.gitee.io/OPTable/layui-op-table/demo/index.html
Dtree：http://www.wisdomelon.com/DTreeHelper/
eleTree：https://layuiextend.hsianglee.cn/eletree/

layui 第三方组件平台：https://fly.layui.com/extend/

转载：解决Ajax跨域 Access to XMLHttpRequest问题

作者: liziyu
时间: 2020-10-11
分类: JavaScript,PHP
2 条评论

错误提示

Access to XMLHttpRequest at 'http://localhost:8080/api/user/login' from origin 'http://localhost

解决方案

1、HTML部分

ajax 请求加入 contentType: "application/x-www-form-urlencoded"
请求如下：

$.ajax({
            type: "post",
            url: 'url',
            contentType: "application/x-www-form-urlencoded",
            data: {"gameCode": 106, type: "2",version:1,uid:1},
            dataType: "json",
            success: function (data,status) {
                console.log(data);
            }
        });

2、PHP部分

PHP 文件中加入请求头部 header ('Access-Control-Allow-Origin: *') ;

<?php 
    header('Access-Control-Allow-Origin: *');
    $arr = [
        array('id'=>1,'title'=>'one1'),
        array('id'=>2,'title'=>'one2'),
        array('id'=>3,'title'=>'one3'),
        array('id'=>4,'title'=>'one4'),
    ];
    echo json_encode($arr);
 ?>

3、请求数据

微信截图_20201011010842.png

文章转自：https://learnku.com/articles/32041

TinyMCE 上传图片与各种附件跳过的坑做个记号

作者: liziyu
时间: 2020-10-10
分类: JavaScript
评论

<script type="text/javascript" src="/static/admin/libs/tinymce/tinymce.min.js"></script>
<script>
    layui.use(['form', 'layer'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        // 渲染富文本编辑器
        tinymce.init({
            selector: '#content_edit',
            height: 400,
            branding: false,
            language: 'zh_CN',
            plugins: 'code print preview fullscreen paste searchreplace save autosave link autolink image imagetools media table codesample lists advlist hr charmap emoticons anchor directionality pagebreak quickbars nonbreaking visualblocks visualchars wordcount',
            toolbar: 'fullscreen preview code | undo redo | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | formatselect fontselect fontsizeselect | link image file emoticons charmap anchor pagebreak codesample | ltr rtl',
            toolbar_drawer: 'sliding',
            images_upload_url: '{:url("upload", ["upType" => "editor"])}',
            //images_upload_base_path:'/',
            convert_urls: false,
            file_picker_types: 'file,image,media',
            file_picker_callback: function (callback, value, meta) {
                //文件分类
                var filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
                //后端接收上传文件的地址
                var upurl='{:url("Ajax/upload", ["upType" => "editor"])}';
                //为不同插件指定文件类型及后端地址
                switch(meta.filetype){
                    case 'image':
                        filetype='.jpg, .jpeg, .png, .gif, .jpeg';
                        upurl='{:url("upload", ["upType" => "editor"])}';
                        break;
                    // case 'media':
                    //     filetype='.mp3, .mp4';
                    //     upurl='upfile.php';
                    //     break;
                    case 'file':
                        filetype='.docx, .doc, .xls, .xlsx, .ppt, .pptx, .pdf, .zip, .rar';
                        upurl='{:url("upload", ["upType" => "editor"])}';
                        break;
                    default:
                }
                //模拟出一个input用于添加本地文件
                var input = document.createElement('input');
                input.setAttribute('type', 'file');
                //input.setAttribute('accept', filetype); 禁用扩展
                input.click();
                input.onchange = function() {
                    var file = this.files[0];
                    var xhr, formData;
                    xhr = new XMLHttpRequest();
                    xhr.withCredentials = false;
                    xhr.open('POST', upurl);
                    xhr.onload = function() {
                        var json;
                        if (xhr.status !== 200) {
                            failure('HTTP Error: ' + xhr.status);
                            return;
                        }
                        json = JSON.parse(xhr.responseText);
                        if (!json || typeof json.location !== 'string') {
                            failure('Invalid JSON: ' + xhr.responseText);
                            return;
                        }
                        callback(json.location, { title: file.name });
                    };
                    formData = new FormData();
                    formData.append('file', file, file.name );
                    xhr.send(formData);
                };
            },
            init_instance_callback: function (editor) {
                // 编辑器初始化完成以后的
                layer.closeAll('loading');
            }
        });

</script>

callback(json.location, { title: file.name });这里容易出错，原文是 callback(json.location);有js报错。

layui自带layedit编辑器使用除坑

作者: liziyu
时间: 2020-10-10
分类: JavaScript
评论

HTML部分：

<form>
    <textarea id="content_edit" name="content" style="display:none"></textarea>
</form>

JS部分：

<script>
    layui.use(['form', 'layedit'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var layedit = layui.layedit;
        var content = layedit.build('content_edit'); //建立编辑器

     /* 监听表单提交 */
        form.on('submit(formSmsSubmit)', function (data) {
            data.field.content = layedit.getContent(content);
            $.ajax({
                url: "{:url('xxx')}",
                type:"POST",
                data: data.field,
                dataType:'json',
                success: function (res) {
                    if (res.code === 200) {
                        layer.msg(res.msg, {icon: 1});
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                },
                error:function(){
                    layer.msg('提交失败', {icon: 2});
                },
            });
            return false;
        });
</script>