Simple HTML
<input type="file" id="one-specific-file" name="one-specific-file">
Use as little as
$('#one-specific-file').ajaxfileupload({ action: '/upload.php' });
or as much as
$('input[type="file"]').ajaxfileupload({ action: '/upload.php', valid_extensions : ['md','csv'], params: { extra: 'info' }, onComplete: function(response) { console.log('custom handler for file:'); alert(JSON.stringify(response)); }, onStart: function() { if(weWantedTo) return false; // cancels upload }, onCancel: function() { console.log('no file selected'); }
});
jquery.ajaxfileupload.zip
参考网址 https://github.com/jfeldstein/jQuery.AjaxFileUpload.js
【ajax】jquery.ajax上传文件
Continue Read..【jquery】单选框选中事件
Continue Read..声明:此文系舞林cuzn(www.wulinlw.org)原创稿件,转载请保留版权
【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));
声明:此文系舞林cuzn(www.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
声明:此文系舞林cuzn(www.wulinlw.org)原创稿件,转载请保留版权
【js】数字转汉字
Continue Read..function DX(n) { if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)) return "数据非法"; var unit = "千百拾亿千百拾万千百拾元角分", str = ""; n += "00"; var p = n.indexOf('.'); if (p >= 0) n = n.substring(0, p) + n.substr(p+1, 2); unit = unit.substr(unit.length - n.length); for (var i=0; i < n.length; i++) str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i); return str.replace(/零(千|百|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "元整"); }
声明:此文系舞林cuzn(www.wulinlw.org)原创稿件,转载请保留版权
vue.js 组件中filter后的数据,实时更新
Continue Read..组件中的数据在模板显示后,变动数据发现不能更新的情况,可以做下面的检查
1、组件标签属性需要动态绑定v-bind:key="val"
2、VUE中加一个动态改变的变量time,动态绑定到组件标签对,props到组件中,在其他地方更新time就可以了
声明:此文系舞林cuzn(www.wulinlw.org)原创稿件,转载请保留版权
vue.js filter处理后返回显示html
Continue Read..{{ description | filterfunction }}
<div v-html="description|filterfunction"
<div v-html="$options.filters.filterfunction(description)">
声明:此文系舞林cuzn(www.wulinlw.org)原创稿件,转载请保留版权
时间比较,判断:当天/昨天/昨天以前/隔年
Continue Read..声明:此文系舞林cuzn(www.wulinlw.org)原创稿件,转载请保留版权
js 头像图片过滤器
Continue Read..声明:此文系舞林cuzn(www.wulinlw.org)原创稿件,转载请保留版权
js 移到端打电话
Continue Read..<p class="rules">一键拨打客服电话:<span class="blue" @click="toCall">010-84871686</span></p>toCall: function(){
var ifr = document.createElement('iframe');
document.body.appendChild(ifr);
ifr.src = 'tel:' + '01084871686';
setTimeout(function(){
ifr.remove();
}, 100);
}
声明:此文系舞林cuzn(www.wulinlw.org)原创稿件,转载请保留版权