如何使用CKEditor在EEP頁面
1.先在專案中加入CKEditor
2.在Head載入ckeditor.js
3.將原先jqDataForm當中的textarea欄位予以隱藏。
4.在jqDataform後面手動貼入一個Textarea(要加class=’ckeditor’)。
5.在body後面加入ckeditor置換textarea的指令。
6.在head中增加ckeditor與jqDataform欄位做資料交換的function。
7.將function設定在jqDataform的對應屬性，讓資料可於正確時機自動交換。
前端Source Code :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="F_KM.aspx.cs" Inherits="Template_JQuerySingle1" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../ckeditorFull/ckeditor.js"></script>
<script type="text/javascript">
function downloadScript(val, rowData) {
return '<a href="../handler/JqFileHandler.ashx?File=../Files/KM/' + val + '">' + val + '</a>';
}
function downloadScript1(val, rowData) {
return '<a href="../handler/JqFileHandler.ashx?File=../Files/KMFB/' + val + '">' + val + '</a>';
}
function myFunction() {
CKEDITOR.instances['editor12'].setData(decodeURIComponent($('#dataFormMasterKM').val()));
}
function myFunctionA() {
$('#dataFormMasterKM').val(encodeURIComponent(CKEDITOR.instances['editor12'].getData()));
}
function myFunctionD() {
CKEDITOR.instances['editor13'].setData(decodeURIComponent($('#dataFormDetailKM').val()));
}
function myFunctionDA() {
$('#dataFormDetailKM').val(encodeURIComponent(CKEDITOR.instances['editor13'].getData()));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<JQTools:JQScriptManager ID="JQScriptManager1" runat="server" />
<JQTools:JQDataGrid ID="dataGridView" data-options="pagination:true,view:commandview" RemoteName="SeKM.T_KM" runat="server" AutoApply="True"
DataMember="T_KM" Pagination="True" QueryTitle="Query" EditDialogID="JQDialog1"
Title="知識管理" AllowAdd="True" AllowDelete="True" AllowUpdate="True" AlwaysClose="False" BufferView="False" CheckOnSelect="True" ColumnsHibeable="False" DeleteCommandVisible="True" DuplicateCheck="False" EditMode="Dialog" EditOnEnter="True" InsertCommandVisible="True" MultiSelect="False" NotInitGrid="False" PageList="10,20,30,40,50" PageSize="10" QueryAutoColumn="False" QueryLeft="" QueryMode="Window" QueryTop="" RecordLock="False" RecordLockMode="None" TotalCaption="Total:" UpdateCommandVisible="True" ViewCommandVisible="True">
<Columns>
<JQTools:JQGridColumn Alignment="left" Caption="知識編號" Editor="text" FieldName="KMBH" Format="" MaxLength="50" Visible="true" Width="120" FormatScript="" />
<JQTools:JQGridColumn Alignment="left" Caption="知識主題" Editor="text" FieldName="Subject" Format="" MaxLength="16" Visible="true" Width="120" />
<JQTools:JQGridColumn Alignment="left" Caption="附件檔名" Editor="infofileupload" FieldName="FJMC" Format="" MaxLength="50" Visible="true" Width="120" FormatScript="downloadScript" />
<JQTools:JQGridColumn Alignment="left" Caption="關鍵字" Editor="text" FieldName="Keyword" Format="" MaxLength="100" Visible="true" Width="120" />
<JQTools:JQGridColumn Alignment="left" Caption="用戶編號" Editor="text" FieldName="USERID" Format="" MaxLength="20" Visible="true" Width="120" />
</Columns>
<TooItems>
<JQTools:JQToolItem Icon="icon-add" ItemType="easyui-linkbutton"
OnClick="insertItem" Text="新增" />
<JQTools:JQToolItem Icon="icon-save" ItemType="easyui-linkbutton" OnClick="apply"
Text="存檔" />
<JQTools:JQToolItem Icon="icon-undo" ItemType="easyui-linkbutton" OnClick="cancel"
Text="取消" />
<JQTools:JQToolItem Icon="icon-search" ItemType="easyui-linkbutton"
OnClick="openQuery" Text="查詢" />
</TooItems>
<QueryColumns>
</QueryColumns>
</JQTools:JQDataGrid>
<JQTools:JQDialog ID="JQDialog1" runat="server" BindingObjectID="dataFormMaster" Title="知識管理">
<JQTools:JQDataForm ID="dataFormMaster" runat="server" DataMember="T_KM" HorizontalColumnsCount="2" RemoteName="SeKM.T_KM" AlwaysReadOnly="False" Closed="False" ContinueAdd="False" disapply="False" DivFramed="False" DuplicateCheck="False" HorizontalGap="0" IsAutoPageClose="False" IsAutoPause="False" IsAutoSubmit="False" IsNotifyOFF="False" IsRejectNotify="False" IsRejectON="False" IsShowFlowIcon="False" ShowApplyButton="False" ValidateStyle="Hint" VerticalGap="0" OnLoadSuccess="myFunction" OnApply="myFunctionA" >
<Columns>
<JQTools:JQFormColumn Alignment="left" Caption="知識編號" Editor="text" FieldName="KMBH" Format="" maxlength="50" Width="180" ReadOnly="True" NewRow="False" />
<JQTools:JQFormColumn Alignment="left" Caption="知識主題" Editor="text" FieldName="Subject" maxlength="0" ReadOnly="False" Width="280" NewRow="True" />
<JQTools:JQFormColumn Alignment="left" Caption="附件檔名" Editor="infofileupload" FieldName="FJMC" Format="" maxlength="50" Width="180" NewRow="True" EditorOptions="filter:'rar|zip|7z|doc|docx',isAutoNum:true,upLoadFolder:'Files\\KM',showButton:true,showLocalFile:false,fileSizeLimited:'500'" />
<JQTools:JQFormColumn Alignment="left" Caption="關鍵字" Editor="infooptions" FieldName="Keyword" Format="" maxlength="100" Width="180" NewRow="True" EditorOptions="title:'關鍵字選擇',panelWidth:300,remoteName:'SeBasic.T_Keyword',tableName:'T_Keyword',valueField:'F_Keyword',textField:'F_Keyword',columnCount:2,multiSelect:true,openDialog:true,selectAll:false,selectOnly:false,items:[]" Visible="True" />
<JQTools:JQFormColumn Alignment="left" Caption="知識內容" Editor="textarea" EditorOptions="height:200" FieldName="KM" Format="" maxlength="0" NewRow="True" Visible="False" Width="360" ReadOnly="False" RowSpan="1" Span="1" />
</Columns>
</JQTools:JQDataForm>
<textarea id="editor12" class="ckeditor" cols="80" rows="10" name="editor12"></textarea>
<JQTools:JQDataGrid ID="dataGridDetail" runat="server" AutoApply="False" DataMember="T_KMFB" EditDialogID="JQDialog2" Pagination="False" ParentObjectID="dataFormMaster" RemoteName="SeKM.T_KM" Title="知識補充明細" AllowAdd="True" AllowDelete="True" AllowUpdate="True" AlwaysClose="False" BufferView="False" CheckOnSelect="True" ColumnsHibeable="False" DeleteCommandVisible="True" DuplicateCheck="False" EditMode="Dialog" EditOnEnter="True" InsertCommandVisible="True" MultiSelect="False" NotInitGrid="False" PageList="10,20,30,40,50" PageSize="10" QueryAutoColumn="False" QueryLeft="" QueryMode="Window" QueryTitle="Query" QueryTop="" RecordLock="False" RecordLockMode="None" TotalCaption="Total:" UpdateCommandVisible="True" ViewCommandVisible="True" >
<Columns>
<JQTools:JQGridColumn Alignment="left" Caption="知識編號" Editor="text" FieldName="KMBH" Width="100" Visible="False" MaxLength="50" />
<JQTools:JQGridColumn Alignment="left" Caption="序號" Editor="text" FieldName="seq" Width="100" MaxLength="50" />
<JQTools:JQGridColumn Alignment="left" Caption="補充項目" Editor="text" FieldName="FBSubject" Width="100" MaxLength="50" />
<JQTools:JQGridColumn Alignment="left" Caption="補充附件" Editor="text" FieldName="FJMC" Width="100" FormatScript="downloadScript1" MaxLength="50" />
<JQTools:JQGridColumn Alignment="left" Caption="補充者" Editor="text" FieldName="FBUSERID" Frozen="False" IsNvarChar="False" MaxLength="20" QueryCondition="" ReadOnly="False" Sortable="False" Visible="True" Width="40">
</JQTools:JQGridColumn>
<JQTools:JQGridColumn Alignment="left" Caption="KM" Editor="text" FieldName="KM" Frozen="False" IsNvarChar="False" MaxLength="0" QueryCondition="" ReadOnly="False" Sortable="False" Visible="False" Width="80">
</JQTools:JQGridColumn>
</Columns>
<RelationColumns>
<JQTools:JQRelationColumn FieldName="KMBH" ParentFieldName="KMBH" />
</RelationColumns>
<TooItems>
<JQTools:JQToolItem Icon="icon-add" ItemType="easyui-linkbutton" OnClick="insertItem" Text="新增" />
<JQTools:JQToolItem Icon="icon-edit" ItemType="easyui-linkbutton" OnClick="updateItem" Text="修改" />
<JQTools:JQToolItem Icon="icon-remove" ItemType="easyui-linkbutton" OnClick="deleteItem" Text="刪除" />
</TooItems>
</JQTools:JQDataGrid>
<JQTools:JQDialog ID="JQDialog2" runat="server" BindingObjectID="dataFormDetail" Title="知識補充">
<JQTools:JQDataForm ID="dataFormDetail" runat="server" ParentObjectID="dataFormMaster" DataMember="T_KMFB" HorizontalColumnsCount="2" RemoteName="SeKM.T_KM" AlwaysReadOnly="False" Closed="False" ContinueAdd="False" disapply="False" DivFramed="False" DuplicateCheck="False" HorizontalGap="0" IsAutoPageClose="False" IsAutoPause="False" IsAutoSubmit="False" IsNotifyOFF="False" IsRejectNotify="False" IsRejectON="False" IsShowFlowIcon="False" ShowApplyButton="False" ValidateStyle="Hint" VerticalGap="0" OnApply="myFunctionDA" OnLoadSuccess="myFunctionD" >
<Columns>
<JQTools:JQFormColumn Alignment="left" Caption="知識編號" Editor="text" FieldName="KMBH" Width="180" Visible="False" MaxLength="50" />
<JQTools:JQFormColumn Alignment="left" Caption="序號" Editor="text" FieldName="seq" Width="180" ReadOnly="True" MaxLength="50" NewRow="False" />
<JQTools:JQFormColumn Alignment="left" Caption="補充項目" Editor="text" FieldName="FBSubject" Width="180" NewRow="True" RowSpan="1" Span="1" MaxLength="50" />
<JQTools:JQFormColumn Alignment="left" Caption="補充附件" Editor="infofileupload" FieldName="FJMC" Width="180" NewRow="False" EditorOptions="filter:'rar|zip|7z|doc|docx',isAutoNum:true,upLoadFolder:'Files\\KMFB',showButton:true,showLocalFile:false,fileSizeLimited:'500'" MaxLength="50" Visible="True" />
<JQTools:JQFormColumn Alignment="left" Caption="補充知識" Editor="text" FieldName="KM" MaxLength="16" NewRow="False" ReadOnly="False" RowSpan="1" Span="1" Visible="False" Width="180" />
</Columns>
<RelationColumns>
<JQTools:JQRelationColumn FieldName="KMBH" ParentFieldName="KMBH" />
</RelationColumns>
</JQTools:JQDataForm>
<textarea id="editor13" class="ckeditor" cols="80" rows="10" name="editor13"></textarea>
<JQTools:JQAutoSeq ID="JQAutoSeq1" runat="server" BindingObjectID="dataFormDetail" FieldName="seq" />
</JQTools:JQDialog>
<JQTools:JQDefault ID="defaultMaster" runat="server" BindingObjectID="dataFormMaster" EnableTheming="True">
<Columns>
<JQTools:JQDefaultColumn CarryOn="False" DefaultValue="自動編號" FieldName="KMBH" RemoteMethod="True" />
</Columns>
</JQTools:JQDefault>
<JQTools:JQValidate ID="validateMaster" runat="server" BindingObjectID="dataFormMaster" BorderStyle="NotSet" ClientIDMode="Inherit" Enabled="True" EnableTheming="True" EnableViewState="True" ViewStateMode="Inherit">
</JQTools:JQValidate>
<JQTools:JQDefault ID="defaultDetail" runat="server" BindingObjectID="dataFormDetail" BorderStyle="NotSet" ClientIDMode="Inherit" Enabled="True" EnableTheming="True" EnableViewState="True" ViewStateMode="Inherit">
</JQTools:JQDefault>
<JQTools:JQValidate ID="validateDetail" runat="server" BindingObjectID="dataFormDetail" BorderStyle="NotSet" ClientIDMode="Inherit" Enabled="True" EnableTheming="True" EnableViewState="True" ViewStateMode="Inherit">
<Columns>
<JQTools:JQValidateColumn CheckNull="True" FieldName="KMBH" RemoteMethod="True" ValidateType="None" />
</Columns>
</JQTools:JQValidate>
</JQTools:JQDialog>
</div>
</form>
</body>
<script type="text/javascript">
CKEDITOR.replace('editor12');
CKEDITOR.replace('editor13');
</script>
</html>
