1. 程式人生 > >富文字編輯器CKEditor的使用及同步問題

富文字編輯器CKEditor的使用及同步問題

關於富文字編輯器,我個人使用的是CKEditor,感覺使用起來挺方便,下面就來看看CKEditor的使用。

然後我們把需要的檔案拖入我們的程式中,在頭部將你的ckeditor.js匯入

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

然後,拖入一個textbox,設定相關程式碼
  <asp:TextBox ID="txt_postContent" runat="server" class="ckeditor" TextMode="MultiLine"></asp:TextBox>
  <script type="text/javascript">
      CKEDITOR.replace('txt_postContent');
                  
  </script

這樣,我們的富文字編輯視窗就完成了。

CKEditor還有很多樣式,在這裡就不一一說了,大家可以去網上搜一下,有很多介紹的。

下面來討論一下CKEditor不能及時同步的問題,新版的CKEditor取消的自動同步的功能,需要手動進行同步,若不同步的話,你的textbox的內容為空。

我們可以通過以下程式碼來解決CKEditor的同步問題:

首先在他的head中新增js程式碼:

<script type="text/javascript">
        function sendPost() {
            for (instance in CKEDITOR.instances) {

                CKEDITOR.instances[instance].updateElement();
            }
        }
    </script>

然後你可以設定一個button來執行這個方法,切記,該方法應該在呼叫後臺之前進行呼叫,也就是說應該寫到button的OnClientClick事件裡,具體程式碼如下:
     <asp:Button ID="btn_send" runat="server" Text="發表帖子"  OnClientClick="sendPost()" />

這樣,當你點選button的時候,CKEditor就進行了同步。