标签的深度剖析以及使用选择

 更新时间:2016年9月20日 18:58  点击:1723

前言:
     今天被问道“有没有仔细了解过<!DOCTYPE>标签?”,愣了一下,因为一开始在W3cschool上看到过建议使用XHTML Transitional DTD,之后就很听话地把Dreamweaver的HTML文档类型默认设置为XHTML 1.0 Transitional。之后就理所当然地一直用到现在了。人这东西还真是,越长大就越懒了,很多东西都被潜意识地当成了理所当然。既然已经被问及,就去找了找资料,总结了一下,权当做笔记吧~~
<!DOCTYPE>的定义:
     <!DOCTYPE>声明位于文档中的最前面的位置,处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。
该标签可声明三种DTD类型,分别表示严格版本、过渡版本以及基于框架的HTML版本。(假如文档中的标记不遵循doctype声明所指定的DTD,这个文档除了不能通过代码校验之外,还有可能无法在浏览器中正确显示。)

<!DOCTYPE>的用法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
解析:在上面的声明中,声明了文档的根元素是 html,它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Strict//EN" 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到,浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。
     -   :   表示组织名称未注册。Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的 ISO 组织。
              +为默认,表示组织名称已注册。
 DTD  :   指定公开文本类,即所引用的对象类型。 默认为DTD。
HTML :   指定公开文本描述,即对所引用的公开文本的唯一描述性名称。后面可附带版本号。默认为HTML。
 URL  :  指定所引用对象的位置。
  Strict:排除所有 W3C 专家希望逐步淘汰的代表性属性和元素。

三种HTML文档类型:
HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。
a ) 如果需要干净的标记,免于表现层的混乱,用HTML Strict DTD类型:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
b )Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素. 如果用户使用了不支持层叠样式表(CSS)的浏览器以至于你不得不使用 HTML 的呈现特性时,用     Transitional DTD 类型:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
c ) Frameset DTD 被用于带有框架的文档。除 frameset 元素取代了 body 元素之外,Frameset DTD 等同于 Transitional DTD:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.dtd">
三种 XML 文档类型:
XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。
a ) 如果需要干净的标记,免于表现层的混乱,用XHTML Strict DTD类型:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
b )Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素. 如果用户使用了不支持层叠样式表(CSS)的浏览器以至于你不得不使用 HTML 的呈现特性时,用     Transitional DTD 类型:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
c ) Frameset DTD 被用于带有框架的文档。除 frameset 元素取代了 body 元素之外,Frameset DTD 等同于 Transitional DTD:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

选择正确的doctype:
为了获得正确的doctype声明,关键就是让dtd与文档所遵循的标准对应。
例如,假定文档遵循的是xhtml 1.0 strict标准,文档的doctype声明就应该引用相应的dtd。
另一方面,如果doctype声明指定的是xhtml dtd,但文档包含的是旧式风格的html标记,就是不恰当的;类似地,如果doctype声明指定的是html dtd,但文档包含的是
xhtml 1.0 strict标记,同样是不恰当的。
如果没有指定有效的doctype声明,大多数浏览器都会使用一个内建的默认dtd。在这种情况下, 浏览器会用内建的dtd来试着显示你所指定的标记(不过这是页面写得太糟糕的时候的做法)。
看了一下京东、淘宝、还有博客园,用的都是这个(本人也一直都是用的这个):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
但是发现百度跟谷歌用的是“<!doctype html>”,就再仔细查了一下资料,发现HTML5也是直接用的这个,不过是因为 HTML 5 不基于 SGML,因此不需要对 DTD 进行
引用,但是需要 doctype 来规范浏览器的行为(让浏览器按照它们应该的方式来运行)。
建议在以后都直接用“<!doctype html>”,用<!doctype html>的话就会开启浏览器的标准兼容模式,在标准兼容模式下,不能保证与其它版本(IE6之前的,直接忽略吧),的 Internet Explorer 保持兼容,文档的渲染行为也许与将来的 Internet Explorer 不同,但也请大家放心地使用吧~~

今天想用点击图片选中radio按钮,但是在IE浏览器测试时发现bug,点击图片时radio按钮不能选中,但鼠标经过时radio有反应点击图片就是不能选中状态,想了好久终于得到解决方法
 代码如下 复制代码

HTML 代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>IE下label中img无法点击对应input的解决方法</title>
 <style type="text/css">
  *{margin:0;padding:0;}
  body{font:12px/1.5 Arial;}
  label{cursor:pointer;}
  li{
   position:relative;
   display: inline-block;
   width:130px;
   margin-right:27px;
   text-align:center;
   *display: inline;
   zoom:1;
   vertical-align:top;
  }
  li img{
   display:block;
   padding:5px;
   background-color:#E9E5E0;
  }
  li s{
   position:absolute;
   display:block;
   width:120px;
   height:120px;
   padding:5px;
   top:0;
   left:0;
   filter:alpha(opacity=0);
   background-color:#fff;
  }
 </style>
</head>
<body>
  <ol>
  <li><label for="special01"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special01" /></li>
  <li><label for="special02"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special02" /></li>
  <li><label for="special03"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special03" /></li>
  <li><label for="special04"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special04" /></li>
  <li><label for="special05"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special05" /></li>
  <li><label for="special06"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special06" /></li>
  <li><label for="special07"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special07" /></li>
 </ol>
</body>
</html>


 

今天在开发时碰到一种方法,就是客户要求页面不缓存,查了一下得出如下几种不让页面缓存的办法


html
只要加在头部就可以了.

<HEAD> 
    <META     HTTP-EQUIV="Pragma"     CONTENT="no-cache"> 
    <META     HTTP-EQUIV="Cache-Control"     CONTENT="no-cache"> 
    <META     HTTP-EQUIV="Expires"     CONTENT="0"> 
    </HEAD> 

asp教程做法

Response.Buffer     =     True 
    Response.ExpiresAbsolute     =     Now()     -     1 
    Response.Expires     =     0 
    Response.CacheControl     =     "no-cache" 
    Response.AddHeader     "Pragma",     "No-Cache" 

php教程做法

 

<?php
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
?>

还有一种更简单的方法,就是大家ajax时用到的?mt=随便数据

CKeditor可以配合CKfinder实现文件的上传及管理。但是往往我们上传的图片需要某些自定义的操作,比如将图片路径写入数据库,图片加水印等等操作。 实现原理:配置CKeditor的自定义图标,单击弹出一个子窗口,在在子窗口中上传图片实现我们的自己的功能,然后自动关闭子窗口将图片插入到CKeditor的当前光标位置。 实现步骤: 1、配置CKeditor。网上很多资料,大家自己查。 2、配置config.js文件。此文件为CKeditor的配置文件。配置需要显示的图标。

CKeditor可以配合CKfinder实现文件的上传及管理。但是往往我们上传的图片需要某些自定义的操作,比如将图片路径写入数据库教程,图片加水印等等操作。

实现原理:配置CKeditor的自定义图标,单击弹出一个子窗口,在在子窗口中上传图片实现我们的自己的功能,然后自动关闭子窗口将图片插入到CKeditor的当前光标位置。

实现步骤:

1、配置CKeditor。网上很多资料,大家自己查。

2、配置config.js文件。此文件为CKeditor的配置文件。配置需要显示的图标。

CKEDITOR.editorConfig = function( config )
 2 {
 3     // Define changes to default configuration here. For example:
 4     config.language = 'zh-cn';
 5     config.skin = 'v2';
 6     // config.uiColor = '#AADC6E';
 7     config.toolbar =
 8     [
 9        ['Source', '-', 'Preview', '-'],
10         ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
11         ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],       
12         '/',
13         ['Bold', 'Italic', 'Underline'],
14         ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'],
15         ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
16         ['Link', 'Unlink', 'Anchor'],
17         ['addpic','Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],//此处的addpic为我们自定义的图标,非CKeditor提供。
18         '/',
19         ['Styles', 'Format', 'Font', 'FontSize'],
20         ['TextColor', 'BGColor'],
21       
22     ];
23
24     config.extraPlugins = 'addpic';
25
26 };
 3、在CKeditorplugins文件夹下新建addpic文件夹,文件夹下添加addpic.JPG图标文件,建议尺寸14*13。addpic.JPG图标文件即为显示在CKeditor上的addpic的图标。在图标文件同目录下添加文件plugin.js,内容如下。

 

 1 (function () {
 2     //Section 1 : 按下自定义按钮时执行的代码
 3     var a = {
 4         exec: function (editor) {
 5             show();
 6         }
 7     },
 8     b = 'addpic';
 9     CKEDITOR.plugins.add(b, {
10         init: function (editor) {
11             editor.addCommand(b, a);
12             editor.ui.addButton('addpic', {
13                 label: '添加图片',
14                 icon: this.path + 'addpic.JPG',
15                 command: b
16             });
17         }
18     });
19 })();

 文件中的show函数为显示子页面使用,我将它写在CKeditor所在的页面中。

4、edit.asp教程x页面使用的js

edit.aspx页面就是使用CKeditor的页面。

 

function show() {

    $("#ele6")[0].click();
}
function upimg(str) {
    if (str == "undefined" || str == "") {
        return;
    }
    str = "<img src='/html/images/" + str+"'</img>";
    CKEDITOR.instances.TB_Content.insertHtml(str);
    close();
}
function close() {
    $("#close6")[0].click();
}
$(document).ready(function () {
    new PopupLayer({ trigger: "#ele6", popupBlk: "#blk6", closeBtn: "#close6", useOverlay: true, offsets: { x: 50, y: 0} });
});   
 以上就是js的代码,弹出窗口是使用jquery的弹出层,弹出层中嵌套iframe,iframe中使用upimg.aspx上传页面,大家如果有其他需要可以自己去设计弹出效果。为了大家调试方便,我将我实现弹出层的代码贴出来。

弹出层效果使用的是popup_layer.js方案,需要进一步加工的朋友可以自己在百度中谷歌。ele6为弹出激发需要的层,blk6为弹出层主体,close6为层中承载关闭按钮的层。代码如下

 

<div id="ele6" style="cursor:hand; color: blue; display:none;"></div>
    <div id="blk6" class="blk" style="display:none;">
        <div class="head"><div class="head-right"></div></div>
        <div class="main">               
            <a href="网页特效:void(0)"  id="close6" class="closeBtn"></a>               
            <iframe src="upimg.aspx"></iframe>                   
        </div>           
    </div>
别忘记引用jquery和popup_layer.js。

 

5、upimg.aspx页面

aspx代码

 

<div>
        <asp:FileUpload ID="FU_indexIMG" runat="server" />
        <br />
    <asp:Button ID="Button1" runat="server" Text="上传" onclick="Button1_Click" />
        <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="取消" />
        </div>
对应的cs代码

 

 1 protected void Button1_Click(object sender, EventArgs e)
 2     {
 3         string imgdir = UpImg();       
 4         script = "window.parent.upimg('" + imgdir + "');";
 5         ResponseScript(script);
 6     }
 7     protected void Button2_Click(object sender, EventArgs e)
 8     {
 9         string script = "window.parent.close();";
10         ResponseScript(script);
11     }
12 /// <summary>
13     /// 输出脚本
14     /// </summary>
15     public void ResponseScript(string script)
16     {
17         System.Text.StringBuilder sb = new System.Text.StringBuilder("<script language='javascript' type='text/javascript'>");
18         sb.Append(script);
19         sb.Append("</script>");
20         ClientScript.RegisterStartupScript(this.GetType(), RandomString(1), sb.ToString());
21     }
22     /// <summary>
23     /// 获得随机数
24     /// </summary>
25     /// <param name="count">长度</param>
26     /// <returns></returns>
27     public static string RandomString(int count)
28     {
29         RNGCryptoServiceProvider rng = new RNGCryptoServiceProvider();
30         byte[] data = new byte[count];
31         rng.GetBytes(data);
32         return BitConverter.ToString(data).Replace("-", "");
33     }


Button1_Click为确定按钮的单击事件函数。其中使用UpImg函数实现上传图片文件,我还在其中实现了加水印,缩图,将图片文件的大小以及相对路径存入数据库等自定义操作,大家可以在此发挥。UpImg返回值为保存图片的相对路径,然后调用editer.aspx页面的js函数upimg。js函数upimg功能为将字符串插入到CKeditor的当前光标位置,插入的是html代码。至此为止带有新上传图片相对路径的img标签就插入CKeditor的编辑区了,能够显示图片了。

Button1_Click为取消按钮的单击事件函数。调用editer.aspx页面的js函数close,将弹出层隐藏

CKEditor是新一代的FCKeditor,是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。而CKFinder是一个功能强大的ajax文件管理器。其简单的用户界面使得各类用户,不管是从高级专业人才,还是互联网初学者,都够直观、快速学习的学习使用它。

网址:
CKEditor :http://ckeditor.com/
CKFinder :http://ckfinder.com/
CKEditor 的使用
准备工作
1. 下载CKEditor并将其解压到Web根目录下
2. 精简目录:
_samples文件夹(示例文件,可以删除)
_source文件夹(源程序文件,可以删除)
changes.html(更新列表,可以删除)
install.html(安装指向,可以删除)
license.html(使用许可,可以删除)
CKEditor的配置(config.js文件)
详细api参数见:http://docs.cksource.com/ckeditor_api/,我的默认配置

代码如下:

// 自定义 CKEditor 样式
CKEDITOR.editorConfig = function(config) {
//配置默认配置
config.language = 'zh-cn'; //配置语言
// config.uiColor = '#FFF'; //背景颜色
// config.width = 400; //宽度
// config.height = 400; //高度
// config.skin = 'v2'; //编辑器皮肤样式
// 取消 “拖拽以改变尺寸”功能
// config.resize_enabled = false;
// 使用基础工具栏
// config.toolbar = "Basic";
// 使用全能工具栏
config.toolbar = "Full";
//使用自定义工具栏
// config.toolbar =
// [
// ['Source', 'Preview', '-'],
// ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ],
// ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
// ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', SpecialChar','PageBreak'],
// '/',
// ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript'],
// ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
// ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
// ['Link', 'Unlink', 'Anchor'],
// '/',
// ['Format', 'Font', 'FontSize'],
// ['TextColor', 'BGColor'],
// ['Maximize', 'ShowBlocks', '-', 'About']
// ];
};

CKEditor 的应用
1. 在 asp教程x 页面或者 master 模板页 <head> 标签中加载 ckeditor.js:
  <!-- 载入 CKEditor JS 文件 -->
<script type="text/网页特效" src="ckeditor/ckeditor.js"></script>
2. 修改页面的page指令ValidateRequest="false"
<%@ Page Language="C#" ValidateRequest="false" %>
3. 在<body>标签中使用ckeditor:
<!-- 使用 ckeditor 必须定义 class="ckeditor" -->
<asp:TextBox ID="txtContent" class="ckeditor" TextMode="MultiLine"
Text='<%# Bind("info") %>' runat="server"></asp:TextBox>
4. 获取或设置编辑器中的内容
//获取编辑器中的内容
lblView.Text=Server.HtmlEncode( this.txtContent.Text);
//设置编辑器中的内容
//txtContent.Text = Server.HtmlDecode("<h1>设置内容</h1>");

CKFinder 的使用
准备工作
1. 下载CKFinder的Asp.NET版,将其解压到Web根目录下
2. 复制/bin/Release目录下的ckfinder.dll文件至站点bin目录
3. 精简目录:
_samples文件夹(示例文件,可以删除)
_source文件夹(源程序文件,可以删除)
CKFinder的配置
1. 打开 " ckfinderconfig.ascx ",为SetConfig方法中的 BaseUrl 指定默认路径,如:
// 以userfiles 为默认路径,其目录下会自动生成images、flash等子目录。
BaseUrl = " ~/ckfinder/userfiles/";
// NOTE:注意“ ~/ ”。


2. 与CKEditor集成
打开CKEditor目录中的config.js文件在function 函数中

代码如下:

// 自定义 CKEditor 样式
CKEDITOR.editorConfig = function(config) {
……
};


加入如下内容:

代码如下:

// 在 CKEditor 中集成 CKFinder,注意 ckfinder 的路径选择要正确。
config.filebrowserBrowseUrl = location.hash + '/ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = location.hash + '/ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = location.hash+'/ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = location.hash + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
// config.filebrowserWindowWidth = '800';
// config.filebrowserWindowHeight = '500';

CKFinder的应用
1. 在工具栏中添加站点根目录bin目录中的ckfinder.dll控件
2. 拖放控件到Web页面
3. 修改CKFinder控件属性BasePath为ckfinder目录的相对路径
常见问题
1. 症状:因为安全原因,文件不可浏览。请联系系统管理员并检查CKFinder配置文件。
原因:未设置用户身份验证或者用户未登录。
语句:

代码如下:

public override bool CheckAuthentication()
{
return false;
}

解决:在CKFinder的config.ascx文件中修改public override bool CheckAuthentication() 加入用户身份权限验证方法。
2. 症状:未知错误
原因:设置不进行用户身份验证,但是 BaseUrl 路径不对。
语句:

代码如下:

public override bool CheckAuthentication()
{
return true ;
}

解决:在CKFinder的config.ascx文件中的public override void SetConfig() 修改

// 以userfiles 为默认路径,其目录下会自动生成images、flash等子目录。
BaseUrl = " ~/ckfinder/userfiles/";
// NOTE:注意“ ~/ ”。


3. 症状:访问带有CKFinder的页面时报错“HTTP 错误 404 - Not Found”
解决:修改CKFinder控件的BasePath属性为ckfinder目录的相对路径


总结上面的教程,我们再来看一下详细的配置方法并且可以配置图片上传及安全配置

CKEditor:
1.解压CKEditor到webRoot目录,在应用页面加载其ckeditor.js ;
2.页面textarea:

<textarea cols=”80″; name=”editor1″ rows=”10″></textarea>

CKFinder:
3.解压CKFinder到webRoot目录(最好与CKEditor同级),在应用页面加载其ckfinder.js ;
4.页面script:(最好textarea之后)


if (typeof CKEDITOR == ‘undefined’) {
document.write(’加载CKEditor失败’);
}
else {
var editor = CKEDITOR.replace(’editor1′);
CKFinder.SetupCKEditor(editor, ‘../ckeditor/ckfinder/’); //ckfinder总目录的相对路径.
}

整合:
(把俩js加载到同一文件其实就已经基本整合好了,还需要修改的配置如下)
5.打开ckfinderconfig.php教程,修改$baseUrl = ‘(上传附件的存放路径)’; //以webRoot为起始的绝对路径,其目录下会自动生成images、flash等子目录;默认是在webRoot的根目录下,注意修改。

至此配置完毕,如果需要自定义界面,可进行以下的高级修改:

6.在ckeditorconfig.js中的CKEDITOR.editorConfig里加入以下需要自定义的配置代码:

//字体.
    config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial; Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;';

    //工具按钮.
    config.toolbar=
        [
        ['Source','-','Save','NewPage','Preview','-','Templates'],

        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],

        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

        ['Form','Checkbox','Radio','TextField','Textarea','Select','Button',

            'ImageButton','HiddenField'],

        '/',

        ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],

        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],

        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

        ['Link','Unlink','Anchor'],

        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar',

            'PageBreak'],www.111cn.net

        '/',

        ['Styles','Format','Font','FontSize'],

        ['TextColor','BGColor'],

        ['Maximize','ShowBlocks','-','About']

    ];

    //宽度
    config.width = 500;

    //高度
    config.height = 400;

    //皮肤
    config.skin='v2';

安装CKFinder后才能有上传功能:


第二步:设置CKFinder的上传功能


由于本次CKEditor全新改版,没有提供文件上传功能,所以选择整合CKFinder是个不错的选择
需要修改一下CKEditor插件文件夹下的JS源码,以image插件为例(Flash及Files同理):
Code

//将下边的代码做一些修改
//{type:'button',id:'browse',align:'center',label:m.lang.common.browseServer,hidden:false,filebrowser:'info:txtUrl'}]}]},
//2009-07-13 将浏览服务器按钮置为显示状态 (hidden: false),增加onClick函数,用于打开ckfinder页面,紧接着上面的代码添加
{ type: 'button', id: 'browse', align: 'center', label: m.lang.common.browseServer, hidden: false, filebrowser: 'info:txtUrl', onClick: function() { var finder = new CKFinder(); finder.BasePath = '../ckfinder20090716/'; finder.SelectFunction = SetFileField; finder.Popup(); } }]}]},


在方法体外增加下边的函数
//用于取回 ckfinder 返回的图片地址并对路径文本框和预览图片进行赋值
function SetFileField(fileUrl)
{
   //获取主Div下的所有文本框控件
    var inputStr = document.getElementById("cke_txtContent_dialog").getElementsByTagName("Input");
    for(var i=0; i<inputStr.length; i++)
    {
        if(inputStr[i].type=="text")
        {
            //第一个输入框控件是图像路径,得到ID,设置新的图片路径
            CKEDITOR.document.getById(inputStr[i].id).setValue(fileUrl);
            break ;
        }
    }
    CKEDITOR.document.getById('previewImage').setAttribute('src', decodeURI(fileUrl));
}


第三步:CKFINDER上传问题:出现“因为安全原因,文件不可浏览. 请联系系统管理员并检查CKFinder配置文件“


整合后会出现“因为安全原因,文件不可浏览. 请联系系统管理员并检查CKFinder配置文件“

The Solution:

1. There is no write access for the default upload folder $baseUrl = '/userfiles/'; in ckfinder/config.php.
对于目标文件夹$baseUrl = '/userfiles/';没有写入权限

2. This is maybe because the Return value of Funcation CheckAuthentication() is always FALSE by default in ckfinder/config.php. Change the Validation Condition according to your condition, not recommend to set the return value to true directly.
因为出于安全考虑ckfinder/config.php文件中的CheckAuthentication()函数默认返回值是false, 需要手动修改验证条件, 不建议直接返回true

 

[!--infotagslink--]

相关文章

  • 图解PHP使用Zend Guard 6.0加密方法教程

    有时为了网站安全和版权问题,会对自己写的php源码进行加密,在php加密技术上最常用的是zend公司的zend guard 加密软件,现在我们来图文讲解一下。 下面就简单说说如何...2016-11-25
  • ps怎么使用HSL面板

    ps软件是现在很多人都会使用到的,HSL面板在ps软件中又有着非常独特的作用。这次文章就给大家介绍下ps怎么使用HSL面板,还不知道使用方法的下面一起来看看。 &#8195;...2017-07-06
  • Plesk控制面板新手使用手册总结

    许多的朋友对于Plesk控制面板应用不是非常的了解特别是英文版的Plesk控制面板,在这里小编整理了一些关于Plesk控制面板常用的使用方案整理,具体如下。 本文基于Linu...2016-10-10
  • vue Treeselect下拉树只能选择第N级元素实现代码

    这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
  • 使用insertAfter()方法在现有元素后添加一个新元素

    复制代码 代码如下: //在现有元素后添加一个新元素 function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if (parent.lastChild == targetElement){ parent.appendChild(newEl...2014-05-31
  • jQuery 1.9使用$.support替代$.browser的使用方法

    jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。 如果要全面支持 IE,并混合...2014-05-31
  • 使用percona-toolkit操作MySQL的实用命令小结

    1.pt-archiver 功能介绍: 将mysql数据库中表的记录归档到另外一个表或者文件 用法介绍: pt-archiver [OPTION...] --source DSN --where WHERE 这个工具只是归档旧的数据,不会对线上数据的OLTP查询造成太大影响,你可以将...2015-11-24
  • 使用GruntJS构建Web程序之构建篇

    大概有如下步骤 新建项目Bejs 新建文件package.json 新建文件Gruntfile.js 命令行执行grunt任务 一、新建项目Bejs源码放在src下,该目录有两个js文件,selector.js和ajax.js。编译后代码放在dest,这个grunt会...2014-06-07
  • 如何使用php脚本给html中引用的js和css路径打上版本号

    在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css、js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就可以从浏览器的缓存中获取css、...2015-11-24
  • C#注释的一些使用方法浅谈

    C#注释的一些使用方法浅谈,需要的朋友可以参考一下...2020-06-25
  • Jquery 获取指定标签的对象及属性的设置与移除

    1、先讲讲JQuery的概念,JQuery首先是由一个 America 的叫什么 John Resig的人创建的,后来又很多的JS高手也加入了这个团队。其实 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用简单的一些代...2014-05-31
  • MySQL日志分析软件mysqlsla的安装和使用教程

    一、下载 mysqlsla [root@localhost tmp]# wget http://hackmysql.com/scripts/mysqlsla-2.03.tar.gz--19:45:45-- http://hackmysql.com/scripts/mysqlsla-2.03.tar.gzResolving hackmysql.com... 64.13.232.157Conn...2015-11-24
  • 安装和使用percona-toolkit来辅助操作MySQL的基本教程

    一、percona-toolkit简介 percona-toolkit是一组高级命令行工具的集合,用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务,这些任务包括: 检查master和slave数据的一致性 有效地对记录进行归档 查找重复的索...2015-11-24
  • php语言中使用json的技巧及json的实现代码详解

    目前,JSON已经成为最流行的数据交换格式之一,各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》,探讨它的设计思想。今天,我想总结一下PHP语言对它的支持,这是开发互联网应用程序(特别是编写API)必须了解的知识...2015-10-30
  • 使用jquery修改表单的提交地址基本思路

    基本思路: 通过使用jquery选择器得到对应表单的jquery对象,然后使用attr方法修改对应的action 示例程序一: 默认情况下,该表单会提交到page_one.html 点击button之后,表单的提交地址就会修改为page_two.html 复制...2014-06-07
  • PHP实现无限级分类(不使用递归)

    无限级分类在开发中经常使用,例如:部门结构、文章分类。无限级分类的难点在于“输出”和“查询”,例如 将文章分类输出为<ul>列表形式; 查找分类A下面所有分类包含的文章。1.实现原理 几种常见的实现方法,各有利弊。其中...2015-10-23
  • JS创建Tag标签的方法详解

    这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15
  • php类的使用实例教程

    php类的使用实例教程 <?php /** * Class program for yinghua05-2 * designer :songsong */ class Template { var $tpl_vars; var $tpl_path; var $_deb...2016-11-25
  • 双冒号 ::在PHP中的使用情况

    前几天在百度知道里面看到有人问PHP中双冒号::的用法,当时给他的回答比较简洁因为手机打字不大方便!今天突然想起来,所以在这里总结一下我遇到的双冒号::在PHP中使用的情况!双冒号操作符即作用域限定操作符Scope Resoluti...2015-11-08
  • 浅析Promise的介绍及基本用法

    Promise是异步编程的一种解决方案,在ES6中Promise被列为了正式规范,统一了用法,原生提供了Promise对象。接下来通过本文给大家介绍Promise的介绍及基本用法,感兴趣的朋友一起看看吧...2021-10-21