存档

‘div+css学习’ 分类的存档

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>

文件压缩包:下载

html中css支持的color英文单词颜色汇总

2020年4月11日 没有评论

以下就是html中css支持的color英文单词颜色汇总:

red
green
blue
magenta
yellow
chocolate
black
aquamarine
lime
fuchsia
brass
azure
brown
bronze
deeppink
aliceblue
gray
copper
coral
feldspar
orange
orchid
pink
plum
quartz
purple
aliceblue
antiquewith
blanchedalmond
blueviolet
beige
burlywood
bisque
cadetblue
pink
saddlebrown
royalblue
rosybrown
purple
orengered
olivedrab
powderblue
peachpuff
papayawhip
paleturquoise
palevioletred
palegreen
navyblue
navajowhite
palegodenrod
violetred
yellowgreen
tomato
turquoise
thistle
springgreen
steelblue
salmon
scarlet
sienna
silver
tan
thistle
turquoise
violet
snow
salmon
scarlet
sienna
silver
tan
thistle
turquoise
violet
chartreuse
firebrick
gold
khaki
mediumslateblue
mediumvioletred
oldlace
maroom
goldenrod
wheat
whitesmoke
orange
moccasin
mistyrose
mintcream
midnightblue
dimgray
darksalmon
slategray
skyblue
sienna
seashell
salmon
seagreen
sandybrown
firebrick
gold
khaki
maroom
goldenrod
wheat
whitesmoke
mediumturquoise
navy
mediumspringgreen
mediumseagreen
mediumpurpul
peru
mediumorchid
mediumblue
mediumaquamarine
maroon
limegreen
lightyellow
lightsteelblue
magenta
lightslateblue
lightslategray
lightskyblue
inen
lightseagreen
lightsalmon
lightpink
plum
lightgray
lightgreen
lightgodenrodyellow
indianred
lavender
lightblue
lavenderblush
lightcoral
lightcyan
lightgodenrod
hotpink
greenyellow
lemonchiffon
lawngreen
khaki
deepskyblue
honeydew
golenrod
forestgreen
gostwhite
greenyellow
gainsboro
firebrick
dodgerblue
darkturquoise
darkslateblue
darkslategray
darkseagreen
darkred
darkorchid
darkorenge
darkslateblue
darkviolet
floralwhite
cyan
bisque
darkgray
cornsilk
darkolivegreen
darkgoldenrod
darkblue
darkcyan
darkgreen
darkhaki
ivory
darkmagenta
darkgray
cornfloewrblue
cornfloewrblue
darkviolet
floralwhite
darkslategray
darkseagreen
darkred
darkorchid
darkorenge
darkslateblue

分类: div+css学习 标签: , , ,

2端2种颜色,中间固定宽度和颜色

2015年4月27日 没有评论

要求实现如下效果(根据宽度自适应)

2端2种颜色,中间固定宽度和颜色

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
<style type=”text/css”>
* {padding:0px;margin:0px;}
.box {height:28px;background:red;position:relative;}
.leftBlue {width:50%;height:28px;background:blue;position:absolute;left:0px;top:0px;z-index:0}
.content {height:28px;background:black;width:1000px;margin:0px auto;position:relative;z-index:1;text-align:center;color:#fff;line-height:28px;}
</style>
</head>

<body>
<div class=”box”>
<div class=”leftBlue”></div>
<div class=”content”>内容</div>
</div>
</body>
</html>

div层跟随滚动条滚动position:absolute;fixed;relative的定位具体用法

2013年9月16日 没有评论

很多情况下我们都遇到一种效果,那就是div层会根据滚动条滚动而固定在网页的某个角落

有几种解决方法,不过我的解决方法抛弃了IE6用户,如果你还在使用IE6或者仍然为IE6的用户考虑,那么我建议你也抛弃!

1,position:fixed

这种方法很常见,道理很简单,就不做说明了,如果不懂,你可以去百度,但是这样会有一个bug,如果不固定页面宽度的情况下top和bottom是非常好控制的,但是left的值就麻烦了。

所以引入第二种解决方法,如下:

2,position:absolute;和position:relative公用,代码如下:

<div style=”position:relative;width:1000px;margin:0px auto;”>
<div id=”gundong”></div>
</div>

懂吧,第一个层是1000px的宽度,那么这个时候,你再用position:fixed就不行了吧?因为很简单,没指定宽度

定义个css样式:.contentFixed {position:fixed;top:0px;width:250px;}

如此通过js动态应用css样式到id=”gundong”的层上即可解决问题,但是一定要记住,这里有个bug,如果你不指定width:250px的话

分类: div+css学习 标签: , ,

解决div+css中ie的bug:input type=”text”时候,会撑开外层一个间隙高度

2013年9月13日 没有评论

不知道光看标题的人可能看懂,今天在项目中遇到一个bug,找了许久没有找到原因,后来经过耐心研究,终于搞定了。

在div+css的布局中,如下代码:

<div><input type=”text” /></div>

<div><input type=”text” /></div>

不知不觉,ie会在2个div中间增加一个大约5em高度的间距,通过网络寻找,原来这个不是marging,也不是padding,是ie内核解析渲染的bug,所以你无论设置div的margin为0px或者input的padding为0px,都不起作用,那么下面说说解决方法吧。

解决div+css中ie的bug:input type=”text”时候,会撑开外层一个间隙高度的方法如下:

<div><span>&nbsp;</span><input type=”text” /></div>

<div><span>&nbsp;</span><input type=”text” /></div>

在input前面增加<span>&nbsp;</span>即可解决问题,呵呵不知道为什么,总之解决了,当然了,可以加下css定义,防止<span>&nbsp;</span>真的起作用了,css如下:

<span style=”font-size:0px;width:0px;height:0px;”>&nbsp;</span>

分类: div+css学习 标签: ,
css.php