UEditor(百度富文本編輯器)的暴力使用

1.下載sdk

下載連接：http://ueditor.baidu.com/website/download.html

Tip:這裏下載的是UTF-8版本的。

解壓能夠看到一個示例文件index.html，能夠雙擊打開該文件，就能夠看到富文本編輯器的示例：

而後就是將該sdk放到你的須要的位置：

你能夠直接在演示文件index.html文件上作開發，但通常不會這樣。這裏將在其餘的文件中引入該富文本編輯器。

2.引入必要文件

2.1 參考演示文件index.html，能夠知道須要引入的是以下文件：

2.2 在須要使用富文本的位置，引入以下代碼：

而後還要還要js中實例化改編輯器，代碼以下：

對富文本的操做，你能夠參考UEditor的api文檔，或者你也能夠直接參考示例文件的js函數，在示例文件中已經有你叫完備的功能函數。

你能夠在示例文件中找到與如下按鈕對應的功能函數：

完成以上的操做，便可以在你須要的位置中顯示富文本編輯器。

3.根據我的需求修改

咱們的目標效果是：

3.1.刪減不須要的功能：

刪減功能，須要在配置文件中修改配置（umeditor.config.php）：

上面的每一個字串都是表明一個功能按鈕，你只須要刪除你不須要的「字串」。

3.2 固定富文本編輯器的高度，內容溢出則產生滾軸。

3.21 固定富文本編輯器的高度，並在溢出時產生滾軸，也能夠在配置文件中配置：

首先是配置高度：

再配置，禁止「自動長高」，即禁止文本編輯蓋度不會受內容高度影響，默認配置是：內容高度超過富文本設置的高度就會「撐」高富文本編輯器的高度。

這樣就配置好。可是這樣作有個bug：當你內容溢出產生滾軸，點擊全屏，再關閉全屏，你會發現縮小後的富文本編輯器的高度很神奇地被內容的高度撐高，高度再也不固定。

3.22 避免的這樣的方法，你能夠在富文本編輯器的外面加一層父元素，固定父元素高度，讓父元素的內容溢出時產生滾軸（將富文本看成內容），以下：

這樣作也是有個缺點：功能欄會不能固定頂部，會跟着滾軸滾動：

3.23 最後一個方法是：給這個富文本編輯器的body固定高度，並添加overflow: auto; 屬性，首先是要」審查元素「查看body的類選擇器是什麼：

這樣點擊全屏仍是會有問題：在縱向不能全屏，高度被固定150px;

要解決這個問題，咱們就須要監聽全屏的按鈕，判斷目的動做是全屏仍是小屏：

首先是經過審查元素，找出「全屏」按鈕對用的類選擇器：

還須要一個標記位來標記當前屏幕的狀態（小屏/全屏）

標記有兩種方法：

1） 設置js 的全局變量（可是這個辦法親測由bug，會出現屏幕記錄狀態錯亂的問題）；

2） 添加自定義元素屬性，經過檢測該屬性值判斷當前狀態（選擇這種）。

off：小屏；on：全屏

jq函數檢測屏幕狀態，並動態改變屏幕的高度：

4.改變樣式：

經過審查元素找到你須要改變樣式的類或id選擇器：

往改選擇器中添加或覆蓋樣式（不用去修改他自帶的css文件）：