CKEditor_3.6.2配置及自定義使用

2011-11-23 15:19

 

打开ckeditor下的config.js文件，修改配置，如不修改，將默認顯示所有工具條

相關配置

如果要上传图片，还有引入CKFinder.dll
然后再页面引入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';

}

 

這是默認的設置，自己可以在裏面修改。

• 自定義表情

1. 把文件下的plugins/smiley/images默認表情刪除，然後添加自己的表情。
   
2. 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';

}  

aspx頁面

注意：要注意頁面的樣式，否則CKEditor會亂七八糟。

（

我遇到的問題是：这是我写的样式，#main{} #main span{}。结果是，多了后一个样式就不行，这个问题，我不是很了解。

）

1. <td>
               <textarea style="575px; height:200px;" ID="txtSource"></textarea> 
        <script type="text/javascript">
            //关键！
            CKEDITOR.replace('txtSource', { skin: 'kama' }); //應用某種主題
        </script>
   <td>
2. <td>
               <textarea style="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);

   而从数据库取出来的时候

   现在，自己下了一个版本，几乎全部配置好了。