百度富文本編輯器UEditor安裝配置全過程

網站開發時富文本編輯器是必不可少的,他可讓用戶自行編輯內容的樣式而後上傳到後臺!下面咱們來介紹如何安裝使用百度富文本編輯器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

百度富文本編輯器UEditor安裝配置全過程

看這樣百度富文本編輯器就出來啦,而後你能夠編輯編輯器的樣式,推薦使用火狐瀏覽器的firebug工具查看編輯器的代碼而後設置樣式!以下,web

 

百度富文本編輯器UEditor安裝配置全過程

例如我想要縮短編輯器的長度而且居中你就能夠這樣寫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帶有插入代碼的功能,也就是你在後臺選擇一種代碼語言,而後在裏面寫入代碼,前臺能夠給代碼高亮顯示,便於用戶閱讀代碼,能夠增長用戶體驗!

    

百度富文本編輯器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

 歡迎分享本文,轉載請註明本文出處和地址

相關文章
相關標籤/搜索