ckeditor的使用

一、使用方法:

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

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>



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

<textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>

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

<asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"></asp:TextBox>

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



3、將相應的控件替換成編輯器代碼

<script type="text/javascript">

? ? CKEDITOR.replace(TextArea1);

? ? //如果是在ASP.NET環境下用的服務器端控 件<TextBox>

? ? CKEDITOR.replace(tbContent);

? ? //如 果<TextBox>控件在母版頁中,要這樣寫

? ? CKEDITOR.replace(<%=tbContent.ClientID.Replace("_","$") %>);

</script>


4、配置編輯器


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

? ? // 界面語言,默認為 en

? ? config.language = zh-cn;

? ? // 設置寬高

? ? config.width = 400;

? ? config.height = 400;

? ? // 編輯器樣式,有三種:kama(默認)、office2003、v2

? ? config.skin = v2;

? ? // 背景顏色

? ? config.uiColor = #FFF;

? ? // 工具欄(基礎Basic、全能Full、自定義)plugins/toolbar/plugin.js

? ? config.toolbar = Basic;

? ? config.toolbar = Full;

? ? 這將配合:

? ? 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*/, redo ], ?//

? ? ? ? [ 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 = {

? ? ? ? element : span,

? ? ? ? styles : { color : #(color) }

? ? };

? ? //所需要添加的CSS文件 在此添加 可使用相對路徑和網站的絕對路徑

? ? config.contentsCss = ./contents.css;

? ? //文字方向

? ? config.contentsLangDirection = rtl; //從左到右

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

? ? CKEDITOR.replace( myfiled, { customConfig : ./config.js } );

? ? //界面編輯框的背景色 plugins/dialog/plugin.js

? ? config.dialog_backgroundCoverColor = #fffefd; //可設置參考

? ? config.dialog_backgroundCoverColor = 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 = <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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

? ? //默認的字體名 plugins/font/plugin.js

? ? config.font_defaultLabel = Arial;

? ? //字體編輯時的字符集 可以添加常用的中文字符:宋體、楷體、黑體等 plugins/font/plugin.js

? ? config.font_names = Arial;Times New Roman;Verdana;

? ? //文字的默認式樣 plugins/font/plugin.js

? ? config.font_style = {

? ? ? ? element ? : span,

? ? ? ? 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 = {

? ? ? ? element ? : span,

? ? ? ? styles ? : { font-size : #(size) },

? ? ? ? overrides : [ { element : font, attributes : { size : null } } ]

? ? };

? ? //是否強制復制來的內容去除格式 plugins/pastetext/plugin.js

? ? config.forcePasteAsPlainText =false //不去除

? ? //是否強制用“&”來代替“&amp;”plugins/htmldataprocessor/plugin.js

? ? config.format_p = { element : p, attributes : { class : normalPara } };

? ? //對PRE標簽自動進行格式化 plugins/format/plugin.js

? ? config.format_pre = { element : pre, attributes : { class : code } };

? ? //用分號分隔的標簽名字 在工具欄上顯示 plugins/format/plugin.js

? ? config.format_tags = p;h1;h2;h3;h4;h5;h6;pre;address;p;

? ? //是否使用完整的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;

? ? //顯示子菜單時的延遲,單位:ms plugins/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


二、 一些使用技巧


1、在頁面中即時設置編輯器


<script type="text/javascript">

? ? ? ? // 示例1:設置工具欄為基本工具欄,高度為70

? ? ? ? CKEDITOR.replace(<%=tbLink.ClientID.Replace("_","$") %>,

? ? ? ? { toolbar:Basic, height:70 });

? ? ? ? //示例2:工具欄為自定義類型

? ? ? ? CKEDITOR.replace( editor1,

? ? ? ? {

? ? ? ? ? ? ?toolbar :

? ? ? ? ? ? ?[

? ? ? ? ? ? ? ? //加粗 ? ? 斜體, ? ? 下劃線 ? ? ?穿過線 ? ? ?下標字 ? ? ? ?上標字

? ? ? ? ? ? ? ? // 樣式 ? ? ? 格式 ? ? ?字體 ? ?字體大小

? ? ? ? ? ? ? ? [Styles,Format,Font,FontSize],

? ? ? ? ? ? ? ? //文本顏色 ? ? 背景顏色

? ? ? ? ? ? ? ? [TextColor,BGColor],

? ? ? ? ? ? ? ? //全屏 ? ? ? ? ? 顯示區塊

? ? ? ? ? ? ? ? [Maximize, ShowBlocks,-]

? ? ? ? ? ? ?]

? ? ? ? }

? ? );

</script>


三、精簡ckeditor


? ? 在部署到Web服務器上時,下列文件夾和文件都可以刪除:

? ? /_samples :示例文件夾;

? ? /_source :未壓縮源程序;

? ? /lang文件夾下除 zh-cn.js、en.js 以外的文件(也可以根據需要保留其他語言文件);

? ? 根目錄下的 changes.html(更新列表),install.html(安裝指向),license.html(使用許可);

? ? /skins 目錄下不需要的皮膚,一般用V2(簡單,樸素) ,如果只保留V2則必須在config.js中指定皮膚。


四, 版本問題


? ? 在CKEditor的官方網站上下載,最要下載全部功能,最后得到的壓縮包是ckeditor_4.1.1_full.zip,如果選擇simple或者standed,可能會有些功能不能用,比如字體顏色,背景顏色,這下功能在standed版本里面就不支持。所以你會很奇怪明明設置了[TextColor,BGColor],但是文本顏色和背景顏色選項就是不顯示。


五,去掉默認的段落標記


去除CKEditor自動添加的<p></p>標簽的方法,其實很簡單,有兩種辦法:


1.在ckeditor目錄下的config.js添加以下配置參數即可:


config.enterMode = CKEDITOR.ENTER_BR: ?屏蔽換行符<br>

config.shiftEnterMode = CKEDITOR.ENTER_P:屏蔽段落<p>


2.直接更改編輯器默認模式為源代碼模式,在ckeditor目錄下的config.js添加以下配置:


config.startupMode = source;



六,和kcfinder搭配使用


默認情況下CKEditor是沒有上傳圖片功能的,可以在編輯器中粘貼圖片,這樣的話保存在數據庫中的是圖片的源文件,這很容易出現問題,即使字段是text格式的也很容易就超出最大范圍了,所以要配合kcfinder來上傳文件。一個是ck一個是kc真實一對好兄弟。


要注意如果kcfinder的路徑放在CKEditor的同一級目錄下不能這樣


config.filebrowserBrowseUrl = /kcfinder/browse.php?type=files; ?

要注意為安全考慮默認情況下是不允許上傳圖片的,在自己的源代碼中要設置可以上傳,代碼如下


session_start();

if(!empty($_SESSION[USERNAME])&&!empty($_SESSION[PASSWORD])){

$_SESSION[KCFINDER][disabled] = false;

}else{

echo "<script>top.location.href="http://xxx.com/login.php">?

}

這個就是判斷是否是登陸用戶,不是登陸用戶的話不可以使用,并且跳轉到登陸界面去登陸,網上有人說把這個放在kcfinder\config.php這個kcfinder的配置文件中我發現這個是行不通的。這樣設置之后在選擇上傳圖片的時候會有錯誤,如下

大姨嗎 特警車與轎車相撞 口交 敘利亞 日幼園舉辦赤膊跑 英文翻譯 英漢互譯 倫理電影在線觀看 看見味道的少女 3d太湖字謎 排列三走勢圖 動漫圖片 信用卡申請 個性 平安普惠 陳奕迅 三星s7 托馬斯和他的朋友們 雙魚座 人生若只如初見 yy4480 惡棍天使迅雷下載 淘寶網購物女裝 二人轉 賴漢的幸福指數 李麗珍 bbc 云南 三一重工

Copyright 三路網 Some Rights Reserved

如反饋或投訴等情況聯系:une35498#163.com

内蒙古11远5走势图