前言:
和弟弟合作, 一起整了個智慧屋的小web站點, 里面包含了很多經典的智力和推理題. 其實該站點從技術層面來分析的話, 也算一個信息發布站點. 因此在該網站的后台運營中, 富文本的編輯器顯得尤為重要.
本文將講述兩種使用富文本編輯器的思路, 重點講述彈出式形態的實現思路, 以及中間踩過的坑.
基礎:
文章的編輯采用ueditor作為富文本編輯器, 而前框的框架則使用bootstrap, 下文的解決方案都是基於此的.
ueditor的相關博文:
• ueditor和springmvc的集成
使用模式:
富文本的編輯使用, 大致有兩種方式, 一種較為常規, 嵌入在頁面內, 另一種則為彈出式形態, 針對長文章編輯, 好處是無需持久化即可預覽, 分段編輯.
• 嵌入式
這種富文本編輯器的使用方式較為普遍, 比如cnblogs本身的博客編輯就是采用這種模式, 在比如留言的編輯框(功能極度裁剪后)亦然.
這種嵌入式的編輯模式, 深入人心, 也是一般開發者的首選.
• 彈出式
當文章特別長的時候, 你會發現分段編輯的模式, 體驗更加舒適. 因此彈出式的編輯模式, 也被很多wiki系統(內部資料系統)所推崇.
在一塊文本區域中, 點擊編輯, 即彈出一個對話框編輯器. 用戶可以從容編輯該文本區域, ^_^.
技術實踐:
由於采用彈出式的編輯器模式, 因此需要用到模態框. 我們就借助bootstrap的模態框來簡單定義實現.
1) 引入bootstrap和ueditor的css和js庫
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, user-scalable=no"> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="/static/css/bootstrap.min.css"> <!-- jQuery文件。務必在bootstrap.min.js 之前引入 --> <script src="/static/js/jquery-1.12.0.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="/static/js/bootstrap.min.js"></script> <!-- 初始化ueditor --> <script src="/ueditor/ueditor.config.js"></script> <script src="/ueditor/ueditor.all.min.js"></script> <script src="/ueditor/lang/zh-cn/zh-cn.js"></script>
2) 定義融入模態框的編輯器
<!-- 模態框（Modal） -->
<div class="modal fade" id="myModal" <%--tabindex="-1"--%> role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true" <%--style="z-index: 800"--%>>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" >
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">編輯器標題</h4>
</div>
<div class="modal-body clearfix" id="id_modal_body">
<script id="id_rich_text" name="id_rich_text" type="text/plain"></script>
<script type="text/javascript">
var editor = UE.getEditor('id_rich_text');
</script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary" id="btn_modal_update">更新內容</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
3) 添加事件處理
$("#btn_edit_content").click(function() {
// *) 彈出對話框, 把富文本賦予給編輯器
editor.setContent(
$("#idv_edit_content").html()
);
// *) 展示模態框
$('#myModal').modal({
backdrop: 'static', keyboard: false
});
});
$("#btn_modal_update").click(function() {
// *) 把編輯器的內容設置到原文本區域
$("#idv_edit_content").html(editor.getContent());
// *) 隱藏模態框
$('#myModal').modal('hide');
});
具體就這么幾部步驟, 簡單有效. 至於富文本的保存和展示, 和此無關了.
遇到的坑:
默認情況下, 對話框會因為區域外點擊和ESC鍵影響了而消失, 這樣就導致編輯到一半就失敗了.
bootstrap的模態框中, modal的參數options={backdrop: 'static', keyboard: false}, 這樣對話框就不會受對話框區域外點擊和ESC鍵影響而消失了.
還有個問題就是, 對話框的按鈕控件(比如字體, 顏色的選定), 其在對話框的背后顯示了, 這樣操作就沒法進行下去了.
依據經驗: 這肯定是dom組件的z-index屬性, 順序不對導致的.
bootstrap模塊對話框的z-index默認為1050, 而ueditor的按鈕控件其z-index默認為900. 因此修改下ueditor的默認z-index配置為1050以上即可.
后記:
覺得現在自己還算一線碼農吧, 可惜職業方向並沒有專注, 涉及的東西雜而淺. 現在也反思這點的. 但有時也沒辦法, 深深的無奈.
個人站點&公眾號:
個人微信公眾號: 小木的智慧屋
個人游戲作品集站點(尚在建設中...): www.mmxfgame.com, 也可直接ip訪問: http://120.26.221.54/.