【JS】计算时间之间的日期

Continue Read..
var endTime = $("#end_date_time").val();//2018-07-20 03:30
endTime = Math.floor(new Date(endTime + ':00').getTime() / 1000);

var nTime = endTime - startTime;
var days =Math.floor(nTime/(24 * 3600));

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【微信小程序】web-view

Continue Read..

微信小程序直接用

<!-- wxml -->

<!-- 指向微信公众平台首页的web-view -->

<web-view src="https://url.com"></web-view>

 

这里面的url的head里面需要加

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="renderer" content="webkit">

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

 

不然字体会变很小

 

<style>

        .tui-editor-contents img{

            max-width: 100%; !important;

        }

    </style>

 

加这个会让图片铺平

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【tui.editor】使用和修改上传

Continue Read..

 

首先调用这些js css(有些是不需要的,自己删)

 <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>

<script>window.jQuery || document.write('<script src="/sta/dist/js/tui-editor/js/jquery-1.11.0.min.js"><\/script>')</script>

<script src="/sta/dist/js/tui-editor/lib/markdown-it/dist/markdown-it.js"></script>

<script src="/sta/dist/js/tui-editor/lib/toMark/dist/toMark.js"></script>

<script src="/sta/dist/js/tui-editor/lib/tui-code-snippet/dist/tui-code-snippet.js"></script>

<script src="/sta/dist/js/tui-editor/lib/tui-color-picker/dist/tui-color-picker.js"></script>

<script src="/sta/dist/js/tui-editor/lib/codemirror/lib/codemirror.js"></script>

<script src="/sta/dist/js/tui-editor/lib/highlightjs/highlight.pack.js"></script>

<script src="/sta/dist/js/tui-editor/lib/squire-rte/build/squire-raw.js"></script>

<link rel="stylesheet" href="/sta/dist/js/tui-editor/lib/codemirror/lib/codemirror.css">

<link rel="stylesheet" href="/sta/dist/js/tui-editor/lib/highlightjs/styles/github.css">

 

<script src="/sta/dist/js/tui-editor/lib/plantuml-encoder/dist/plantuml-encoder.js"></script>

<script src="/sta/dist/js/tui-editor/lib/raphael/raphael.js"></script>

<script src="/sta/dist/js/tui-editor/lib/tui-chart/dist/tui-chart.js"></script>

<script src="/sta/dist/js/tui-editor/dist/tui-editor-Editor-all.js"></script>

<link rel="stylesheet" href="/sta/dist/js/tui-editor/dist/tui-editor.css">

<link rel="stylesheet" href="/sta/dist/js/tui-editor/dist/tui-editor-contents.css">

<link rel="stylesheet" href="/sta/dist/js/tui-editor/lib/tui-color-picker/dist/tui-color-picker.css">

<link rel="stylesheet" href="/sta/dist/js/tui-editor/lib/tui-chart/dist/tui-chart.css">

 

 

我的表单是用from 提交的,大家也可以直接ajax提交表单

 

<form action="/article/<?=$this->ectType?>/" id="id-form" class="form-horizontal form-validate" role="form"

                  method="post" onsubmit="return subF();">

  

                <div class="align-left">

 

                    <div class="form-group">

                        <label class="col-xs-2 control-label no-padding-right">内容</label>

                        <div class="col-xs-9" id="contentEditor"></div>

                        <textarea type="text"  hidden name="content" id="content" class="col-xs-6" rows="6"> </textarea>

                    </div>

     

                </div>

                <div class="clearfix form-actions">

                    <div class="col-md-offset-2 col-md-9">

                        <button class="btn btn-info" type="submit">

                            <i class="ace-icon fa fa-check bigger-110"></i>

                            提交

                        </button>

                    </div>

                </div>

            </form>

 

 

    <script class="code-js">

        var content = [];

        //这里需要注意,php需要传一个json对象过来,

        //$data['content'] = explode("\r\n", $data['content']);

        //$data['content'] = json_encode($data['content']);

 

        content = <?= $this->data['content']; ?>;

        

        //var content = [

        //    '| @cols=2:merged |',

        //    '| --- | --- |',

        //    '| table | table |',

        //    '```uml',

        //    'partition Conductor {',

        //    '  (*) --> "Climbs on Platform"',

        //    '  --> === S1 ===',

        //    '  --> Bows',

        //    '}',

        //    '',

        //    'partition Audience #LightSkyBlue {',

        //    '  === S1 === --> Applauds',

        //    '}',

        //    '',

        //    'partition Conductor {',

        //    '  Bows --> === S2 ===',

        //    '  --> WavesArmes',

        //    '  Applauds --> === S2 ===',

        //    '}',

        //    '',

        //    'partition Orchestra #CCCCEE {',

        //    '  WavesArmes --> Introduction',

        //    '  --> "Play music"',

        //    '}',

        //    '```',

        //    '```chart',

        //    ',category1,category2',

        //    'Jan,21,23',

        //    'Feb,31,17',

        //    '',

        //    'type: column',

        //    'title: Monthly Revenue',

        //    'x.title: Amount',

        //    'y.title: Month',

        //    'y.min: 1',

        //    'y.max: 40',

        //    'y.suffix: $'

        //].join('\n');

 

        var editor = new tui.Editor({

            el: document.querySelector('#contentEditor'),

            previewStyle: 'vertical',

            height: '300px',

            initialEditType: 'wysiwyg',

            useCommandShortcut: true,

            initialValue: content.join('\n'),

            hooks: {

                addImageBlobHook: addImageBlobHook.bind(this),

            },

            exts: ['scrollSync', 'colorSyntax', 'uml', 'chart', 'mark', 'table', 'taskCounter']

        });

        console.log(editor);

 

        function addImageBlobHook(blob, callback) {

 

            const data = new FormData();

            //blob就是一个文件对象

 

点击查看原图

            data.append('upfile', blob);

            //console.log(data, $('#cuzn123')[0]);

 

         //console.log 打印data的时候确实为空,要用下面的方法打印,然后看php获取的值,之前一直用get,拿不到值,换了post就好了

            //console.log(data.has("upfile"));//true

            console.log(data.get("upfile"));

            //data.forEach(function(file){

            //    console.log(file);

            //});

            

            $.ajax({

                url: "/index/upToQiniu/",

                type: "POST",

                data: data,

                //dataType: 'JSON',

                processData: false,

                contentType: false,

                //async: false,

                cache: false,

                //headers: {

                //    'Content-Type': 'multipart/form-data'

                //},

                success: function (result) {

                    result = JSON.parse(result);

                    console.log(typeof result);

                    console.log("result['state'] : " + result["state"]);

                    console.log("result.state : " + result.state);

                    if (result["state"] == 'SUCCESS') {

                        //这里是生成htpp模式的图片地址(我这里是七牛返回的一个key,需要转换)

                        var image = MyCommon.getViewImage(result["key"]);

                        //这里是插件自带的回调函数

                        callback(image, 'alt text');

                    }

                    console.log(result);

                },

                error: function (e) {

                    console.log(e);

                }

            });

            //$.get('/upload-images', data, config) .then(response => { callback(response.data.url, ''); }) .catch(error => { })

        }

        

        //提交表单之前 把值插入textarea 里面

        function subF() {

            $("#content").val(editor.getMarkdown ());

            //console.log('editor.getHtml () : ' + editor.getHtml ());

            //console.log('editor.getValue () : ' + editor.getValue ());

            //console.log('editor.getMarkdown () : ' + editor.getMarkdown ());

            return true;

        }

    </script>

 

 try {

$ret = QiNiu::upload($_FILES["upfile"]["tmp_name"]);

$result = [

'state' => 'SUCCESS',

'key' => $ret,

];

} catch (Exception $e) {

$result = [

'state' => $e->getMessage(),

];

}

echo json_encode($result);

 

 

最后要显示数据库的值需要用Markdown转HTML的插件 showdown

 点击查看原图

<script src="/sta/dist/js/showdown-1.8.6/dist/showdown.js"></script>

<div class="row">

    <div class="col-xs-12" id="content">

    </div>

</div>

 

<!--js:start-->

<script>

 

    //这里的php只需要 $data['content'] = json_encode($data['content']);

 

    var content = '';

    <?php  if (!empty($this->data['content'])) { ?>

    content = <?= $this->data['content']; ?>;

    <?php } ?>

    var converter = new showdown.Converter({

            "omitExtraWLInCodeBlocks":true,

            "noHeaderId":false,

            "prefixHeaderId":"",

            "ghCompatibleHeaderId":true,

            "headerLevelStart":1,

            "parseImgDimensions":true,

            "simplifiedAutoLink":true,

            "excludeTrailingPunctuationFromURLs":false,

            "literalMidWordUnderscores":true,

            "strikethrough":true,

            "tables":true,

            "tablesHeaderId":false,

            "ghCodeBlocks":true,

            "tasklists":true,

            "smoothLivePreview":true,

            "smartIndentationFix":false,

            "disableForced4SpacesIndentedSublists":false,

            "simpleLineBreaks":false,

            "requireSpaceBeforeHeadingText":false,

            "ghMentions":false,"extensions":[],"sanitize":false

        }),

        //text = '# hello, markdown!',

        html = converter.makeHtml(content);

    $("#content").html(html);

</script>

<!--js:end-->

 点击查看原图

 

参考网站

https://qiita.com/dala00/items/93f96dfbf63e71765562  这个是addImageBlobHook使用的,整个google就这个日本鬼子写了这个

 

这个是官方的文档,硬是想打死这个作者

https://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html#getHtml  

https://github.com/nhnent/tui.editor#-examples

 

showdown 参考网址

https://github.com/showdownjs/showdown

https://blog.csdn.net/yzf913214/article/details/54607897 

 

 

tui-editor.zip showdown-1.8.6.zip

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权