(ckeditor+ckfinder用法)Jquery,js獲取ckeditor值

曾祥展

CKEditor 3.3.1 和 ckfinder 2.0 配置 with jQuery 1.42 請看33樓!

 

CKEditor 3.2 在 asp.net 下進行配置的方法:

官方網站:CKEditor        CKFinder

1、CKEditor 不具備上傳功能,需要集成 CKFinder 才能實現上傳功能。
     下載 ckeditor 並解壓到 ckeditor(在根目錄下);
     下載 ckfinder 並解壓到 ckfinder (在根目錄下);
      兩者處於同級目錄下;
   
      把ckfinder目錄裏的bin下的CKFinder.dll拷貝到網站目錄bin下,引用就行了。

2、在 aspx 頁面或者 master 模板頁 <head> 標籤中載入 ckeditor.js:
<scripttype="text/javascript"src="ckeditor/ckeditor.js"></script>

   在<body>標籤中使用ckeditor:
<asp:TextBox ID="Content" runat="server" TextMode="MultiLine" Height="250px" Width="500px"></asp:TextBox>

與其他 .net 控件使用方法相同,設置 Text='<%# Bind("info") %>' 可以方便與數據源進行交互。

下面這段必須放在上面代碼的後面,否則初始化編輯器時會錯誤:
<script type="text/javascript">// CKEDITOR.replace('<%=Content.ClientID%>', {});
vareditor = CKEDITOR.replace('<%=Content.ClientID%>');
CKFinder.SetupCKEditor(editor, '/ckfinder/');  //結合上傳控件
</script>

 

3. ckeditor裏面的config.js 配置

CKEDITOR.editorConfig = function( config )
{
     config.language = 'zh-cn';//中文
    
config.uiColor = '#BFEE62';//編輯器顏色
     config.font_names = '宋體;楷體_GB2312;新宋體;黑體;隸書;幼圓;微軟雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';

    config.toolbar_Full =
    [
        ['Source','-','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','CreateDiv'],
        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
        ['Link','Unlink','Anchor'],
          ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
        '/',
        ['Styles','Format','Font','FontSize'],
        ['TextColor','BGColor'],
        ['Maximize', 'ShowBlocks','-','About']
    ];

    config.toolbar_Basic =
    [
        ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
    ];

config.width =771;//寬度

config.height = 250;//高度
 
};

配置完成後基本可以了,但是運行點擊圖片管理裏面的瀏覽服務器按鈕… 出現以下提示:
 曾祥展

解決方法:
ckfinder 裏面的config.ascx的配置:

public override boolCheckAuthentication()
{
    return true;//(增加這句,如果你需要設置打開ckfinder訪問權限可以在這裏設置哦,我這裏就不考慮權限了直接打開。)
        // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
        // user logs on your system.

        //return false;//(註釋這句,默認這句未被註釋)         
}

 

 

4

爲了去掉這個水印也簡單 分析

曾祥展

解決方法:
原始加密js代碼:

xx=’xxxx...’

qo='學無止境'  不能爲空就行了,否則上傳按鈕變爲不可用 哈哈 搞掂!/*en.call(window,qo);*/

曾祥展
沒有水印了,爽歪歪,最後來個圖,上傳成功 ok

曾祥展

 

 

 

注意:運行環境要在IIS下哦,不然有些頁面無法顯示的

 

插外話,昨天研究fck時,提示:

曾祥展

解決:目錄不能有中文,不然加載fck編輯器時無法運行,因爲有中文,URL沒有轉碼導致解析拋出異常,換英文名就行了

 

-----------------------------------------------------------

若然你想用html控件

 

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

在頁面內註冊編輯器,並賦值給一個變量,以便引用。

var editor=CKEDITOR.replace( 'editor1' );

然後使用如下語句就可以取得編輯器內的值。

editor.document.getBody().getText(); //取得純文本

editor.document.getBody().getHtml(); //取得html文本

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章