web前端开发
之前转载了一遍博文关于extjs箱子布局攻略
里面介绍了vbox/hbox的填充模式，代码如下
|
1 2 3 4 5 |
layout:'hbox', layoutConfig: { align : 'stretch', pack : 'start', }, |
在前面版本的extjs我不太清楚，使用4.1版本时，如果布局是hbox，align设置成stretch应该会纵向拉升子部件的。
我试了之后发现并没有达到应有的效果。我没弄明白为什么这样会无效，但是找到了能让它生效的办法：
|
1 |
layout: { type: 'hbox', pack: 'start', align: 'stretch' }, |
概述：列类型，就是在grid组件创建的时候，指定的列xtype，我们可以将数据更好的展示和列的功能按钮扩展等。
以后台为例，需要在列末尾增加几个按钮，“完结状态“、“推荐”、”编辑“、”预览“等按钮。
如下图所示：
一、列类型的主类 Ext.grid.column.Column xtype:gridcolumn
1.Ext.grid.column.Actionxtype:actioncolumn
在表格中渲染一组图片按钮，并且为它赋予功能
alertText:String设置应用image元素上的alt
handler:function(view,rowindex,colIndex,item,e);触发的点击事件
icon：图标的资源地址(图片资源)
iconCls:图片样式， 指定的一个css的类名
items:多个图片的数组，在使用MVC的时候建议不要用
stopSelection设置是否单机选中不选中
2.Ext.grid.column.Booleanxtype:booleancolumn boolean类型的列类型
falseText当值为false的时候显示什么信息
trueText 当值为true的时候显示什么信息
3.Ext.grid.column.Datextype: datacolumn 日期的列类型
format指定的是格式如 Y年m月d日
4.Ext.grid.column.Numbernumbercolumn number的列类型
format指定的显示数值的格式0,000
5.Ext.grid.column.Templatextype:templatecolumn 模版类型的列类型 常用于显示model的其他属性，比如描述等。
tpl指定显示信息， 当使用到model的属性时候 可以用{属性名}来，则可以显示出数据
二、不在column包下面的列模式指定
Ext.grid.RowNumber xtype rownumber
直接创建这个类，当作列类型指定的对象
简单了解：
我们可以将一些固定的数据做成缓存，直接在前台中调用，如果没有就去请求后台来加入
数据字典
业务数据字典：风险等级，城市
不变的数据字典：男，女 是，否人的血型
代码实现：(主要在view层中来指定列类型，其他的事件等model改动的代码暂不显示了)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
Ext.define("AM.view.List",{ extend:"Ext.grid.Panel", title:"GridDemo", //标题 frame:true, //面板渲染 alias:"widget.userlist", //设置别名 //forceFit:true,//设置是否自动填充 width:1000, height:280, columns:[ //列类型 并设置前台编辑 Ext.create("Ext.grid.RowNumberer",{}), {text:"Name",dataIndex:"name",width:100}, {text:"Age",dataIndex:"age",width:100}, { //个性化显示数据 text:"性别", dataIndex:"sex", renderer:function(value){ if(value=="女"){ return"<font color='green'>女</font>"; }elseif(value=="男"){ return"<font color='red'>男</font>"; } } }, {text:"Email",dataIndex:"email",width:200, field:{ xtype:"textfield", allowBlank:false } },{//显示boolean类型 text:"isIt", xtype:"booleancolumn", dataIndex:"isIt", trueText:"是", falseText:"不是" },{ text:"生日", xtype:"datecolumn", dataIndex:"birthday", format:"Y年m月d日", width:150 },{//显示number类型 text:"收入", xtype:"numbercolumn", dataIndex:"deposit", format:"0,000", width:150 },{//templatecolumn列类型的使用 text:"描述", xtype:"templatecolumn", tpl:"名字是{name},年龄是{age}", width:150 },{//Action模式的使用，增加事件机制，在controller层用别名查找方式来指定事件，也可以用handler字段 text:"Action", xtype:"actioncolumn", id:'del', icon:"app/view/image/delete.jpg", width:50 } ], tbar:[ //上方工具栏 {xtype:"button",text:"添加",iconCls:"table_add"}, {xtype:"button",id:'delete',text:"删除",iconCls:"table_delete"}, {xtype:"button",text:"修改",iconCls:"table_edit"}, {xtype:"button",text:"查看",iconCls:"table_comm"} ], dockedItems:[{ xtype:"pagingtoolbar", store:"Users", dock:"bottom",//指定在那个位置 displayInfo:true //设置显示 }], //设置前台编辑，首先在列类型中指定，然后使用插件机制来添加插件 plugins:[ Ext.create("Ext.grid.plugin.CellEditing",{ clicksToEdit:2 }) ], selType:"checkboxmodel", //设置选择模式，设置成多选框的模式 multiSelect:true, //设置成多选 // renderTo:"griddemo", store:"Users",//指定数据集 initComponent:function(){ this.callParent(arguments); } }); |
只有业余时间做新后台，进度比较慢花了几天时间主要的功能终于都做完了。
在做图片下载功能的时候，找了好多grid的进度条。有的09年的老版现在不支持4.0了，也有的是在column中renderer里defer延迟渲染上的进度条，感觉效果和调用起来不太好用，性能和效果估计也不太理想。
终于在ext官方论坛里找到一个国外大侠分享的ext4 进度条，现在发出来分享。
ProgressColumn-master
需要说明的是，它并不是从progressbar扩展而来的，而是extend: ‘Ext.grid.column.Column’
所以，请不要将Ext progressbar的属性和方法来使用它。
使用方法：
|
1 2 3 4 5 6 7 |
columns: [ { header: '编号', dataIndex: 'id', align: 'center', width: 50 }, { xtype: 'dvp_progresscolumn', width: 110, dataIndex: 'existper' }] |
如何动态改变进度，只需在控制器的函数里面改变record的值即可，非常方便
|
1 |
record.set("existper", picIndex / urlArr.length); |
效果图
希望广大Ext爱好者喜欢。
原文地址：http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Controller
控制器Controller通常是和application绑定在一起的。它们主要作用是监听事件（通常对view），并采取一些action。下面是我们如何创建一个Controller来管理用户：
|
1 2 3 4 5 6 7 |
Ext.define('MyApp.controller.Users', { extend: 'Ext.app.Controller', init: function() { console.log('Initialized Users! This happens before the Application launch function is called'); } }); |
init函数是一个特殊的方法，在你的application启动时调用。它是在application的Viewport被创建以前执行的。
init函数是通常作用就是Controller与View进行交互设置，通常用于与另一个Controller的功能 – 控制相结合。控制功能可以很容易地监听View的事件，并采取一些action和handler。如果我们要当panel渲染的时候使用Controller来通知我们,代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Ext.define('MyApp.controller.Users', { extend: 'Ext.app.Controller', init: function() { this.control({ 'viewport > panel': { render: this.onPanelRendered } }); }, onPanelRendered: function() { console.log('The panel was rendered'); } }); |
这里在init函数的this.control中设置了listeners，就和在View中设置是一样的效果。使用了ext4新的组建选择器，如果你还不熟悉ext4新的选择器，请看博文http://www.yuuzle.com/extjs4-and-jquery-selector-comparison.html
新的refs系统是Controller最有用的功能。通过使用新Ext.ComponentQuery，很容易很方便的找到View中的引用。让我们来看看在现在这样一个例子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
Ext.define('MyApp.controller.Users', { extend: 'Ext.app.Controller', refs: [ { ref: 'list', selector: 'grid' } ], init: function() { this.control({ 'button': { click: this.refreshGrid } }); }, refreshGrid: function() { this.getList().store.load(); } }); |
上面的例子refs中定义了选择器“grid”引用名为“list”，在这里就可以使用getList（）方法来调用选择器的结果值了
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Ext.define('MyApp.controller.Users', { extend: 'Ext.app.Controller', models: ['User'], stores: ['AllUsers', 'AdminUsers'], init: function() { var User = this.getUserModel(), allUsers = this.getAllUsersStore(); var ed = new User({name: 'Ed'}); allUsers.add(ed); } }); |
通过指定Model、Store和Controller的关系，再动态加载它们的文件位置（app/model/User.js, app/store/AllUsers.js 和 app/store/AdminUsers.js），并创建他们的getter函数。上面的例子会创建一个新的用户Model实例，并把它添加到ALLUSERS Store。在这个函数中你可以做任何事情，这里只是做了一些简单的功能演示。
现在主流的JS框架要数ExtJs和JQuery应用的比较广泛。JQuery属于轻量级的，一般做网站应用比较常见，可见块头小的优势。ExtJs比较庞大，它除了对基本的JS语法和HTML DOM操作方式的封装之外，还提供了一套强大的UI库。在企业级B/S解决方案应用上独占优势。就单说它在原生JS的封装，DOM操作方式封装方面也足以藐视JQuery。下面我就通过对比API，体现两种框架的异曲同工之处。我们已JQuery API为主线，来看看ExtJs是否有替代的方案。
注意一点：ExtJs4.0相对上一版本改动较大，本系列文章暂时只对ExtJs4.0及以上版本提供支持。
JS对HTML节点的操作比较频繁。所以要经常定位和查询DOM元素。我们分别看看两种框架的实现
获取Id=”div1″的DOM元素:
[JQuery]
|
1 |
$("#div1"); |
[ExtJs]
|
1 |
Ext.get("div1"); |
其实Ext.get(“div1”)与$(“#div1”)还是有区别的，前者只会获取匹配的第一个元素，后者是匹配的元素集合。ExtJs的等价用法如下：
[ExtJs]
|
1 |
Ext.select("#div1"); |
下面是一个完整的比较代码：
[ExtJs]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
//Ext.Element类 :是ExtJs对dom对象的封装 //Ext.CompositeElement类：是ExtJs对dom对象集合的封装 //查询Id=div1的元素，返回第一个匹配元素的Ext.Element类型 //该方法只能查Id，不支持选择器 Ext.get("div1"); //功能同上 Ext.fly("div1"); //查询Id=div1的元素的dom对象 Ext.get("div1").dom; //或者 Ext.getDom("div1"); //获取body元素的Ext.Element类型 Ext.getBody(); //返回当前HTML文档的Ext.Element类型 Ext.getDoc(); //查询Id=div1的元素,返回满足条件的集合Ext.CompositeElement类型 Ext.select("#div1"); //查询属性title=d1的div,返回满足条件的集合Ext.CompositeElement类型 Ext.select("div[title='d1']"); //查询属性title=d1的div,返回满足条件的dom节点集合 Ext.query("div[title='d1']"); |
JQuery选择器支持CSS3选择符，ExtJs同样也提供支持，除此之外还支持基本的XPath语法。下面分别讲解：
下面列举的命令是单个形式，都可以无限组合使用。
@ 与引号的使用是可选的。例如：div[@foo=’bar’] 也是一个有效的属性选择符。
下面通过几个例子来说明：
/html/body/div/div :从根目录开始找，找到正文的第二层全部DIV。
div/div :在全文匹配DIV元素，并获取包含子DIV的全部子DIV集合。
通俗点讲，他们的作用都是一样的，都是获取元素。但是前者每次调用都会生成一个Ext.Element对象，开辟新的内存空间，而后者共享了一个公用的内存空间，每次调用都会覆盖前一次的信息。由于Ext.Element 比较庞大，后者的好处是可以节省资源。如果你获取的Ext.Element 不需要长期保持重复调用，用后者较为合理。下面通过一个例子来体现他们的区别：
|
1 2 3 4 5 6 7 8 9 10 11 |
//这样更新的是div1 var div1 = Ext.get("div1"); Ext.get("div2"); div1.update("我想更新div1"); //将get替换成fly后.... //更新的却是div2 var div1 = Ext.fly("div1"); Ext.fly("div2"); div1.update("我想更新div1"); |
我们发现，再次调用Ext.fly后，更新的是DIV2，而再次调用Ext.get不会影响更新的元素。
注意：CSS类操作的几个方法相对于早期版本有变化之前是：e.addClass(“c2”)
[JQuery]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
var e = $("div[title=t1]"); //返回第一个匹配元素的title属性 alert(e.attr("title")); //设置第一个匹配元素的title属性 e.attr("title", "newTitle"); //移除第一个匹配元素的title属性 e.removeAttr("title"); //CSS类 //给第一个匹配元素添加c2样式 e.addClass("c2"); //移除 e.removeClass("c1"); //轮回 e.toggleClass("c2"); //检查c2样式是否存在 e.hasClass("c2"); //Html //获取Html e.html(); //更新Html e.html("<b>更新后的Html</b>"); //值 e.val(); e.val(150); |
[ExtJs]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
var e = Ext.select("div[title=t1]"); //属性 //返回第一个匹配元素的title属性 alert(e.first().getAttribute("title")); //设置第一个匹配元素的title属性 e.first().set({ "title": "newTitle" }); //CSS类 //给第一个匹配元素添加c2样式 e.addCls("c2"); //移除 e.removeCls("c1"); //轮回 e.toggleCls("c2"); //检查c2样式是否存在 e.hasCls("c2"); //Html //获取Html e.first().dom.innerHTML; //更新Html e.first().update("<b>更新后的Html</b>"); //值 e = Ext.get("text1"); e.getValue(); e.set({ value: 150 }); |
[JQuery]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var e = $(".c1"); //过滤 //获取匹配的第二个元素 e.eq(1); //再次筛选，属性title=t1的div e.filter("div[title=t1]"); //父节点Id=div1时返回true e.parent().is("#div1"); //查找 //获取集合中第一个，最后一个： e.first(); e.last(); //前一个，后一个： e.prev(); e.next(); //子节点第一个，最后一个： var e2 = $("#div1"); e2.children().first(); e2.children().last(); |
[ExtJs]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var e = Ext.select(".c1"); //过滤 //获取匹配的第二个元素 e.item(1); //再次筛选，属性title=t1的div,集合中不满足条件的元素自动移去 e.filter("div[title=t1]"); e = Ext.select(".c1"); //父节点Id=div1时返回true e.first().parent().is("#div1"); //查找 //获取集合中第一个，最后一个： e.first(); e.last(); //单个元素的前一个，匹配选择器的后一个: e.item(1).next("div[title=t2]"); e.item(1).prev(); var e2 = Ext.get("div1"); //获取子节点的第一个，最后一个： e2.first(); e2.last(); |
[JQuery]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//插入 var e = $("div .c1"); //e元素结束之前插入 e.first().append("<b>新内容</b>"); //e元素开始之后插入 e.first().prepend("<b>新内容</b>"); //e元素开始之前插入 e.first().before("<b>新内容</b>"); //e元素结束之后插入 e.first().after("<b>新内容</b>"); //包裹 e.eq(2).wrap("<p></p>"); e.eq(2).unwrap(); //替换 e.eq(2).replaceWith("<b>被替换的</b>"); //删除 e.eq(3).remove(); //清空标签内的html e.eq(0).empty(); |
[ExtJs]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
var e = Ext.select("div .c1"); //插入 //分别在相对于文档e的四个位置插入html： e.first().insertHtml("afterBegin", "<b>新内容</b>"); e.first().insertHtml("beforeEnd", "<b>新内容</b>"); e.first().insertHtml("beforeBegin", "<b>新内容</b>"); e.first().insertHtml("afterEnd", "<b>新内容</b>"); //包裹 e.wrap({ tag: 'p' }); //用text1替换集合第五个元素 e.replaceElement(4, "text1", true); //替换用当前元素去替换掉div2标签 e.first().replace("div2", true); //删除 e.first().remove(); //移除集合中第三个元素 e.removeElement(2, true); |
[JQuery]
|
1 2 3 4 5 6 7 8 9 |
var e = $("div1"); //设置样式 e.css("width", "550px"); e.css("position", "absolute"); //设置高度 e.height(100); //获取宽度 e.width(); |
[ExtJs]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
var e = Ext.get("div1"); //设置样式 e.setStyle("width", "550px"); e.applyStyles({ height: "500px", color: "red", position: "absolute" }); //设置高度，带动画效果 e.setHeight(100, true); //设置定位 e.setLeft("50px"); e.setTop("10px"); e.setLeftTop("100px", "50px"); //设置尺寸 e.setSize("100px", "200px"); //设置xy坐标 e.setXY([10, 10]); //获取宽度 e.getWidth(); //获取坐标 e.getXY(); |
[JQuery]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var e = $("#div1"); //事件绑定 //给元素绑定click事件： var clickhandler = function () { alert("click事件被触发！"); }; e.bind("click", clickhandler); //模拟click事件： e.trigger("click"); //解除绑定click事件 e.unbind("click", clickhandler); //事件切换 e.hover(function () { e.css("background-color", "Red"); }, function () { e.css("background-color", "Aqua"); }); |
[ExtJs]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var e = Ext.get("div1"); //事件绑定 //给元素绑定click事件： var clickhandler = function () { Ext.Msg.alert("消息", "click事件被触发！"); }; e.on("click", clickhandler); //解除绑定click事件 e.un("click", clickhandler); //事件切换 e.hover(function () { e.setStyle("background-color", "Red"); }, function () { e.setStyle("background-color", "Aqua"); }); |
近日Google Chrome 18 更新後 , 造成許多人的CkEditor 秀抖了(Bug)
什麼是CKEditor呢? 就是被大量使用在各種網站設計中(Blog/網站後台管理系統等等..)的HTML所見即所得編輯器.
使用起來方便, 人性化, 彷彿Word般的一種網頁使用的編輯器.
也許有人網站有使用CkEditor但卻不自知, 請見下面截圖
如果您看到您的網站管理後台或是部落格有像上面圖片中的編輯器, 您應該就是使用CKEdirot編輯器.
不過近日Google Chrome 18 更新後, 下面這個功能您可能暫時無法使用了!
(小編 : 如果您壓根就不知道有這個功能的話, 建議您四處晃晃看看我們的部落格其它的文章好了!)
也就是瀏覽伺服器端(File Management)的這個功能
管理您網站上的圖片以及檔案
本來應該會跳出一個新視窗讓使用者管理檔案(如下圖)
正常的檔案管理畫面
但是現在Chrome 18只會彈出一個原始大小為"看不見"的網頁
(檔案管理視窗CKFinder : 你看不見我~你看不見我~~ o(￣▽￣/// )
然後您就不能操作檔案管理了, 除非您想辦法在系統下方工作列中透過右鍵把該視窗放到最大才能夠使用!
但您還是不能夠縮放, 移動那個頁面!
就是看不到右邊那個頁面
根據小編發現的非官方解決方案就是 –
打開 CKEditor.js 檔案 , 並且找到
s.moveTo(r,q);s.resizeTo(n,o);
這一段, 並將它改成 /*s.moveTo(r,q);s.resizeTo(n,o);*/
默认情况下如果Flash被嵌入到Web页面中，则SWF文件默认被置于所有HTML元素的顶层渲染级别的。类似在所有html元素的总父容器上一层，无法被任何html元素遮挡。
无论怎么设置flash容器和层的深度(z-index)也无济于事。
遇到这个问题我们可以在插入flash的embed或object标签中加入“wmode”属性并设置为wmode=“transparent”或”opaque” 在Flex4中默认的HTML包围容器的方式变了如代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script type="text/javascript"> var swfVersionStr = "10.0.0"; var xiSwfUrlStr = "playerProductInstall.swf"; var flashvars = {}; var params = {}; params.quality = "high"; params.bgcolor = "#ebf4ff"; params.allowscriptaccess = "sameDomain"; params.allowfullscreen = "true"; var attributes = {}; attributes.id = "BSC_ABIS_App"; attributes.name = "BSC_ABIS_App"; attributes.align = "middle"; swfobject.embedSWF( "BSC_ABIS_App.swf", "flashContent", "100%", "100%", swfVersionStr, xiSwfUrlStr, flashvars, params, attributes); swfobject.createCSS("#flashContent", "display:block;text-align:left;"); </script> |
这时我们可以在上面的params中加
|
1 2 |
params.wmode = "opaque";或者 params.wmode = "transparent"; |
其他情况基本相同
然后我们了解下这些属性：
window 模式
默认情况下的显示模式，在这种模式下flash player有自己的窗口句柄，这就意味着flash影片是存在于Windows中的一个显示实例，并且是在浏览器核心显示窗口之上的，所以flash只是貌似显示在浏览器中，但这也是flash最快最有效率的渲染模式。由于他是独立于浏览器的HTML渲染表面，这就导致默认显示方式下flash总是会遮住位置与他重合的所有DHTML层。
但是大多数苹果电脑浏览器会允许DHTML层显示在flash之上，但当flash影片播放时会出现比较诡异的现象，比如DHTML层像被flash刮掉一块一样显示异常。
Opaque 模式
这是一种无窗口模式，在这种情况下flash player没有自己的窗口句柄，这就需要浏览器需要告诉flash player在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器HTML渲染表面而是与其他元素一样在同一个页面上,因此你就可以使用z-index值来控制DHTML元素是遮盖flash或者被遮盖。
Transparent 模式
透明模式，在这种模式下flash player会将stage的背景色alpha值将为0并且只会绘制stage上真实可见的对象，同样你也可以使用z-index来控制flash影片的深度值，但是与Opaque模式不同的是这样做会降低flash影片的回放效果，而且在9.0.115之前的flash player版本设置wmode=”opaque”或”transparent”会导致全屏模式失效。
当看完这些属性时，我们恍然大悟 可以解决了。但是问题接踵而来，就是我们突然发现 当焦点置于Flash后再切换到HTML元素中 如HTML的INPUT输入框中，不管怎么切换我们的输入法，中文就是出不来。 不要急，其实这算是Flash的一个BUG但是我们也有办法解决
当我使劲翻阅了藏在API角落的一个函数时我笑了。淫荡的笑了。
这个大侠就是flash.system.Capabilities。
我们只需用到它的一个属性 就是查看系统的输入法 Capabilities.hasIME ：[只读] 指定系统是否安装了输入法编辑器 (IME)，如果是，则为 true，否则为 false。服务器字符串为 IME。
当我们焦点进入到Flash时 我们的 IME.enabled属性直接被Flash禁用 值变为False 这也就是 当我们为什么焦点放在HTML的元素中 狂且输入法就是不管用的原因。既然找到原因了。那么我们动手解决吧
首先对Flash主程序进行事件监听用到这个事件MouseEvent.ROLL_OUT：
用户将指针设备从 InteractiveObject 实例上移开时分派。事件目标是指先前在指针设备下的对象或该对象的父级。relatedObject 是将指针设备向其移动的对象。在该对象的父级链以上连续分派 rollOut 事件，以该对象为开头，并以除 relatedObject 的根或始祖之外的最高级别的父级结束。
rollOut 事件的目的是简化带有子级的显示对象容器的移开行为的编码。当鼠标离开显示对象区域或任何其子级区域并转到除其子级以外的对象时，显示对象分派 rollOut 事件。这是与 mouseOut 事件行为不同的行为，因为该事件是在每次鼠标离开显示对象容器的任何子对象区域时才会被分派，即使鼠标仍保留在显示对象容器的另一个子对象上也是如此。
当我们的光标离开Flash时我们手动设置输入法开启代码如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
appGroup.addEventListener(MouseEvent.ROLL_OUT, setSRF); /** * 当光标离开Flash时开启设置系统的输入法 * */ private function setSRF(event:MouseEvent):void{ if(Capabilities.hasIME){ try{ if(!IME.enabled){ IME.enabled=true; } IME.conversionMode="CHINESE"; }catch(error:Error){ } } } |
OK 运行我们的页面 发现 成功了。DIV也上来了。中文输入法也能用了。高兴欢呼吧
箱子布局是一种新颖的布局方式，其布局模型可以更好地优化UI设计的工作。它率先在XUL界面语言中被提出，广泛应用于Mozilla的应用程序，如FireFox等等。在CSS布局系统中（for CSS v3），作为新增的补充形式，箱子布局可以指定子元素在水平或垂直的任意一种方向进行排列，剩下有多的空间由已声明了的子元素来填空（声明flex项）。
我们知道，在Ext中，容器里面是用来放置组件的，至于容器内的子组件怎么排列就由布局风格来指定。3.0提供了新的基于箱子模型的布局方式，分别是Hbox和Vbox，对应的命名空间是Ext.layout.HBoxLayout和Ext.layout.VBoxLayout。HBox全称 Horizontal Box，其中所有子项都是自动按顺序横排。VBox相反，里面为竖排方式，全称Vertical Box。所谓箱子模型的意思，就是将显示部分分割成一系列的box，按照水平的或垂直的两种方位排列组织。水平box可以将其子组件排成一条线，而垂直box 可以将其子组件定位成垂直方向。如果既然要水平方向和垂直方向两个方向填充内容，我们可以相互内嵌布局，即水平布局内嵌垂直布局，或垂直布局内嵌水平布局。
透过下图的一个例子可以看到两种方向的不同。
箱子模型的理论其实很人性化，既可以支持固定值尺寸的子项内容，也可以支持自适应的子项。箱子布局中的元素可以分配一个固定的值，也有可能加大尺码，这是容器空间有余的情况；另一种情况，则是容器空间不够容纳元素，就缩小某个元素的尺寸以适应。作用在那个元素身上？有flex配置项的子项元素，也就是说，HBox/VBox布局会把有设定flex配置的子项划分垂直或水平的空间。另外，容器中元素的位置和顺序也会某程度地改变。
flex配置项不是设置在布局上，而是设置在子项 的配置项。每个子项相对的flex值都会与全体子项flex累加的值相比较，根据此结果，处理每个子项的flex最后是多少。若不设置子项的flex，表示不对子项作自适应尺寸的处理，相当于flex = 0的子项或flex = undefined的时候，表示子项不会自伸缩处理，而采用最初的尺寸。
如下例：
该配置项效果如下图：
如果子项都设置相同flex值，那就意味着全体子项作相同的处理。
技巧：我们可以只让一个panel设定flex，便可以作为填充空白的spacer：
效果如下：
flex的文档也不是说得太清楚，不过我们可以多参考官方例子是怎么使用flex的。一旦你明白了flex这个概念之后，它会非常灵活地进行布局。
当然我们可以Vbox布局中内嵌hbox布局，或者hbox中内嵌vbox，HBox和VBox之间是可以允许嵌套布局的，但实际不必如此手动去做， Ext为我们提供了“对齐align/pack”的这一对方向各异的调整配置，代替了上述“内嵌”的这一种稍微让人感觉别扭。容器中每一个子项都遵循用户指定的align/pack对齐方式。一般设置的地方是在容器的layoutConfig配置项对象中，如下面某一个容器的代码片断：
[javascript] view plaincopylayout:'hbox', layoutConfig: { align : 'stretch', pack : 'start', }, items: [ {html:'panel 1', flex:1}, {html:'panel 2', width:150}, {html:'panel 3', flex:2} ]
对于垂直布局的VBox而言，属性align就是水平对齐的设置了，align有以下可选项：
| 键值 | 作用 |
| left | 居左，从容器的left 开始水平对齐。这是系统默认的选项。 |
| center | 居中，从容器的mid-width 开始垂直对齐。 |
| stretcn | 拉伸子项以填充容器的水平宽度。 |
| stretcnmax | 拿最宽的那个子项拉伸，适应容器的水平宽度。 |
属性pack是控制容器里面的子项是如何停靠的，这是垂直方向本身的对齐。有如以下设置：
| 键值 | 作用 |
| start | 居顶，从容器的top 停靠子项。这是系统默认的选项。 |
| center | 居中，也就是子项都从容器的mid-height 上开始停靠。 |
| end | 居底，从容器的底部 边边开始往上摆子组件。 |
对于水平布局的HBox而言，align就是决定如何垂直对齐，align的可选项有如下：
| 键值 | 作用 |
| top | 顶部对齐，从容器的top 开始垂直对齐。 |
| middle | 居中对齐，从容器的middle 开始垂直对齐。 |
| stretch | 拉伸子项以填充容器的垂直高度。 |
| stretchmax | 拿最高的那个子项拉伸，适应容器的垂直高度。 |
pack的可选项有以下几种：
| 键值 | 作用 |
| start | 居左，从左边开始排列内容。 |
| center | 居中，也就是从容器的mid-width 开始停靠内容。 |
| end | 居右，从容器的右边 开始停靠内容。 |
对于top、middle/center我们能够一眼地看出是什么意思，而stretch/stretchmax又是什么用法呢？一图胜千言，我们看看下面这张图（点击图片运行例子以了解更多的适用情形）：
BoxLayout可设置外边距（margins）。关于defaultMargins，就是如果不制定每个子项的margins 属性，那么就会使用默认的margins。规定defaultMargins的格式如下：
默认为{top:0, right:0, bottom:0, left:0} 。margin属性接纳的格式也可以是字符串的，规定为空格隔开，数字类型的margin值。各个方向的排列顺序为CSS的顺序：
BoxLayout可设置内边距（padding）。跟defaultMargins差不多，padding属性接纳的格式也可以是字符串的，其格式规定为空格隔开，数字类型的margin值。各个方向的排列顺序为CSS的顺序。
H&V箱子模型只限特定的应用场合，不是任何布局情形都可适应。例如，H&V BoxLayout不渲染表单的fieldLabels。要解决此问题，可以为fieldLables套一层layout:’form’的容器。尽管理论上可设计一个满足多样需求的布局，但性能是一大障碍（可参阅http: //www.extjs.com/forum/showthread.php?p=396565#post396565 ）。也可以使用其他的布局风格，如 TableLayout，但TableLayout一个明显的不足是子项的增、删、改不太方便；再如浮动布局FloatLayout。 FloatLayout很像水平布局的HBoxLayout，支持x/y的绝对布局，不过就没有自适应大小的功能。如果没有大小尺寸不够放得下，就换行显示。FloatLayout同样有拉伸子项的功能，也支持top/bottom/middle对齐，以及居中、居左、居右的功能。
H&V BoxLayout越来越备受推崇，必须把它弄懂才行。学习游泳最好的方法就是跳进水里大胆试试，把上面的例子和官方源码当作你的湖吧！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 |
Ext.apply(Ext.form.VTypes, { //首先定义一个vtype名称，和他的验证函数，val参数是文本框的值，field是文本框。一般我就使用val和正则表达式比较就OK了。 然后定义一个vtype的报错信息，与vtype名称加Text后缀。OK了。 password: function(val, field) { if (field.initialPassField) { var pwd = Ext.getCmp(field.initialPassField); return (val == pwd.getValue()); } return true; }, passwordText: &#39;两次输入的密码不一致！&#39;, chinese:function(val,field) { var reg = /^[\u4e00-\u9fa5]+$/i; if(!reg.test(val)) { return false; } return true; }, chineseText:&#39;请输入中文&#39;, age:function(val,field) { try { if(parseInt(val) &gt;= 18 &amp;&amp; parseInt(val) &lt;= 100) return true; return false; } catch(err) { return false; } }, ageText:&#39;年龄输入有误&#39;, alphanum:function(val,field) { try { if(!/\W/.test(val)) return true; return false; } catch(e) { return false; } }, alphanumText:&#39;请输入英文字母或是数字,其它字符是不允许的.&#39;, url:function(val,field) { try { if(/^(http|https|ftp):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(:(\d+))?\/?/i.test(val)) return true; return false; } catch(e) { return false; } }, urlText:&#39;请输入有效的URL地址.&#39;, max:function(val,field) { try { if(parseFloat(val) &lt;= parseFloat(field.max)) return true; return false; } catch(e) { return false; } }, maxText:&#39;超过最大值&#39;, min:function(val,field) { try { if(parseFloat(val) &gt;= parseFloat(field.min)) return true; return false; } catch(e) { return false; } }, minText:&#39;小于最小值&#39;, datecn:function(val,field) { try { var regex = /^(\d{4})-(\d{2})-(\d{2})$/; if(!regex.test(val)) return false; var d = new Date(val.replace(regex, &#39;$1/$2/$3&#39;)); return (parseInt(RegExp.$2, 10) == (1+d.getMonth())) &amp;&amp; (parseInt(RegExp.$3, 10) == d.getDate())&amp;&amp;(parseInt(RegExp.$1, 10) == d.getFullYear()); } catch(e) { return false; } }, datecnText:&#39;请使用这样的日期格式: yyyy-mm-dd. 例如:2008-06-20.&#39;, integer:function(val,field) { try { if(/^[-+]?[\d]+$/.test(val)) return true; return false; } catch(e) { return false; } }, integerText:&#39;请输入正确的整数&#39;, minlength:function(val,field) { try { if(val.length &gt;= parseInt(field.minlen)) return true; return false } catch(e) { return false; } }, minlengthText:&#39;长度过小&#39;, maxlength:function(val,field) { try { if(val.length &lt;= parseInt(field.maxlen)) return true; return false; } catch(e) { return false; } }, maxlengthText:&#39;长度过大&#39;, ip:function(val,field) { try { if((/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val))) return true; return false; } catch(e) { return false; } }, ipText:&#39;请输入正确的IP地址&#39;, phone:function(val,field) { try { if(/^((0[1-9]{3})?(0[12][0-9])?[-])?\d{6,8}$/.test(val)) return true; return false; } catch(e) { return false; } }, phoneText:&#39;请输入正确的电话号码,如:0920-29392929&#39;, mobilephone:function(val,field) { try { if(/(^0?[1][35][0-9]{9}$)/.test(val)) return true; return false; } catch(e) { return false; } }, mobilephoneText:&#39;请输入正确的手机号码&#39;, alpha:function(val,field) { try { if( /^[a-zA-Z]+$/.test(val)) return true; return false; } catch(e) { return false; } }, alphaText:&#39;请输入英文字母&#39;, money:function(val,field) { try { if(/^\d+\.\d{2}$/.test(val)) return true; return false; } catch(e) { return false; } }, moneyText:&#39;请输入正确的金额&#39; }); |
一、使用方法：
1、在页面<head>中引入ckeditor核心文件ckeditor.js
|
1 |
<span class="kwrd">&lt;</span><span class="html">script</span> <span class="attr">type</span>=”<span class="attr">text</span>/<span class="attr">javascript</span>” <span class="attr">src</span>=”<span class="attr">ckeditor</span>/<span class="attr">ckeditor</span>.<span class="attr">js</span>”<span class="kwrd">&gt;&lt;/</span><span class="html">script</span><span class="kwrd">&gt;</span> |
2、在使用编辑器的地方插入HTML控件<textarea>
|
1 |
<span class="kwrd">&lt;</span><span class="html">textarea</span> <span class="attr">id</span>=”<span class="attr">TextArea1</span>″ <span class="attr">cols</span>=”<span class="attr">20</span>″ <span class="attr">rows</span>=”<span class="attr">2</span>″ <span class="attr">class</span>=”<span class="attr">ckeditor</span>”<span class="kwrd">&gt;&lt;/</span><span class="html">textarea</span><span class="kwrd">&gt;</span> |
|
1 |
&nbsp; |
如果是ASP.NET环境，也可用服务器端控件<TextBox>
|
1 |
<span class="kwrd">&lt;</span><span class="html">asp:TextBox</span> <span class="attr">ID</span>=”<span class="attr">tbContent</span>” <span class="attr">runat</span>=”<span class="attr">server</span>” <span class="attr">TextMode</span>=”<span class="attr">MultiLine</span>” <span class="attr">class</span>=”<span class="attr">ckeditor</span>”<span class="kwrd">&gt;&lt;/</span><span class="html">asp:TextBox</span><span class="kwrd">&gt;</span> |
注意在控件中加上 class=”ckeditor” 。
3、将相应的控件替换成编辑器代码
|
1 |
<span class="kwrd">&lt;</span><span class="html">script</span> <span class="attr">type</span>=”<span class="attr">text</span>/<span class="attr">javascript</span>”<span class="kwrd">&gt;</span> |
|
1 |
&nbsp; |
|
1 |
CKEDITOR.replace(‘TextArea1′); |
|
1 |
&nbsp; |
|
1 |
<span class="rem">//如果是在ASP.NET环境下用的服务器端控件&lt;TextBox&gt; </span> |
|
1 |
&nbsp; |
|
1 |
CKEDITOR.replace(‘tbContent’); |
|
1 |
&nbsp; |
|
1 |
<span class="rem">//如果&lt;TextBox&gt;控件在母版页中，要这样写 </span> |
|
1 |
&nbsp; |
|
1 |
CKEDITOR.replace(‘<%=tbContent.ClientID.Replace(“_”,”$”) %>’); |
|
1 |
&nbsp; |
|
1 |
<span class="kwrd">&lt;/</span><span class="html">script</span><span class="kwrd">&gt;</span> |
4、配置编辑器
ckeditor的配置都集中在 ckeditor/config.js 文件中，下面是一些常用的配置参数：
|
1 |
<span class="rem">// 界面语言，默认为 'en' </span> |
|
1 |
config.language = <span class="str">'zh-cn'</span>; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">// 设置宽高 </span> |
|
1 |
config.width = 400; |
|
1 |
config.height = 400; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">// 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2' </span> |
|
1 |
config.skin = <span class="str">'v2'</span>; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">// 背景颜色 </span> |
|
1 |
config.uiColor = <span class="str">'#FFF'</span>; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">// 工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js </span> |
|
1 |
config.toolbar = <span class="str">'Basic'</span>; |
|
1 |
config.toolbar = <span class="str">'Full'</span>; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">//这将配合： </span> |
|
1 |
&nbsp; |
|
1 |
config.toolbar_Full = [ |
|
1 |
&nbsp; |
|
1 |
[<span class="str">'Source'</span>,<span class="str">'-'</span>,<span class="str">'Save'</span>,<span class="str">'NewPage'</span>,<span class="str">'Preview'</span>,<span class="str">'-'</span>,<span class="str">'Templates'</span>], |
|
1 |
&nbsp; |
|
1 |
[<span class="str">'Cut'</span>,<span class="str">'Copy'</span>,<span class="str">'Paste'</span>,<span class="str">'PasteText'</span>,<span class="str">'PasteFromWord'</span>,<span class="str">'-'</span>,<span class="str">'Print'</span>, <span class="str">'SpellChecker'</span>, <span class="str">'Scayt'</span>], |
|
1 |
&nbsp; |
|
1 |
[<span class="str">'Undo'</span>,<span class="str">'Redo'</span>,<span class="str">'-'</span>,<span class="str">'Find'</span>,<span class="str">'Replace'</span>,<span class="str">'-'</span>,<span class="str">'SelectAll'</span>,<span class="str">'RemoveFormat'</span>], |
|
1 |
&nbsp; |
|
1 |
[<span class="str">'Form'</span>, <span class="str">'Checkbox'</span>, <span class="str">'Radio'</span>, <span class="str">'TextField'</span>, <span class="str">'Textarea'</span>, <span class="str">'Select'</span>, <span class="str">'Button'</span>, <span class="str">'ImageButton'</span>, <span class="str">'HiddenField'</span>], |
|
1 |
&nbsp; |
|
1 |
<span class="str">'/'</span>, |
|
1 |
&nbsp; |
|
1 |
[<span class="str">'Bold'</span>,<span class="str">'Italic'</span>,<span class="str">'Underline'</span>,<span class="str">'Strike'</span>,<span class="str">'-'</span>,<span class="str">'Subscript'</span>,<span class="str">'Superscript'</span>], |
|
1 |
&nbsp; |
|
1 |
[<span class="str">'NumberedList'</span>,<span class="str">'BulletedList'</span>,<span class="str">'-'</span>,<span class="str">'Outdent'</span>,<span class="str">'Indent'</span>,<span class="str">'Blockquote'</span>], |
|
1 |
&nbsp; |
|
1 |
[<span class="str">'JustifyLeft'</span>,<span class="str">'JustifyCenter'</span>,<span class="str">'JustifyRight'</span>,<span class="str">'JustifyBlock'</span>], |
|
1 |
&nbsp; |
|
1 |
[<span class="str">'Link'</span>,<span class="str">'Unlink'</span>,<span class="str">'Anchor'</span>], |
|
1 |
&nbsp; |
|
1 |
[<span class="str">'Image'</span>,<span class="str">'Flash'</span>,<span class="str">'Table'</span>,<span class="str">'HorizontalRule'</span>,<span class="str">'Smiley'</span>,<span class="str">'SpecialChar'</span>,<span class="str">'PageBreak'</span>], |
|
1 |
&nbsp; |
|
1 |
<span class="str">'/'</span>, |
|
1 |
&nbsp; |
|
1 |
[<span class="str">'Styles'</span>,<span class="str">'Format'</span>,<span class="str">'Font'</span>,<span class="str">'FontSize'</span>], |
|
1 |
&nbsp; |
|
1 |
[<span class="str">'TextColor'</span>,<span class="str">'BGColor'</span>] |
|
1 |
&nbsp; |
|
1 |
]; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">//工具栏是否可以被收缩 </span> |
|
1 |
config.toolbarCanCollapse = <span class="kwrd">true</span>; |
|
1 |
&nbsp; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">//工具栏的位置 </span> |
|
1 |
config.toolbarLocation = <span class="str">'top'</span>;<span class="rem">//可选：bottom </span> |
|
1 |
&nbsp; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">//工具栏默认是否展开 </span> |
|
1 |
config.toolbarStartupExpanded = <span class="kwrd">true</span>; |
|
1 |
&nbsp; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">// 取消 "拖拽以改变尺寸"功能 plugins/resize/plugin.js </span> |
|
1 |
config.resize_enabled = <span class="kwrd">false</span>; |
|
1 |
&nbsp; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">//改变大小的最大高度 </span> |
|
1 |
config.resize_maxHeight = 3000; |
|
1 |
&nbsp; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">//改变大小的最大宽度 </span> |
|
1 |
config.resize_maxWidth = 3000; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">//改变大小的最小高度 </span> |
|
1 |
config.resize_minHeight = 250; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">//改变大小的最小宽度 </span> |
|
1 |
config.resize_minWidth = 750; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">// 当提交包含有此编辑器的表单时，是否自动更新元素内的数据 </span> |
|
1 |
config.autoUpdateElement = <span class="kwrd">true</span>; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">// 设置是使用绝对目录还是相对目录，为空为相对目录 </span> |
|
1 |
config.baseHref = <span class="str">''</span>; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">// 编辑器的z-index值 </span> |
|
1 |
config.baseFloatZIndex = 10000; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">//设置快捷键 </span> |
|
1 |
config.keystrokes = [ |
|
1 |
&nbsp; |
|
1 |
[ CKEDITOR.ALT + 121 <span class="rem">/*F10*/</span>, <span class="str">'toolbarFocus'</span> ], <span class="rem">//获取焦点 </span> |
|
1 |
&nbsp; |
|
1 |
[ CKEDITOR.ALT + 122 <span class="rem">/*F11*/</span>, <span class="str">'elementsPathFocus'</span> ], <span class="rem">//元素焦点 </span> |
|
1 |
&nbsp; |
|
1 |
[ CKEDITOR.SHIFT + 121 <span class="rem">/*F10*/</span>, <span class="str">'contextMenu'</span> ], <span class="rem">//文本菜单 </span> |
|
1 |
&nbsp; |
|
1 |
[ CKEDITOR.CTRL + 90 <span class="rem">/*Z*/</span>, <span class="str">'undo'</span> ], <span class="rem">//撤销 </span> |
|
1 |
&nbsp; |
|
1 |
[ CKEDITOR.CTRL + 89 <span class="rem">/*Y*/</span>, <span class="str">'redo'</span> ], <span class="rem">//重做 </span> |
|
1 |
&nbsp; |
|
1 |
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 <span class="rem">/*Z*/</span>, <span class="str">'redo'</span> ], <span class="rem">// </span> |
|
1 |
&nbsp; |
|
1 |
[ CKEDITOR.CTRL + 76 <span class="rem">/*L*/</span>, <span class="str">'link'</span> ], <span class="rem">//链接 </span> |
|
1 |
&nbsp; |
|
1 |
[ CKEDITOR.CTRL + 66 <span class="rem">/*B*/</span>, <span class="str">'bold'</span> ], <span class="rem">//粗体 </span> |
|
1 |
&nbsp; |
|
1 |
[ CKEDITOR.CTRL + 73 <span class="rem">/*I*/</span>, <span class="str">'italic'</span> ], <span class="rem">//斜体 </span> |
|
1 |
&nbsp; |
|
1 |
[ CKEDITOR.CTRL + 85 <span class="rem">/*U*/</span>, <span class="str">'underline'</span> ], <span class="rem">//下划线 </span> |
|
1 |
&nbsp; |
|
1 |
[ CKEDITOR.ALT + 109 <span class="rem">/*-*/</span>, <span class="str">'toolbarCollapse'</span> ] |
|
1 |
&nbsp; |
|
1 |
] |
|
1 |
&nbsp; |
|
1 |
&nbsp; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">//设置快捷键 可能与浏览器快捷键冲突 plugins/keystrokes/plugin.js. </span> |
|
1 |
&nbsp; |
|
1 |
config.blockedKeystrokes = [ |
|
1 |
&nbsp; |
|
1 |
CKEDITOR.CTRL + 66 <span class="rem">/*B*/</span>, |
|
1 |
&nbsp; |
|
1 |
CKEDITOR.CTRL + 73 <span class="rem">/*I*/</span>, |
|
1 |
&nbsp; |
|
1 |
CKEDITOR.CTRL + 85 <span class="rem">/*U*/</span> |
|
1 |
&nbsp; |
|
1 |
] |
|
1 |
&nbsp; |
|
1 |
&nbsp; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">//设置编辑内元素的背景色的取值 plugins/colorbutton/plugin.js. </span> |
|
1 |
&nbsp; |
|
1 |
config.colorButton_backStyle = { |
|
1 |
&nbsp; |
|
1 |
element : <span class="str">'span'</span>, |
|
1 |
&nbsp; |
|
1 |
styles : { <span class="str">'background-color'</span> : <span class="str">'#(color)'</span> } |
|
1 |
&nbsp; |
|
1 |
} |
|
1 |
&nbsp; |
|
1 |
&nbsp; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">//设置前景色的取值 plugins/colorbutton/plugin.js </span> |
|
1 |
&nbsp; |
|
1 |
config.colorButton_colors = <span class="str">'000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82EE, A9A9A9,FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,FFF0F5, FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF'</span>; |
|
1 |
&nbsp; |
|
1 |
&nbsp; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">//是否在选择颜色时显示"其它颜色"选项 plugins/colorbutton/plugin.js </span> |
|
1 |
&nbsp; |
|
1 |
config.colorButton_enableMore = <span class="kwrd">false</span> ; |
|
1 |
&nbsp; |
|
1 |
&nbsp; |
|
1 |
&nbsp; |
|
1 |
<span class="rem">//区块的前景色默认值设置 plugins/colorbutton/plugin.js </span> |
|
1 |
&nbsp; |
|
1 |
config.colorButton_foreStyle = { |
|
1 |
&nbsp; |
|
1 |
element : <span class="str">'span'</span>, |