網站開發時富文本編輯器是必不可少的,他可讓用戶自行編輯內容的樣式而後上傳到後臺!下面咱們來介紹如何安裝使用百度富文本編輯器javascript
1、下載而且設置百度富文本編輯器的樣式php
你能夠去百度UEditor的官網去下載編輯器,網址是http://ueditor.baidu.com/website/,下載下來以後看到有一個demo.html文件,因此你網頁上面也得引入demo.html裏面引入的全部js文件 css
<!-- 配置文件 --> <script type="text javascript" src="um/ueditor.config.js"> <!-- 編輯器源碼文件 --> <script type="text javascript" src="um/ueditor.all.js"></script type="text></script type="text>
<!-- 加載編輯器的容器 -->這是在header裏面引入html
<script id="container" name="content" type="text plain"=""> <script type="text javascript" src="js.js"></script type="text></script id="container" name="content" type="text>
這是放在你網頁上面須要放置編輯器的位置java
看這樣百度富文本編輯器就出來啦,而後你能夠編輯編輯器的樣式,推薦使用火狐瀏覽器的firebug工具查看編輯器的代碼而後設置樣式!以下,web
例如我想要縮短編輯器的長度而且居中你就能夠這樣寫css(注意引入css哦!)json
#container { width:90%; margin:0 auto; }
2、設置百度UEditor文件上傳路徑 瀏覽器
百度富文本編輯器UEditor默認上傳的文件都在ueditorphpupload文件夾下,這樣對於咱們網站開發確定是不方便的,因此咱們得更改上傳文件目錄!打開umphpconfig.json文件,裏面都各類文件上傳目錄配置!編輯器
例如我想更改圖片上傳的目錄,找到帶有 「/* 上傳圖片配置項 */」下面的代碼,而後找到imagePathFormat配置,能夠將「/ueditor/php/upload/image/」修改爲你想要上傳到的文件目錄,注意後面的「{yyyy}{mm}{dd}/{time}{rand:6}」不用更改,它能夠本身生成分類文件夾!你們能夠參照一下個人配置工具
"imagePathFormat": "Upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,能夠自定義保存路徑和文件名格式 */
其餘的文件上傳也能夠參照圖片上傳都是改變imagePathFormat的屬性,並且在PHP中只須要改變這一個屬性!
3、將百度UEditor提交到後臺
將在百度富文本編輯器UEditor中編輯的內容提交到後臺,後臺怎麼接收呢?其實這就跟一個form表單提交同樣,你能夠吧整個百度UEditor看作一個textarea
<!-- 加載編輯器的容器 --> <script id="container" name="content" type="text plain"=""> </script id="container" name="content" type="text>
這是要在網頁上面編輯器的位置添加的一部分代碼,你們有沒有發現script標籤有一個name屬性,全部後臺就直接能夠$_POST['content']接收就好啦,固然你也能夠用其餘name名稱試試!
4、在前臺顯示百度UEditor編輯的代碼樣式
百度富文本編輯器UEditor帶有插入代碼的功能,也就是你在後臺選擇一種代碼語言,而後在裏面寫入代碼,前臺能夠給代碼高亮顯示,便於用戶閱讀代碼,能夠增長用戶體驗!
你們能夠看看看代碼高亮的樣式
可是這須要前臺引入其餘的js和css文件才能夠啓動代碼高亮功能,因此前臺引入代碼以下
<link href="/um/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/um/third-party/SyntaxHighlighter/shCore.js"></script>
基本的百度富文本編輯器UEditor安裝配置就到這裏啦,若是你們還有什麼問題能夠到王業樓的博客去討論,你們一塊兒交流學習!
本文來源於王業樓的我的博客 本文地址:http://www.ly89.cn/detailB/50.html
歡迎分享本文,轉載請註明本文出處和地址