存档

‘html总结’ 分类的存档

IOS打开webview全面屏幕底部黑条兼容解决方案

2020年12月7日 评论已被关闭

IOS打开webview全面屏幕底部黑条兼容解决方案:

第一种是在不知道是否是全面屏的情况下:
需要在meta中增加:增加viewport-fit=cover

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

env() 和 constant():
iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:
safe-area-inset-left:安全区域距离左边边界距离
safe-area-inset-right:安全区域距离右边边界距离
safe-area-inset-top:安全区域距离顶部边界距离
safe-area-inset-bottom:安全区域距离底部边界距离
padding-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 / padding-bottom: env( safe-area-inset-bottom); / 兼容 iOS >= 11.2 */
env() 跟 constant() 需要同时存在,而且顺序不能换。

第二种是webview知道是全面屏,直接给底部增加像素即可(一般是客户端通过url传递参数,比如:fullscreen=yes)

效果如下:

IOS打开webview全面屏幕底部黑条兼容解决方案
分类: html总结 标签: , , ,

用php写的一个常用分页效果类(含javascript版本)

2020年12月3日 评论已被关闭

来看看php版本

<?php
//使用说明:http://www.zhanghongliang.com/article/1509
class myPage{
	private $url='';
	private $urlPre='';
	private $urlExt='';
	private $language=array('first'=>'首页','pre'=>'上一页','next'=>'下一页','dijiye'=>'第<page>页','last'=>'尾页');
	private $languagePre='';
	private $languageExt='';

	function get($v){
		$rowCount=$v['rowCount'];
		$pageSize=$v['pageSize'];
		$nowPage=$v['nowPage'];
        $pageCountShow=$v['pageCountShow'];
        if(!isset($pageCountShow)){
            $pageCountShow=true;
        }
		$html='';
		$limit='';
		$pageCount=intval(ceil($rowCount/$pageSize));
		if($pageCount==1){//总页只有1页
			$limit='0,'.$pageSize;
		}
		else {
			//当前页小于等于总页,再处理
			if($nowPage<=$pageCount){
				$this->url=$v['url'];
				if(is_array($v['language'])){
					foreach($v['language'] as $languageK=>$languageV){
						$this->language[$languageK]=$languageV;
					}
				}
				$limit=($pageSize*($nowPage-1)).','.$pageSize;
				//计算分页html
				if($nowPage>5) {
					if($nowPage>=$pageCount){
						if($pageCount<9){$starti=1;}
						else {$starti=$pageCount-9;}
						$endi=$pageCount;$page=$pageCount;
					}
					else{
						if($pageCount-$nowPage<=4){
							$starti=$pageCount-9;$endi=$pageCount;
						}
						else{
							$starti=$nowPage-4;$endi=$nowPage+4;
						}
					}
				}
				else {
					$starti=1;
					if($pageCount>10){$endi=10;}
					else{$endi=$pageCount;}
					if(!$nowPage){$nowPage=1;}
				}
				$html='<div id="'.$v['divId'].'">';
				if($nowPage!=1){
					if($nowPage>1){
						$html.='<a title="'.$this->language['first'].'" href="'.$this->pageUrl(1).'">'.$this->language['first'].'</a>';
					}
					$html.='<a title="'.$this->language['pre'].'" href="'.$this->pageUrl($nowPage-1).'">'.$this->language['pre'].'</a>';
				}
				for($pi=$starti;$pi<=$endi;$pi++){
					$html.='<a title="'.$this->dijiYe($pi).'" href="'.((($pi==1 && $nowPage==1) || ($pi==$pageCount && $nowPage==$pageCount))?'###':$this->pageUrl($pi)).'"'.($pi==$nowPage?" class='".$v['onPageClassName']."'":'').'>'.$pi.'</a>';						
				}
				if($nowPage!=$pageCount && $nowPage<$pageCount){
					$html.='<a title="'.$this->language['next'].'" href="'.$this->pageUrl($nowPage+1).'">'.$this->language['next'].'</a>';
				}
				if($pageCount!=$nowPage){
					$html.='<a title="'.$this->language['last'].'" href="'.$this->pageUrl($pageCount).'">'.$this->language['last'].($pageCountShow?'('.$pageCount.')':'').'</a>';
				}
				$html.='</div>';
			}
		}
		return array('limit'=>$limit,'html'=>$html,'pageCount'=>$pageCount);
	}
	function pageUrl($page){
		if($this->urlPre==''){
			$pos=strpos($this->url,'<page>');
			$this->urlPre=substr($this->url,0,$pos);
			$this->urlExt=str_replace('<page>','',substr($this->url,$pos));
		}
		return $this->urlPre.$page.$this->urlExt;
	}
	function dijiYe($page){
		if($this->languagePre==''){
			$pos=strpos($this->language['dijiye'],'<page>');
			$this->languagePre=substr($this->language['dijiye'],0,$pos);
			$this->languageExt=str_replace('<page>','',substr($this->language['dijiye'],$pos));
		}
		return $this->languagePre.$page.$this->languageExt;
	}
}

再来看看JavaScript版本

/**
 * 分页调取方法
 * var pagehtml = pageHtml(obj.data.totalcount,15,1,'/list/<page>.html',true,'on','onPageClassName',{'first':'Home','pre':'Prev','next':'Next','dijiye':'No. <page>','last':'Last'});
 * 返回结果:{limit: "0,15", html: "<div id="pageList"><a title="第1页" href="###" class="on">1</a>...<a title="尾页" href="/list-42/17658.html">尾页(17658)</a></div>", pageCount: 2491}
 * 输出html方法:if(pagehtml){$('#pages').html(pagehtml.html);}
 * @param rowCount 必填,总记录条数
 * @param pageSize 必填,每页多少条数据
 * @param nowPage 必填,当前页,默认为1
 * @param url 必填,url参数会替换<page> 例如:/list-5/<page>.html
 * @param addUrlGetParam 选填,url是否最后追加url参数,默认为false,不追加
 * @param onPageClassName, 必填,当前页的a链接样式名称,会输出<a class="参数值"></a>,默认为on
 * @param divId 必填,用于控制css,会输出<div id="参数值"></div>,默认为pageList
 * @param language 选填,语言包(支持只指定个别) 默认为{'first':'首页','pre':'上一页','next':'下一页','dijiye':'第<page>页','last':'尾页'}
 * @param pageCountShow 选填,是否显示总页数,默认为true
 */
function pageHtml(rowCount,pageSize=15,nowPage=1,url='',addUrlGetParam=false,divId='',onPageClassName='',language='',pageCountShow=true){
	rowCount = isNaN(parseInt(rowCount)) ? 0 : parseInt(rowCount);
	pageSize = isNaN(parseInt(pageSize)) ? 0 : parseInt(pageSize);
	nowPage = isNaN(parseInt(nowPage)) ? 0 : parseInt(nowPage);
	if(rowCount==0 || pageSize==0 || nowPage==0 || url=='' || url==undefined){
		return;
	}
	var pageCount = parseInt(Math.ceil(rowCount / pageSize));
	var htmlStr = '';
	var limit = '';
	if(pageCount <= 1){//总页只有1页
		limit='0,1';
		return {'limit':limit,'html':htmlStr,'pageCount':pageCount};
	}else{
		var lang = {
			'first':'首页',
			'pre':'上一页',
			'next':'下一页',
			'dijiye':'第<page>页',
			'last':'尾页'
		};
		if(language!='' || language!=undefined){
			for (let key in language){
				lang[key] = language[key];
			}
		}
		var endi=pageCount;
		var starti=1;
		var thisParam = window.location.href.split('?')[1];
		var paramStr = (thisParam=='' || thisParam==undefined) ? '' : '?' + (addUrlGetParam ? thisParam : '');
		url = url + paramStr;
		if(onPageClassName=='' || onPageClassName==undefined){
			onPageClassName = 'on';
		}
		if(divId=='' || divId==undefined){
			divId = 'pageList';
		}
		//当前页小于等于总页,再处理
		if(nowPage<=pageCount){
			limit = (pageSize*(nowPage-1))+','+pageSize;
			//计算分页html
			if(nowPage>5) {
				if(nowPage>=pageCount){
					if(pageCount<9){
						starti=1;
					}else{
						starti=pageCount-9;
					}
					endi=pageCount;
				}
				else{
					if(pageCount-nowPage<=4){
						starti=pageCount-9;endi=pageCount;
					}else{
						starti=nowPage-4;endi=nowPage+4;
					}
				}
			}else{
				starti=1;
				if(pageCount>10){
					endi=10;
				}else{
					endi=pageCount;
				}
				if(!nowPage){
					nowPage=1;
				}
			}
			htmlStr='<div id="'+divId+'">';
			if(nowPage!=1){
				if(nowPage>1){
					htmlStr+='<a title="'+lang['first']+'" href="'+url.replace('<page>',1)+'">'+lang['first']+'</a>';
				}
				htmlStr+='<a title="'+lang['pre']+'" href="'+url.replace('<page>',nowPage-1)+'">'+lang['pre']+'</a>';
			}
			for(pi=starti;pi<=endi;pi++){
				htmlStr+='<a title="'+lang['dijiye'].replace('<page>',pi)+'" href="'+(((pi==1 && nowPage==1) || (pi==pageCount && nowPage==pageCount))?'###':url.replace('<page>',pi))+'"'+(pi==nowPage?" class='"+onPageClassName+"'":'')+'>'+pi+'</a>';
			}
			if(nowPage!=pageCount && nowPage<pageCount){
				htmlStr+='<a title="'+lang['next']+'" href="'+url.replace('<page>',nowPage+1)+'">'+lang['next']+'</a>';
			}
			var showPageCount = pageCountShow ? '('+pageCount+')' : '';
			if(pageCount!=nowPage){
				htmlStr+='<a title="'+lang['last']+'" href="'+url.replace('<page>',pageCount)+'">'+lang['last']+showPageCount+'</a>';
			}
			htmlStr+='</div>';
		}
		return {'limit':limit,'html':htmlStr,'pageCount':pageCount};
	}
}

php自定义的magicStr过滤类

2020年11月2日 评论已被关闭
<?php
//使用说明:http://www.zhanghongliang.com/article/1507
class magicStr{
	//入库操作
	function encode($str,$inputType='text'){
		if($inputType=='text'){
			//此种类型应该过滤换行符,再去左右空格(建议过滤nl换行,不过滤也不影响)
			return trim(str_replace(array("\\r\\n","\\r","\\n"),'',str_replace(array("\r\n","\r","\n"),'',$str)));
		}
		else if($inputType=='textarea'){return $str;}
		else if($inputType=='editor'){return $str;}
		else {return '';}
	}
	
    //pc+h5端返回处理函数
    function decode($str,$inputType='text'){
        if($inputType=='text'){return htmlspecialchars(trim($str),ENT_QUOTES);}
		else if($inputType=='in_text'){return htmlspecialchars($str,ENT_QUOTES);}
        else if($inputType=='textarea'){return nl2br(htmlspecialchars($str,ENT_QUOTES));}
        else if($inputType=='in_textarea'){return htmlspecialchars($str,ENT_QUOTES);}
        else if($inputType=='editor'){return $this->replaceLabel($this->removeScript($str));}
        else if($inputType=='in_editor'){
			//kindeditor要求必须是转为实体之后的赋值,也可以增加$this->removeScript($str),因为只要前台过滤即可
            return htmlspecialchars($str,ENT_QUOTES);
        }
		else if($inputType=='meta_title'){
			//当输出到meta中的title的时候,不建议使用textarea或者editor内容,只建议用input type="text"这种输入框
			return htmlspecialchars($str,ENT_QUOTES);
		}
		else if($inputType=='meta_keywords'){return htmlspecialchars($this->compress_html($str),ENT_QUOTES);}
		else if($inputType=='meta_description'){return mb_substr(htmlspecialchars($this->compress_html($str),ENT_QUOTES),0,210);}
        else {return '';}
    }

    //app端返回处理函数(在需要php处理的情况下)
	//$withHtmlBody为是否app端拼接了标准的html头和尾标签:<!doctype html><html><head><meta charset="utf-8"><title>标题</title></head><body>$str</body></html>
    function decodeApp($str,$inputType='text',$withHtmlBody=true){
		if($inputType=='text'){return $str;}
		else if($inputType=='in_text'){return $str;}
        else if($inputType=='textarea'){
			//如果app端拼接html头和尾则应该转义后返回(我们的项目实际上都拼了),否则可以直接返回
			if($withHtmlBody===true){return htmlspecialchars($str,ENT_QUOTES);}
			else {return $str;}
		}
        else if($inputType=='in_textarea'){return $str;}
        else if($inputType=='editor'){return preg_replace('/<br\\s*?\/??>/i','',$this->replaceLabel($this->removeScript($str)));}
        else if($inputType=='in_editor'){return 'app不允许富文本编辑';}
        else {return '';}
    }
	
    //小程序端返回处理函数(在需要php处理的情况下)
    function decodeWeixin($str,$inputType='text'){
		if($inputType=='text'){return $str;}
		else if($inputType=='in_text'){return $str;}
        else if($inputType=='textarea'){return $str;}
        else if($inputType=='in_textarea'){return $str;}
        else if($inputType=='editor'){
			//经过测试,微信小程序端只有editor类型需要处理,其他类型直接返回即可
        	//经过测试,小程序端和app端不一样,小程序端不需要和removeScript,但是要做下方处理:
			return $this->replaceLabel(htmlspecialchars_decode(preg_replace('/<br\\s*?\/??>/i','',$str),ENT_QUOTES));
		}
        else if($inputType=='in_editor'){return 'weixin不允许富文本编辑';}
        else {return '';}
    }

	//替换指定的html标签(富文本编辑器修改了插入标签之后的代码,显示的时候需要替换正确)
	function replaceLabel($str){
		return preg_replace('/(\[)(embed.*?)(\/\])/is','<$2>',preg_replace('/\]\[\/iframe\]/is','></iframe>',preg_replace('/\[iframe/is','<iframe',$str)));
		//也可以是<$2/>表示用单标签结尾
    }
	
	//压缩html
	function compress_html($string) {
		return trim(preg_replace(array("/> *([^ ]*) *</","/<!--[^!]*-->/","'/\*[^*]*\*/'","/\r\n/","/\n/","/\t/",'/>[ ]+</'),array(">\\1<",'','','','','','><'),$string));
	}

	//过滤一些script标签和代码
    function removeScript($str=''){
		return preg_replace(array(
			"/(java|vb)script/i",
			"/href *= *[\s\S]*script *:/si",
			
			//过滤字符串中的on***=,(onclick,onchange,onblur等等等)事件,忽略大小写(i),特殊字符圆点,中包含换行符 \n(s)
			"/on([a-z]+)\s*=/si",
			
			//不用preg_replace("/<(i?frame.*?)>(.*?)<(\/i?frame.*?)>/si",'',$str);的原因是比如<iframe src="https://www.a.com">会无法过滤,但是前段可以正常显示
			//同样会过滤frameset
			"/<(\/?i?frame.*?)>/si",
			"/<(\/?object.*?)>/si",//道理同上方的iframe过滤
			"/<(\/?embed.*?)>/si",//道理同上方的iframe过滤
			
			//过滤所有<script(任意字符)>(任意字符)</script(任意字符)>结尾的标签字符 和前条过滤script标签重合
			//不用preg_replace("/<(\/?script.*)>/si",'',$str);是因为</script>不闭合的话,前段无法执行
			"/<(script.*?)>(.*?)<(\/script.*?)>/si",
			
			//使用preg_replace("/<(\/?head.*?|\/?title.*?|meta.*?|link.*?)>/si",'',$str);可以保留中间的内容
        	//使用下方的会过滤中间的内容
			"'<head[^>]*?>.*?</head>'is",
            "'<title[^>]*?>.*?</title>'is",
            "'<meta[^>]*?>'is",
            "'<link[^>]*?>'is"
		),'',$str);
    }
	
	//ajax返回处理函数(ajax建议用前端magicStr.js处理,节省php资源)
	/*
    function decodeAjax($str,$inputType='text'){
        if($inputType=='text'){return htmlspecialchars($str,ENT_QUOTES);}
		else if($inputType=='in_text'){return $str;}
        else if($inputType=='textarea'){return nl2br(htmlspecialchars($str,ENT_QUOTES));}
        else if($inputType=='in_textarea'){
            return $str;//和decode()不一样,ajax直接返回即可,因为前端是.val赋值
        }
        else if($inputType=='editor'){return $this->replaceLabel($this->removeScript($str));}
        else if($inputType=='in_editor'){
            //和decode()不一样,ajax直接返回即可,因为前端是.val赋值
			//编辑器输出的时候,其实可以不用走$inputType=='editor'中的$this->removeScript($str),因为只要前台过滤即可
			return $str;
        }
		else if($inputType=='meta_title'){return htmlspecialchars($str,ENT_QUOTES);}
        else {return '';}
    }
	*/

}

具体请参照文件:magicStr.rar

分类: html总结, php学习 标签: , , , ,

kindeditor4.1.12精简压缩版-示例

2020年10月27日 评论已被关闭

使用kindeditor官方最新版本4.1.12进行了精简操作,具体请看:

本次修改基于官方4.1.12版本修改,官方网址:https://github.com/kindsoft/kindeditor

1,涉及到的地方改为:[iframe][/iframe](前端显示的时候需要替换回去)

2,涉及到<embed>的地方改为:[embed][/embed](前端显示的时候需要替换回去)

3,修改代码:原有的视音频功能

kindeditor.js中 funciton _mediaEmbed(){}中,将[embed修改修改为/]
kindeditor.js中 function _mediaImg(){}中,style = '';这段代码之后直接return srcTag;

4,删除了lang语言包下的其他文件,只保留en.js,zh-CN.js,zh-TW.js

5,新增第三方视频功能插入功能(支持:youtube、优酷、爱奇艺、腾讯)(其他网站类似)
在plugins文件夹中,新增video文件夹,内部新建video.js和demo.html
增加功能需要在语言包文件中补全此功能的语言字符,在lang文件夹中en.js,zh-CN.js,zh-TW.js
4个文件中,增加了代码

/* zh-CN.js  video插件语言包*/
video: '第三方视频',
editVideo: '第三方视频属性',
    deleteVideo: '删除第三方视频',
    'video.demo': '示例',
'video.url': 'URL',
    'video.width': '宽度',
    'video.height': '高度',

/* zh-TW.js  video插件语言包*/
video: '第三方視頻',
editVideo: '第三方視頻屬性',
    deleteVideo: '刪除第三方視頻',
    'video.demo': '示例',
'video.url': 'URL',
    'video.width': '寬度',
    'video.height': '高度',

/* en.js  video插件语言包*/
video: 'Video',
editVideo: 'Video properties',
    deleteVideo: 'Delete video',
    'video.demo': 'DEMO',
'video.url': 'URL',
    'video.width': 'Width',
    'video.height': 'Height',

/* kindeditor.js(未压缩版本)  video插件语言包*/
/* zh-CN.js  video插件语言包*/
video: '第三方视频',
editVideo: '第三方视频属性',
    deleteVideo: '删除第三方视频',
    'video.demo': '示例',
'video.url': 'URL',
    'video.width': '宽度',
    'video.height': '高度',

6,删除plugins文件夹中,kindeditor.js中已存在的插件JS,如果该插件含有资源文件,则保留资源和文件夹

7,删除不需要的功能 :multiimage(多图上传功能取消,自带的是flash,现在几乎所有新浏览器都不支持flash了)(请见本条:备注)
flash(上传flash,flash,现在几乎所有新浏览器都不支持flash了)
insertfile(插入文件功能已取消,不建议通过编辑器来上传文件)
以上功能插件在kindeditor.js中快捷搜索:KindEditor.plugin(‘插件名 。即可找到。
备注:删除multiimage,会将原本的kindeditor.js(未压缩版本)里面的删除(代码里面备注了:/multiimage插件相关的上传图片代码已删除/):
===start
(function(K) {
function KSWFUpload(options) {
this.init(options);
}
===end
if (typeof(SWFUpload) === “function”) {
至函数结尾

8,功能插件百度地图中的选项(插入动态地图)勾选后,会生成iframe标签代码,程序不允许,则修改kindeditor.js中,搜索KindEditor.plugin(‘baidumap 。即可找到该处代码,在if (checkbox[0].checked) { 代码处后,将

<iframe修改为[iframe
</iframe>修改为[/iframe]

9,修改完原版的kindeditor.js(未压缩版本)之后,再自己通过https://tool.lu/js/index.html压缩一个min版本:kindeditor.min.js

10,删除themes下的qq

11,删除其他不相干的文件和文件夹

12,应该屏蔽image插件的上传图片功能:allowImageUpload:false

13,同时建议:allowFlashUpload:false,allowMediaUpload:false

14,删除了plugins/emoticons下的图片文件,设置allowPreviewEmoticons:false,同时关闭表情emoticons插件(后期如果需要开通,可以做相关更改,也可以自行恢复图片或者更换图片)

15,修改了kindeditor.js(未压缩版本)中的KindEditor.plugin(‘media函数块为:

KindEditor.plugin('media', function(K) {
	var self = this,
		name = 'media',
		lang = self.lang(name + '.'),
		allowMediaUpload = K.undef(self.allowMediaUpload, true),
		allowFileManager = K.undef(self.allowFileManager, false),
		formatUploadUrl = K.undef(self.formatUploadUrl, true),
		extraParams = K.undef(self.extraFileUploadParams, {}),
		filePostName = K.undef(self.filePostName, 'imgFile'),
		uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php');
	self.plugin.media = {
		edit: function() {
			var html = ['<div style="padding:20px;">', '<div class="ke-dialog-row">', '<label for="keUrl" style="width:60px;">' + lang.url + '</label>', '<input class="ke-input-text" type="text" id="keUrl" name="url" value="" style="width:260px;" /> &nbsp;', '<input type="button" class="ke-upload-button" value="' + lang.upload + '" /> &nbsp;', '<span class="ke-button-common ke-button-outer">', '<input type="button" class="ke-button-common ke-button" name="viewServer" value="' + lang.viewServer + '" />', '</span>', '</div>', '<div class="ke-dialog-row">', '<label for="keWidth" style="width:60px;">' + lang.width + '</label>', '<input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="550" maxlength="4" />', '</div>', '<div class="ke-dialog-row">', '<label for="keHeight" style="width:60px;">' + lang.height + '</label>', '<input type="text" id="keHeight" class="ke-input-text ke-input-number" name="height" value="400" maxlength="4" />', '</div>', '<div class="ke-dialog-row">', '<label for="keAutostart">' + lang.autostart + '</label>', '<input type="checkbox" id="keAutostart" name="autostart" value="" /> ', '</div>', '</div>'].join('');
			var dialog = self.createDialog({
				name: name,
				width: 450,
				height: 230,
				title: self.lang(name),
				body: html,
				yesBtn: {
					name: self.lang('yes'),
					click: function(e) {
						var url = K.trim(urlBox.val()),
							width = widthBox.val(),
							height = heightBox.val();
						if (url == 'http://' || K.invalidUrl(url)) {
							alert(self.lang('invalidUrl'));
							urlBox[0].focus();
							return;
						}
						if (!/^\d*$/.test(width)) {
							alert(self.lang('invalidWidth'));
							widthBox[0].focus();
							return;
						}
						if (!/^\d*$/.test(height)) {
							alert(self.lang('invalidHeight'));
							heightBox[0].focus();
							return;
						}
						var html = K.mediaImg(self.themesPath + 'common/blank.gif', {
							src: url,
							type: K.mediaType(url),
							width: width,
							height: height,
							autostart: autostartBox[0].checked ? 'true' : 'false',
							loop: 'true'
						});
						self.insertHtml(html).hideDialog().focus();
					}
				}
			}),
				div = dialog.div,
				urlBox = K('[name="url"]', div),
				viewServerBtn = K('[name="viewServer"]', div),
				widthBox = K('[name="width"]', div),
				heightBox = K('[name="height"]', div),
				autostartBox = K('[name="autostart"]', div);
			urlBox.val('http://');
			if (allowMediaUpload) {
				var uploadbutton = K.uploadbutton({
					button: K('.ke-upload-button', div)[0],
					fieldName: filePostName,
					extraParams: extraParams,
					url: K.addParam(uploadJson, 'dir=media'),
					afterUpload: function(data) {
						dialog.hideLoading();
						if (data.error === 0) {
							var url = data.url;
							if (formatUploadUrl) {
								url = K.formatUrl(url, 'absolute');
							}
							urlBox.val(url);
							if (self.afterUpload) {
								self.afterUpload.call(self, url, data, name);
							}
							alert(self.lang('uploadSuccess'));
						} else {
							alert(data.message);
						}
					},
					afterError: function(html) {
						dialog.hideLoading();
						self.errorDialog(html);
					}
				});
				uploadbutton.fileBox.change(function(e) {
					dialog.showLoading(self.lang('uploadLoading'));
					uploadbutton.submit();
				});
			} else {
				K('.ke-upload-button', div).hide();
			}
			if (allowFileManager) {
				viewServerBtn.click(function(e) {
					self.loadPlugin('filemanager', function() {
						self.plugin.filemanagerDialog({
							viewType: 'LIST',
							dirName: 'media',
							clickFn: function(url, title) {
								if (self.dialogs.length > 1) {
									K('[name="url"]', div).val(url);
									if (self.afterSelectFile) {
										self.afterSelectFile.call(self, url);
									}
									self.hideDialog();
								}
							}
						});
					});
				});
			} else {
				viewServerBtn.hide();
			}
			var img = self.plugin.getSelectedMedia();
			if (img) {
				var attrs = K.mediaAttrs(img.attr('data-ke-tag'));
				urlBox.val(attrs.src);
				widthBox.val(K.removeUnit(img.css('width')) || attrs.width || 0);
				heightBox.val(K.removeUnit(img.css('height')) || attrs.height || 0);
				autostartBox[0].checked = (attrs.autostart === 'true');
			}
			urlBox[0].focus();
			urlBox[0].select();
		},
		'delete': function() {
			self.plugin.getSelectedMedia().remove();
			self.addBookmark();
		}
	};
	self.clickToolbar(name, self.plugin.media.edit);
});

16,删除了lang中的zh-CN.js,因为默认的kindeditor.js(未压缩版本)中已经有默认中文语言包

17,搜索:function initResize() {

在前面增加了代码:if(this.items.length==0){this.toolbar.hide();this.statusbar.hide();}

18,使用https://tool.lu/js/index.html在线混淆生成kindeditor.min.js

19,使用示例:demo.php

demo.php代码:

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>kindeditor4.1.12精简压缩版-示例</title>
</head>

<body>
	<?php
		echo '<br /><br /><strong>完整版:</strong><br />';
		$EArray=array(
			'EName'=>'content_1',//textarea名称和id名称
			'EValue'=>'',//默认值
			'EWidth'=>'670px',//宽度,支持100%,不建议低于670px
			'EHeight'=>'350px',//高度
			'EMode'=>1,//1为正常模式,2为简单模式,3为极简模式(模拟textarea)
			'EJSpath'=>'http://www.aaa.com/magicstr/kindeditor/',//kindeditor.min.js的目录
			'EJSMin'=>false,//是否加载min版js,建议为true,只有调试的时候改为false
			'ELang'=>'zh-CN',//zh-CN中文(默认),en英文,zh-TW台湾
			'ENewLine'=>'br',//换行模式,br或者p
			'EResizeType'=>0,//0为不允许拖拽放大,1为允许竖向,2为允许横向
		);
		require 'kindeditor/editor.php';

		echo '<br /><br /><strong>简单版:</strong><br />';
	
		/*一个页面可以支持多个编辑器,要确保EName不一致即可*/
		//使用示例
		$EArray=array(
			'EName'=>'content_2',//textarea名称和id名称
			'EValue'=>'',//默认值
			'EWidth'=>'670px',//宽度,支持100%,不建议低于670px
			'EHeight'=>'350px',//高度
			'EMode'=>1,//1为正常模式,2为简单模式,3为极简模式(模拟textarea)
			'EJSpath'=>'http://www.aaa.com/magicstr/kindeditor/',//kindeditor.min.js的目录
			'EJSMin'=>true,//是否加载min版js,建议为true,只有调试的时候改为false
			'ELang'=>'zh-CN',//zh-CN中文(默认),en英文,zh-TW台湾
			'ENewLine'=>'br',//换行模式,br或者p
			'EResizeType'=>0,//0为不允许拖拽放大,1为允许竖向,2为允许横向
		);
		require 'kindeditor/editor.php';
	?>
</body>
</html>

文件压缩包:下载

h5手机版网页如何添加网页背景音乐?

2017年9月7日 没有评论

如何实现手机版自动播放网页背景音乐?

代码如下:

<!DOCTYPE html>
<html><head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
<meta charset=”utf-8″>
<title>背景音乐</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1″>
<style>
html, body {position: relative;height: 100%;}
body {background: #fff;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color:#000;margin: 0;padding: 0;}
</style>
</head>
<body>

<audio id=”audio” preload=”auto” autoplay loop>
<source src=”yuzhouchangwan.mp3″ type=”audio/mpeg”>
</audio>

<script src=”http://libs.baidu.com/jquery/2.0.0/jquery.min.js”></script>
<script type=”text/javascript”>
$().ready(function(){
$(document).one(‘touchstart’,function(e){
var music=document.getElementById(“audio”);
if(music.paused){music.play();}
});
document.addEventListener(“WeixinJSBridgeReady”,function onBridgeReady(){document.getElementById(“audio”).play();});
});
</script>

</body>
</html>

但是这个代码,在微信中打开的时候,会自动播放,普通手机浏览器打开不会自动播放,因为:

移动端浏览器大部分是禁用video和audio的autoplay功能

并且,很多移动浏览器也不支持首次js调用play方法进行播放

这样做主要是为了防止不必要的自动播放浪费流量

分类: html总结 标签: , ,
css.php