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:TextBoxID="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';
二、 一些使用技巧1、在頁面中即時設置編輯器<script type="text/javascript">//示例1:設置工具欄為基本工具欄,高度為70CKEDITOR.replace('<%=tbLink.ClientID.Replace("_","$") %>',{ toolbar:'Basic', height:70 });//示例2:工具欄為自定義類型CKEDITOR.replace( 'editor1',{toolbar :[//加粗 斜體, 下劃線 穿過線 下標字 上標字['Bold','Italic','Underline','Strike','Subscript','Superscript'],//數字列表 實體列表 減小縮進 增大縮進['NumberedList','BulletedList','-','Outdent','Indent'],//左對齊 居中對齊 右對齊 兩端對齊['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],//超鏈接 取消超鏈接 錨點['Link','Unlink','Anchor'],//圖片 flash 表格 水平線 表情 特殊字符 分頁符['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],'/',//樣式 格式 字體 字體大小['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(使用許可);