網站開發時富文本編輯器是必不可少的，他可以讓用戶自行編輯內容的樣式然后上傳到后臺！下面我們來介紹如何安裝使用百度富文本編輯器

?

????一、下載并且設置百度富文本編輯器的樣式

????你可以去百度UEditor的官網去下載編輯器，網址是http://ueditor.baidu.com/website/，下載下來之后看到有一個demo.html文件，所以你網頁上面也得引入demo.html里面引入的所有js文件?

?

?

<!-- 配置文件 --> <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里面引入

<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>

?這是放在你網頁上面需要放置編輯器的位置

看這樣百度富文本編輯器就出來啦，然后你可以編輯編輯器的樣式，推薦使用火狐瀏覽器的firebug工具查看編輯器的代碼然后設置樣式！如下，

?

例如我想要縮短編輯器的長度并且居中你就可以這樣寫css（注意引入css哦！）

#container {width:90%;margin:0 auto; }

? ??二、設置百度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中只需要改變這一個屬性！

????三、將百度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名稱試試！

????四、在前臺顯示百度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

?歡迎分享本文，轉載請注明本文出處和地址

轉載于:https://www.cnblogs.com/ly89cn/p/4881607.html

總結

以上是生活随笔為你收集整理的百度富文本编辑器UEditor安装配置全过程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。