ExtJS 4.0关于Hbox布局的用法详解

之前转载了一遍博文关于extjs箱子布局攻略

里面介绍了vbox/hbox的填充模式,代码如下

在前面版本的extjs我不太清楚,使用4.1版本时,如果布局是hbox,align设置成stretch应该会纵向拉升子部件的。
我试了之后发现并没有达到应有的效果。我没弄明白为什么这样会无效,但是找到了能让它生效的办法:

EXTJS4表格的列xtype详解

概述:列类型,就是在grid组件创建的时候,指定的列xtype,我们可以将数据更好的展示和列的功能按钮扩展等。

以后台为例,需要在列末尾增加几个按钮,“完结状态“、“推荐”、”编辑“、”预览“等按钮。

如下图所示:

QQ截图20130204224655

一、列类型的主类  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改动的代码暂不显示了)

EXTJS4 grid columnprogressbar进度条

只有业余时间做新后台,进度比较慢花了几天时间主要的功能终于都做完了。

在做图片下载功能的时候,找了好多grid的进度条。有的09年的老版现在不支持4.0了,也有的是在column中renderer里defer延迟渲染上的进度条,感觉效果和调用起来不太好用,性能和效果估计也不太理想。

终于在ext官方论坛里找到一个国外大侠分享的ext4 进度条,现在发出来分享。

ProgressColumn-master

需要说明的是,它并不是从progressbar扩展而来的,而是extend: ‘Ext.grid.column.Column’

所以,请不要将Ext progressbar的属性和方法来使用它。

使用方法:

如何动态改变进度,只需在控制器的函数里面改变record的值即可,非常方便

 

效果图

QQ截图20130128231959

希望广大Ext爱好者喜欢。

EXTJS4控制器Controller详解

原文地址:http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Controller

控制器Controller通常是和application绑定在一起的。它们主要作用是监听事件(通常对view),并采取一些action。下面是我们如何创建一个Controller来管理用户:

init函数是一个特殊的方法,在你的application启动时调用。它是在application的Viewport被创建以前执行的。
init函数是通常作用就是Controller与View进行交互设置,通常用于与另一个Controller的功能 – 控制相结合。控制功能可以很容易地监听View的事件,并采取一些action和handler。如果我们要当panel渲染的时候使用Controller来通知我们,代码如下:

这里在init函数的this.control中设置了listeners,就和在View中设置是一样的效果。使用了ext4新的组建选择器,如果你还不熟悉ext4新的选择器,请看博文http://www.yuuzle.com/extjs4-and-jquery-selector-comparison.html

使用refs

新的refs系统是Controller最有用的功能。通过使用新Ext.ComponentQuery,很容易很方便的找到View中的引用。让我们来看看在现在这样一个例子:

上面的例子refs中定义了选择器“grid”引用名为“list”,在这里就可以使用getList()方法来调用选择器的结果值了

通常的getter方法

通过指定Model、Store和Controller的关系,再动态加载它们的文件位置(app/model/User.js, app/store/AllUsers.js 和 app/store/AdminUsers.js),并创建他们的getter函数。上面的例子会创建一个新的用户Model实例,并把它添加到ALLUSERS Store。在这个函数中你可以做任何事情,这里只是做了一些简单的功能演示。

EXTJS4和JQuery选择器比较

现在主流的JS框架要数ExtJs和JQuery应用的比较广泛。JQuery属于轻量级的,一般做网站应用比较常见,可见块头小的优势。ExtJs比较庞大,它除了对基本的JS语法和HTML DOM操作方式的封装之外,还提供了一套强大的UI库。在企业级B/S解决方案应用上独占优势。就单说它在原生JS的封装,DOM操作方式封装方面也足以藐视JQuery。下面我就通过对比API,体现两种框架的异曲同工之处。我们已JQuery API为主线,来看看ExtJs是否有替代的方案。

注意一点:ExtJs4.0相对上一版本改动较大,本系列文章暂时只对ExtJs4.0及以上版本提供支持。

一、选择器

1.上下文选择器对比

JS对HTML节点的操作比较频繁。所以要经常定位和查询DOM元素。我们分别看看两种框架的实现

获取Id=”div1″的DOM元素:

[JQuery]

[ExtJs]

其实Ext.get(“div1”)与$(“#div1”)还是有区别的,前者只会获取匹配的第一个元素,后者是匹配的元素集合。ExtJs的等价用法如下:

[ExtJs]

下面是一个完整的比较代码:

[ExtJs]

2.选择器语法简介

JQuery选择器支持CSS3选择符,ExtJs同样也提供支持,除此之外还支持基本的XPath语法。下面分别讲解:

1)CSS3选择符

下面列举的命令是单个形式,都可以无限组合使用。

元素选择符:
    任意元素

  • E 一个标签为 E 的元素
  • E F 所有 E 元素的分支元素中含有标签为 F 的元素
  • E > F 或 E/F 所有 E 元素的直系子元素中含有标签为 F 的元素
  • E + F 所有标签为 F 并紧随着标签为 E 的元素之后的元素
  • E ~ F 所有标签为 F 并与标签为 E 的元素是侧边的元素
属性选择符:

@ 与引号的使用是可选的。例如:div[@foo=’bar’] 也是一个有效的属性选择符。

  • E[foo] 拥有一个名为 “foo” 的属性
  • E[foo=bar] 拥有一个名为 “foo” 且值为 “bar” 的属性
  • E[foo^=bar] 拥有一个名为 “foo” 且值以 “bar” 开头的属性
  • E[foo$=bar] 拥有一个名为 “foo” 且值以 “bar” 结尾的属性 =bar] 拥有一个名为 “foo” 且值包含字串 “bar” 的属性
  • E[foo%=2] 拥有一个名为 “foo” 且值能够被2整除的属性
  • E[foo!=bar] 拥有一个名为 “foo” 且值不为 “bar” 的属性
伪类:
  • E:first-child E 元素为其父元素的第一个子元素
  • E:last-child E 元素为其父元素的最后一个子元素
  • E:nth-child(n) E 元素为其父元素的第 n 个子元素(由1开始的个数)
  • E:nth-child(odd) E 元素为其父元素的奇数个数的子元素
  • E:nth-child(even) E 元素为其父元素的偶数个数的子元素
  • E:only-child E 元素为其父元素的唯一子元素
  • E:checked E 元素为拥有一个名为“checked”且值为“true”的元素(例如:单选框或复选框)
  • E:first 结果集中第一个 E 元素
  • E:last 结果集中最后一个 E 元素
  • E:nth(n) 结果集中第 n 个 E 元素(由1开始的个数)
  • E:odd :nth-child(odd) 的简写
  • E:even :nth-child(even) 的简写
  • E:contains(foo) E 元素的 innerHTML 属性中包含“foo”字串
  • E:nodeValue(foo) E 元素包含一个 textNode 节点且 nodeValue 等于“foo”
  • E:not(S) 一个与简单选择符 S 不匹配的 E 元素
  • E:has(S) 一个包含与简单选择符 S 相匹配的分支元素的 E 元素
  • E:next(S) 下一个侧边元素为与简单选择符 S 相匹配的 E 元素
  • E:prev(S) 上一个侧边元素为与简单选择符 S 相匹配的 E 元素
CSS 值选择符:
  • E{display=none} css 的“display”属性等于“none”
  • E{display^=none} css 的“display”属性以“none”开始
  • E{display$=none} css 的“display”属性以“none”结尾 =none} css 的“display”属性包含字串“none”
  • E{display%=2} css 的“display”属性能够被2整除
  • E{display!=none} css 的“display”属性不等于“none”

2)XPath语法

下面通过几个例子来说明:

/html/body/div/div :从根目录开始找,找到正文的第二层全部DIV。

div/div :在全文匹配DIV元素,并获取包含子DIV的全部子DIV集合。

3.Ext.get和Ext.fly的区别:

通俗点讲,他们的作用都是一样的,都是获取元素。但是前者每次调用都会生成一个Ext.Element对象,开辟新的内存空间,而后者共享了一个公用的内存空间,每次调用都会覆盖前一次的信息。由于Ext.Element 比较庞大,后者的好处是可以节省资源。如果你获取的Ext.Element 不需要长期保持重复调用,用后者较为合理。下面通过一个例子来体现他们的区别:

我们发现,再次调用Ext.fly后,更新的是DIV2,而再次调用Ext.get不会影响更新的元素。

二、属性

注意:CSS类操作的几个方法相对于早期版本有变化之前是:e.addClass(“c2”)

[JQuery]

[ExtJs]

 

四、筛选

[JQuery]

[ExtJs]

 

五、文档处理

[JQuery]

[ExtJs]

 

六、CSS

[JQuery]

[ExtJs]

 

七、事件

[JQuery]

[ExtJs]

解决CKEditor在Chrome下无法打开CKFinder窗口的BUG

 

近日Google Chrome 18 更新後 , 造成許多人的CkEditor 秀抖了(Bug)

瀏覽伺服器端的檔案管理工具打不開!

什麼是CKEditor呢? 就是被大量使用在各種網站設計中(Blog/網站後台管理系統等等..)的HTML所見即所得編輯器.

使用起來方便, 人性化, 彷彿Word般的一種網頁使用的編輯器.

也許有人網站有使用CkEditor但卻不自知, 請見下面截圖

CKEditor

 

 

CKEditor所見即所得編輯器

 

如果您看到您的網站管理後台或是部落格有像上面圖片中的編輯器, 您應該就是使用CKEdirot編輯器.

不過近日Google Chrome 18 更新後, 下面這個功能您可能暫時無法使用了!
(小編 : 如果您壓根就不知道有這個功能的話, 建議您四處晃晃看看我們的部落格其它的文章好了!) 

也就是瀏覽伺服器端(File Management)的這個功能

CKEdirot

 

 

管理您網站上的圖片以及檔案

本來應該會跳出一個新視窗讓使用者管理檔案(如下圖)

CKEditor

 

 

正常的檔案管理畫面

但是現在Chrome 18只會彈出一個原始大小為"看不見"的網頁
(檔案管理視窗CKFinder : 你看不見我~你看不見我~~ o( ̄▽ ̄///   ) 

然後您就不能操作檔案管理了, 除非您想辦法在系統下方工作列中透過右鍵把該視窗放到最大才能夠使用!

但您還是不能夠縮放, 移動那個頁面!

CKEditor

 

 

就是看不到右邊那個頁面

根據小編發現的非官方解決方案就是 –

打開 CKEditor.js 檔案 , 並且找到

s.moveTo(r,q);s.resizeTo(n,o);

這一段,  並將它改成 /*s.moveTo(r,q);s.resizeTo(n,o);*/

(註解掉它,不給程式執行這個部分 , 如果您的程式碼不一樣, 就找看看moveTo 跟resizeTo)

就可以正常使用了!

Flex嵌入到HTML中切换焦点不能输入中文和遮盖DIV的问题

默认情况下如果Flash被嵌入到Web页面中,则SWF文件默认被置于所有HTML元素的顶层渲染级别的。类似在所有html元素的总父容器上一层,无法被任何html元素遮挡。

无论怎么设置flash容器和层的深度(z-index)也无济于事。

遇到这个问题我们可以在插入flash的embed或object标签中加入“wmode”属性并设置为wmode=“transparent”或”opaque” 在Flex4中默认的HTML包围容器的方式变了如代码:

 

这时我们可以在上面的params中加

 

其他情况基本相同

 

然后我们了解下这些属性:

 

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时我们手动设置输入法开启代码如下

 

OK 运行我们的页面 发现 成功了。DIV也上来了。中文输入法也能用了。高兴欢呼吧

箱子布局攻略 (HBox/VBox Layout)

一、了解箱子布局

箱子布局是一种新颖的布局方式,其布局模型可以更好地优化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配置的子项划分垂直或水平的空间。另外,容器中元素的位置和顺序也会某程度地改变。

二、API攻略

 

a.flex配置项

flex配置项不是设置在布局上,而是设置在子项 的配置项。每个子项相对的flex值都会与全体子项flex累加的值相比较,根据此结果,处理每个子项的flex最后是多少。若不设置子项的flex,表示不对子项作自适应尺寸的处理,相当于flex = 0的子项或flex = undefined的时候,表示子项不会自伸缩处理,而采用最初的尺寸。

如下例:

 

[javascript] view plaincopy

  1. {
  2.     layoutConfig: {
  3.         padding:’5′,
  4.         align:’top’
  5.     },
  6.     defaults:{margins:’0 5 0 0′},
  7.     items:[{
  8.         xtype:’button’,
  9.         text: ‘Button 1’,
  10.         flex:1
  11.     },{
  12.         xtype:’button’,
  13.         text: ‘Button 2’,
  14.         flex:1
  15.     },{
  16.         xtype:’button’,
  17.         text: ‘Button 3’,
  18.         flex:1
  19.     },{
  20.         xtype:’button’,
  21.         text: ‘Button 4’,
  22.         flex:3,
  23.         margins:’0′
  24.     }]
  25. }

 

该配置项效果如下图:

如果子项都设置相同flex值,那就意味着全体子项作相同的处理。

技巧:我们可以只让一个panel设定flex,便可以作为填充空白的spacer:

 

[javascript] view plaincopy

  1. {
  2.     layoutConfig: {
  3.         padding:’5′,
  4.         align:’top’
  5.     },
  6.     defaults:{margins:’0 5 0 0′},
  7.     items:[{
  8.         xtype:’button’,
  9.         text: ‘Button 1’
  10.     },{
  11.         xtype:’spacer’,
  12.         flex:1
  13.     },{
  14.         xtype:’button’,
  15.         text: ‘Button 2’
  16.     },{
  17.         xtype:’button’,
  18.         text: ‘Button 3’
  19.     },{
  20.         xtype:’button’,
  21.         text: ‘Button 4’,
  22.         margins:’0′
  23.     }]
  24. }

效果如下:

 

flex的文档也不是说得太清楚,不过我们可以多参考官方例子是怎么使用flex的。一旦你明白了flex这个概念之后,它会非常灵活地进行布局。

b.如何对齐align & pack

当然我们可以Vbox布局中内嵌hbox布局,或者hbox中内嵌vbox,HBox和VBox之间是可以允许嵌套布局的,但实际不必如此手动去做, Ext为我们提供了“对齐align/pack”的这一对方向各异的调整配置,代替了上述“内嵌”的这一种稍微让人感觉别扭。容器中每一个子项都遵循用户指定的align/pack对齐方式。一般设置的地方是在容器的layoutConfig配置项对象中,如下面某一个容器的代码片断:

 

[javascript] view plaincopy

  1. layout:'hbox',  
  2. layoutConfig: {  
  3.     align : 'stretch',  
  4.     pack  : 'start',  
  5. },  
  6. items: [  
  7.     {html:'panel 1', flex:1},  
  8.     {html:'panel 2', width:150},  
  9.     {html:'panel 3', flex:2}  
  10. ]  

 

对于垂直布局的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又是什么用法呢?一图胜千言,我们看看下面这张图(点击图片运行例子以了解更多的适用情形):

v

c.设置内外边距

BoxLayout可设置外边距(margins)。关于defaultMargins,就是如果不制定每个子项的margins 属性,那么就会使用默认的margins。规定defaultMargins的格式如下:

 

[javascript] view plaincopy

  1. {
  2.     top: (top margin),
  3.     right: (right margin),
  4.     bottom: (bottom margin),
  5.     left: (left margin)
  6. }

 

默认为{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越来越备受推崇,必须把它弄懂才行。学习游泳最好的方法就是跳进水里大胆试试,把上面的例子和官方源码当作你的湖吧!

四、延伸阅读:

EXTJS VType 使用范例

 

ckeditor的详细配置

一、使用方法:

 

1、在页面<head>中引入ckeditor核心文件ckeditor.js

 

2、在使用编辑器的地方插入HTML控件<textarea>

 

如果是ASP.NET环境,也可用服务器端控件<TextBox>

注意在控件中加上 class=”ckeditor” 。

 

3、将相应的控件替换成编辑器代码

 

4、配置编辑器

 

    ckeditor的配置都集中在 ckeditor/config.js 文件中,下面是一些常用的配置参数: