富文字編輯器CKEditor的使用及同步問題
阿新 • • 發佈:2019-01-04
關於富文字編輯器,我個人使用的是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就進行了同步。