UI之富文本編輯器-UEditor

qdjianghao

在做Web應(yīng)用時(shí)，經(jīng)常會(huì)進(jìn)行富文本編輯，常用的富文本編輯器有很多，比如CuteEditor、CKEditor、NicEditor、KindEditor、UEditor等等。
在這里杰瑞教育為大家推薦百度推出的UEditor，UEditor是所見即所得的富文本編輯器，具有輕量、可定制、注重用戶體驗(yàn)的特點(diǎn)。
官方網(wǎng)址：ueditor#baidu#com/website/index#html
下載地址：ueditor#baidu#com/website/download#html
UEditor的使用簡(jiǎn)單步驟：
1、 在使用頁(yè)面正確導(dǎo)入U(xiǎn)Editor的js文件

在這里要注意，config.js文件應(yīng)該在前。
2、 在頁(yè)面form表單中添加如下內(nèi)容

3、 在html后編寫如下js代碼：官方建議直接調(diào)用工廠方法getEditor來創(chuàng)建剪輯器，后續(xù)如果用到編輯器時(shí)，可直接調(diào)用UE.getEditor(“myEditor”)來獲取編輯器的實(shí)例對(duì)象。



下面通過一個(gè)具體的需求來說明UEditor的一些配置項(xiàng)和方法的具體用法。
需求：在做某應(yīng)用時(shí)，我們需要對(duì)合同進(jìn)行保存管理。其中，合同里面的具體條款可根據(jù)實(shí)際需要進(jìn)行編輯并生成模板。
很顯然合同條款不能是雜亂無章純文本，需要有一定的格式，在這里我們需要使用富文本編輯器來編輯合同條款。
合同條款一般就是帶有樣式的文本，不會(huì)含有圖片、視頻、附件等內(nèi)容，很顯然通過以上步驟添加的UEditor不符合我們的要求，這就需要我們自己定制UEditor。
如何定制呢？UEditor為我們提供兩種設(shè)置屬性的方式。
方式一：通過修改ueditor.config.js里面的配置信息；
方式二：在創(chuàng)建UEditor的時(shí)候，傳入配置項(xiàng)參數(shù)。
至于具體的配置信息，可以查看官方文檔，在這里就不一一贅述。
在這里采用方式二，在創(chuàng)建UEditor的時(shí)候，傳入配置參數(shù)的形式進(jìn)行定制，代碼如下：

很顯然定制后的UEditor更符合我們的需求。



在servlet中,可以直接使用通過request的getParamter方法獲取UEditor中的編輯數(shù)據(jù)，參數(shù)即為UEditor中屬性textarea設(shè)置的值。
如何在UEditor中初始化模板數(shù)據(jù)？同樣可以使用兩種方式:
一是在配置項(xiàng)中通過設(shè)置initialContent屬性;
二是通過調(diào)用UEditor的setContent方法。
方式一：通過請(qǐng)求Servlet，在Servlet中調(diào)用業(yè)務(wù)方法，將保存在數(shù)據(jù)庫(kù)中的合同模板信息加載后保存在request中，并通過轉(zhuǎn)發(fā)到合同編輯頁(yè)面，在頁(yè)面中將數(shù)據(jù)取出并在初始化UEditor時(shí)賦值。



方式二：直接請(qǐng)求合同編輯頁(yè)面，在頁(yè)面中使用UEditor提供的Ajax進(jìn)行加載合同模板，并通過setContent方法賦值。



這個(gè)地方要注意，一定要等到UEditor加載完畢后才能調(diào)用setConent方法，因此需要監(jiān)聽UEditor的ready事件。

煙臺(tái)杰瑞教育科技原創(chuàng)文章，轉(zhuǎn)載請(qǐng)注明出處。查看原文請(qǐng)到杰瑞教育博客園（www#cnblogs#com/jerehedu ）。 源代碼請(qǐng)到杰瑞教育百度云盤（pan#baidu#com/s/1ntHWo4L ）

由于URL不能發(fā)表，文中所有鏈接#請(qǐng)換為.