CKEditor_3.6.2配置及自定義使用
打开ckeditor下的config.js文件，修改配置，如不修改，將默認顯示所有工具條
相關配置
如果要上传图片，还有引入CKFinder.dll
然后再页面引入js文件：ckeditor.js和ckfinder.js
当然，以上的至少简单的功能。
然后再页面引入js文件：ckeditor.js和ckfinder.js
当然，以上的至少简单的功能。
配置中文解释代码
AutoDetectLanguage=true/false 自动检测语言
BaseHref=”” 相对链接的基地址
ContentLangDirection=”ltr/rtl” 默认文字方向
ContextMenu=字符串数组,右键菜单的内容
CustomConfigurationsPath=”” 自定义配置文件路径和名称
Debug=true/false 是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容
DefaultLanguage=”” 缺省语言
EditorAreaCss=”” 编辑区的样式表文件
EnableSourceXHTML=true/false 为TRUE时,当由可视化界面切换到代码页时,把HTML处理成XHTML
EnableXHTML=true/false 是否允许使用XHTML取代HTML
FillEmptyBlocks=true/false 使用这个功能,可以将空的块级元素用空格来替代
FontColors=”” 设置显示颜色拾取器时文字颜色列表
FontFormats=”” 设置显示在文字格式列表中的命名
FontNames=”” 字体列表中的字体名
FontSizes=”” 字体大小中的字号列表
ForcePasteAsPlainText=true/false 强制粘贴为纯文本
ForceSimpleAmpersand=true/false 是否不把&符号转换为XML实体
FormatIndentator=”” 当在源码格式下缩进代码使用的字符
FormatOutput=true/false 当输出内容时是否自动格式化代码
FormatSource=true/false 在切换到代码视图时是否自动格式化代码
FullPage=true/false 是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容
GeckoUseSPAN=true/false 是否允许SPAN标记代替B,I,U标记
IeSpellDownloadUrl=””下载拼写检查器的网址
ImageBrowser=true/false 是否允许浏览服务器功能
ImageBrowserURL=”” 浏览服务器时运行的URL
ImageBrowserWindowHeight=”” 图像浏览器窗口高度
ImageBrowserWindowWidth=”” 图像浏览器窗口宽度
LinkBrowser=true/false 是否允许在插入链接时浏览服务器
LinkBrowserURL=”” 插入链接时浏览服务器的URL
LinkBrowserWindowHeight=””链接目标浏览器窗口高度
LinkBrowserWindowWidth=””链接目标浏览器窗口宽度
Plugins=object 注册插件
PluginsPath=”” 插件文件夹
ShowBorders=true/false 合并边框
SkinPath=”” 皮肤文件夹位置
SmileyColumns=12 图符窗列数
SmileyImages=字符数组 图符窗中图片文件名数组
SmileyPath=”” 图符文件夹路径
SmileyWindowHeight 图符窗口高度
SmileyWindowWidth 图符窗口宽度
SpellChecker=”ieSpell/Spellerpages” 设置拼写检查器
StartupFocus=true/false 开启时FOCUS到编辑器
StylesXmlPath=”” 设置定义CSS样式列表的XML文件的位置
TabSpaces=4 TAB键产生的空格字符数
ToolBarCanCollapse=true/false 是否允许展开/折叠工具栏
ToolbarSets=object 允许使用TOOLBAR集合
ToolbarStartExpanded=true/false 开启是TOOLBAR是否展开
UseBROnCarriageReturn=true/false 当回车时是产生BR标记还是P或者DIV标记
- 這是配置文件的屬性，只是書面上的意思，具體的時候，格式是這樣，如FontNames意思是，字体列表中的字体名，在配置文件里的書寫格式卻是這樣，font_names
自定义工具条代码
Source=”页面源码”
DocProps=”页面属性”
Save＝”保存”
NewPage=”新建”
Preview=”预览”
Templates=”模版”
Cut=”剪切”
Copy=”拷贝”
Paste=”粘贴”
PasteText=”粘贴为无格式的文本”
PasteWord=”粘贴Word格式”
Print=”打印”
SpellCheck=”拼写检查,要装插件”
Undo=”撤消”
Redo=”重做”
Find=”查找”
Replace=”替换”
SelectAll=”全选”
RemoveFormat=”清除格式(清除现在文本的格式)”
Form=”表单域”
Checkbox=”复选”
Radio=”单选”
TextField=”单行文本”
Textarea=”多行文本”
Select=”列表”
Button=”按钮”
ImageButton=”图像区域”
HiddenField=”隐藏域”
Bold=”加粗”
Italic=”倾斜”
Underline=”下划线”
StrikeThrough=”删除线”
Subscript=”下标”
Superscript=”上标”
OrderedList=”删除/插入项目列表”
UnorderedList=”删除/插入项目符号”
Outdent=”减少缩进”
Indent=”增加缩进”
JustifyLeft=”左对齐”
JustifyCenter=”居中对齐”
JustifyRight=”右对齐”
JustifyFull=”分散对齐”
Link=”链接”
Unlink=”删除链接”
Anchor=”插入/删除锚点”
Image=”上传图片”
Flash=”上传动画”
Table=”插入表格”
Rule=”插入水平线”
Smiley=”插入表情”
SpecialChar=”插入特殊字符”
PageBreak=”插入分页符”
Style=”样式”
FontFormat=”格式”
FontName=”字体”
FontSize=”大小”
TextColor=”字体颜色”
BGColor=”背景色”
FitWindow=”全屏编辑”
About=”关于我们”
釋義：
"[]"表示一个工具条,破折号("-")是作为toolbar集合的分隔符，("/")表示这个斜线是用来给它所在的地方强制换行的，这样这个toolbar bands就会在新的一行中出现而不是跟住之前的toolbar bloos 。自己可以根據自己的意願增刪"[]"里的工具條。
自定義配置：
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
}
這是默認的設置，自己可以在裏面修改。
- 自定義表情
- 把文件下的plugins/smiley/images默認表情刪除，然後添加自己的表情。
- images是默認是表情文件夾，當然，自己可以添加一個文件夾，然後再在config.js里配置,如： config.smiley_path = '/网站文件名称/ckeditor/plugins/smiley/images/（子文件夹名/）';
- 以下這個Demo的自定義表情，我是使用默認的文件夾的，即上面1的表述。
Demo：
CKEDITOR.editorConfig = function( config )
{
config.language = 'zh-cn';//簡體中文
config.uiColor = '#336699';//界面顏色
config.height = 300; //高度
config.width = 600;//寬度
config.font_names = '宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;' + config.font_names;//這是基於默認字體的增加
//自定義使用表情
config.smiley_images = ['1.gif', '2.gif', '3.gif', '4.gif', '5.gif', '6.gif', '7.gif', '8.gif', '9.gif', '10.gif', '11.gif', '12.gif', '13.gif', '14.gif', '15.gif', '16.gif', '17.gif', '18.gif', '19.gif', '20.gif', '21.gif', '22.gif', '23.gif', '24.gif', '25.gif', '26.gif', '27.gif', '28.gif', '29.gif', '30.gif', '31.gif', '32.gif', '33.gif', '34.gif', '35.gif', '36.gif', '37.gif', '38.gif', '39.gif', '40.gif', '41.gif', '42.gif', '43.gif', '44.gif', '45.gif', '46.gif', '47.gif'];
//以上的圖片格式，并不要根據123這樣的命名，這個Demo的表情是固有的命名。
config.smiley_descriptions = ['发呆', '调皮', '色', '撇嘴', '惊讶', '害羞', '尴尬', '睡', '大哭', '难过', '呲牙', '大款', '流泪', '闭嘴', '发怒', '微笑', '慌忙', '阴险', '偷笑', '可爱', '流汗', '白眼', '亲亲', '憨笑', '委屈', '吐', '抓狂', '酷', '冷汗', '咒骂', '鼓掌', '右哼哼', '坏笑', '奋斗', '糗大了', '抠鼻', '可怜', '左哼哼', '擦汗', '哈欠', '晕', '疑问', '鄙视', '再见', '委屈', '怎么可能！', '飞吻']//對應數組里圖片的描述
//工具栏
config.toolbar =
[
['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'],
['Maximize', 'ShowBlocks', '-', 'Source', '-', 'Undo', 'Redo']
];
// 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路径选择要正确。 (圖片上傳)
（1）
config.filebrowserBrowseUrl = '/ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹
config.filebrowserImageBrowseUrl = '/ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹
config.filebrowserFlashBrowseUrl = '/ckfinder/ckfinder.html?Type=Flash'; //上传Flash时浏览服务文件夹
config.filebrowserUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上传文件按钮(标签)
config.filebrowserImageUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上传图片按钮(标签)
config.filebrowserFlashUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; //上传Flash按钮(标签)
换成（2）比较好，因为可能是（1）的路径前面多加了“/”,以至于在图片路径不对，上传不了图片。但是（1）在MVC里面可以上传，这个我不明白。
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
（2）
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
}
aspx頁面
注意：要注意頁面的樣式，否則CKEditor會亂七八糟。
（
我遇到的問題是：这是我写的样式，#main{} #main span{}。结果是，多了后一个样式就不行，这个问题，我不是很了解。
）
- <td>
<textarea style="width:575px; height:200px;" ID="txtSource"></textarea><script type="text/javascript">//关键！CKEDITOR.replace('txtSource', { skin: 'kama' }); //應用某種主題</script><td>
- <td>
<textarea style="width:575px; height:200px;" ID="txtSource" class="ckeditor"></textarea><td>
另外也可以用服務器控件：<asp:TextBox ID="TextBox1" runat="server" CssClass="ckeditor" TextMode="MultiLine"></asp:TextBox>
去掉aspx安全验证的方法
在web.config文件里
的<system.web>
段里加上
<!—解除验证-->
<httpRuntime requestValidationMode="2.0"/>
<pages validateRequest="false"></pages>
要过滤掉javascript的关键字，以避免受到攻击如，把接收内容的conment变量替换掉一些关键字。
conment.Replace("script","******");
上传到数据库的时候，要记得对内容进行编码
Server.HtmlEncode(this.TxtAddress.Text);
而从数据库取出来的时候
---我试了一下，发现腾讯就是这样做的
。。。。未完待续，问题不是一般的多。如何控制上传图片的大小，如何一次上传多张图片，如何给上传的图片重新以时间命名，这个我搞不懂。