CKeditor配置及使用技巧精简教程超详细Word文档下载推荐.docx

CKeditor配置及使用技巧精简教程超详细Word文档下载推荐.docx

《CKeditor配置及使用技巧精简教程超详细Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《CKeditor配置及使用技巧精简教程超详细Word文档下载推荐.docx（9页珍藏版）》请在冰豆网上搜索。

）%>

'

4、配置编辑器

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

//界面语言，默认为'

en'

config.language='

zh-cn'

;

//设置宽高

config.width=400;

config.height=400;

//编辑器样式，有三种：

kama'

（默认）、'

office2003'

、'

v2'

config.skin='

//背景颜色

config.uiColor='

#FFF'

//工具栏（基础'

Basic'

、全能'

Full'

、自定义）plugins/toolbar/plugin.js

config.toolbar='

这将配合：

config.toolbar_Full=[

['

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'

Styles'

Format'

Font'

FontSize'

TextColor'

BGColor'

]

];

//工具栏是否可以被收缩

config.toolbarCanCollapse=true;

//工具栏的位置

config.toolbarLocation='

top'

//可选：

bottom

//工具栏默认是否展开

config.toolbarStartupExpanded=true;

//取消“拖拽以改变尺寸”功能plugins/resize/plugin.js

config.resize_enabled=false;

//改变大小的最大高度

config.resize_maxHeight=3000;

//改变大小的最大宽度

config.resize_maxWidth=3000;

//改变大小的最小高度

config.resize_minHeight=250;

//改变大小的最小宽度

config.resize_minWidth=750;

//当提交包含有此编辑器的表单时，是否自动更新元素内的数据

config.autoUpdateElement=true;

//设置是使用绝对目录还是相对目录，为空为相对目录

config.baseHref='

//编辑器的z-index值

config.baseFloatZIndex=10000;

//设置快捷键

config.keystrokes=[

[CKEDITOR.ALT+121/*F10*/,'

toolbarFocus'

], 

//获取焦点

[CKEDITOR.ALT+122/*F11*/,'

elementsPathFocus'

//元素焦点

[CKEDITOR.SHIFT+121/*F10*/,'

contextMenu'

//文本菜单

[CKEDITOR.CTRL+90/*Z*/,'

undo'

//撤销

[CKEDITOR.CTRL+89/*Y*/,'

redo'

//重做

[CKEDITOR.CTRL+CKEDITOR.SHIFT+90/*Z*/,'

//

[CKEDITOR.CTRL+76/*L*/,'

link'

//链接

[CKEDITOR.CTRL+66/*B*/,'

bold'

//粗体

[CKEDITOR.CTRL+73/*I*/,'

italic'

//斜体

[CKEDITOR.CTRL+85/*U*/,'

underline'

//下划线

[CKEDITOR.ALT+109/*-*/,'

toolbarCollapse'

]

//设置快捷键可能与浏览器快捷键冲突plugins/keystrokes/plugin.js.

config.blockedKeystrokes=[

CKEDITOR.CTRL+66/*B*/,

CKEDITOR.CTRL+73/*I*/,

CKEDITOR.CTRL+85/*U*/

//设置编辑内元素的背景色的取值plugins/colorbutton/plugin.js.

config.colorButton_backStyle={

element:

'

span'

styles:

{'

background-color'

:

#（color）'

}

}

//设置前景色的取值plugins/colorbutton/plugin.js

config.colorButton_colors= 

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’

//是否在选择颜色时显示“其它颜色”选项plugins/colorbutton/plugin.js

config.colorButton_enableMore=false

//区块的前景色默认值设置plugins/colorbutton/plugin.js

config.colorButton_foreStyle={

color'

};

//所需要添加的CSS文件在此添加可使用相对路径和网站的绝对路径

config.contentsCss='

./contents.css'

//文字方向

config.contentsLangDirection='

rtl'

//从左到右

//CKeditor的配置文件若不想配置留空即可

CKEDITOR.replace（'

myfiled'

{customConfig:

./config.js'

}）;

//界面编辑框的背景色plugins/dialog/plugin.js

config.dialog_backgroundCoverColor='

#fffefd'

//可设置参考

white'

//默认

//背景的不透明度数值应该在：

0.0～1.0之间plugins/dialog/plugin.js

config.dialog_backgroundCoverOpacity=0.5

//移动或者改变元素时边框的吸附距离单位：

像素plugins/dialog/plugin.js

config.dialog_magnetDistance=20;

//是否拒绝本地拼写检查和提示默认为拒绝目前仅firefox和safari支持plugins/wysiwygarea/plugin.js.

config.disableNativeSpellChecker=true

//进行表格编辑功能如：

添加行或列目前仅firefox支持plugins/wysiwygarea/plugin.js

config.disableNativeTableHandles=true;

//默认为不开启

//是否开启图片和表格的改变大小的功能config.disableObjectResizing=true;

config.disableObjectResizing=false//默认为开启

//设置HTML文档类型

config.docType='

!

DOCTYPEhtmlPUBLIC"

-//W3C//DTDXHTML1.0Transitional//EN"

"

http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22'

//是否对编辑区域进行渲染plugins/editingblock/plugin.js

config.editingBlock=true;

//编辑器中回车产生的标签

config.enterMode=CKEDITOR.ENTER_P;

//可选：

CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV

//是否使用HTML实体进行输出plugins/entities/plugin.js

config.entities=true;

//定义更多的实体plugins/entities/plugin.js

config.entities_additional='

#39'

//其中#代替了&

//是否转换一些难以显示的字符为相应的HTML字符plugins/entities/plugin.js

config.entities_greek=true;

//是否转换一些拉丁字符为HTMLplugins/entities/plugin.js

config.entities_latin=true;

//是否转换一些特殊字符为ASCII字符如"

ThisisChinese:

汉语."

转换为"

plugins/entities/plugin.js

config.entities_processNumerical=false;

//添加新组件

config.extraPlugins='

myplugin'

//非默认仅示例

//使用搜索时的高亮色plugins/find/plugin.js

config.find_highlight={

#ff0'

#00f'

//默认的字体名plugins/font/plugin.js

config.font_defaultLabel='

Arial'

//字体编辑时的字符集可以添加常用的中文字符：

宋体、楷体、黑体等plugins/font/plugin.js

config.font_names='

Arial;

TimesNewRoman;

Verdana'

//文字的默认式样plugins/font/plugin.js

config.font_style={

element 

styles 

font-family'

#（family）'

},

overrides:

[{element:

font'

attributes:

face'

null}}]

//字体默认大小plugins/font/plugin.js

config.fontSize_defaultLabel='

12px'

//字体编辑时可选的字体大小plugins/font/plugin.js

config.fontSize_sizes='

8/8px;

9/9px;

10/10px;

11/11px;

12/12px;

14/14px;

16/16px;

18/18px;

20/20px;

22/22px;

24/24px;

26/26px;

28/28px;

36/36px;

48/48px;

72/72px'

//设置字体大小时使用的式样plugins/font/plugin.js

config.fontSize_style={

font-size'

#（size）'

size'

//是否强制复制来的内容去除格式plugins/pastetext/plugin.js

config.forcePasteAsPlainText=false//不去除

//是否强制用“&

”来代替“&

amp;

”plugins/htmldataprocessor/plugin.js

config.forceSimpleAmpersand=false;

//对address标签进行格式化plugins/format/plugin.js

config.format_address={element:

address'

{class:

styledAddress'

}};

//对DIV标签自动进行格式化plugins/format/plugin.js

config.format_div={element:

div'

normalDiv'

//对H1标签自动进行格式化plugins/format/plugin.js

config.format_h1={element:

h1'

contentTitle1'

//对H2标签自动进行格式化plugins/format/plugin.js

config.format_h2={element:

h2'

contentTitle2'

//对H3标签自动进行格式化plugins/format/plugin.js

h3'

contentTitle3'

//对H4标签自动进行格式化plugins/format/plugin.js

h4'

contentTitle4'

//对H5标签自动进行格式化plugins/format/plugin.js

h5'

contentTitle5'

//对H6标签自动进行格式化plugins/format/plugin.js

h6'

contentTitle6'

//对P标签自动进行格式化plugins/format/plugin.js

config.format_p={element:

p'

normalPara'

//对PRE标签自动进行格式化plugins/format/plugin.js

config.format_pre={element:

pre'

code'

//用分号分隔的标签名字在工具栏上显示plugins/format/plugin.js

config.format_tags='

p;

h1;

h2;

h3;

h4;

h5;

h6;

pre;

address;

//是否使用完整的html编辑模式如使用，其源码将包含：

html>

body>

/body>

/html>

等标签

config.fullPage=false;

//是否忽略段落中的空字符若不忽略则字符将以“”表示plugins/wysiwygarea/plugin.js

config.ignoreEmptyParagraph=true;

//在清除图片属性框中的链接属性时是否同时清除两边的<

a>

标签plugins/image/plugin.js

config.image_removeLinkByEmptyURL=true;

//一组用逗号分隔的标签名称，显示在左下角的层次嵌套中plugins/menu/plugin.js.

config.menu_groups='

clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea'

//显示子菜单时的延迟，单位：

msplugins/menu/plugin.js

config.menu_subMenuDelay=400;

//当执行“新建”命令时，编辑器中的内容plugins/newpage/plugin.js

config.newpage_html='

//当从word里复制文字进来时，是否进行文字的格式化去除plugins/pastefromword/plugin.js

config.pasteFromWordIgnoreFontFace=true;

//默认为忽略格式

//是否使用<

h1>

h2>

等标签修饰或者代替从word文档中粘贴过来的内容plugins/pastefromword/plugin.js

config.pasteFromWordKeepsStructure=false;

//从word中粘贴内容时是否移除格式plugins/pastefromword/plugin.js

config.pasteFromWordRemoveStyle=false;

//对应后台语言的类型来对输出的HTML内容进行格式化，默认为空

config.protectedSource.push（/<

"

?

["

s"

S]*?

/g）;

//PHPCode

config.protectedSource.push（//g）;

//ASPCode

config.protectedSource.push（/（]+>

s|"

[^"

]+>

）|（]+"

/>

）/gi）;

//ASP.NetCode

//当输入：

shift+Enter时插入的标签

config.shiftEnterMode=CKEDITOR.ENTER_P;

//可选的表情替代字符plugins/smiley/plugin.js.

config.smiley_descriptions=[

:

）'

（'

D'

P'

kiss'

];

//对应的表情图片plugins/smiley/plugin.js

config.smiley_