UEditor編輯器並不難,ueditor並不難
1.背景:
其實學習UEditor本該在這之前就應該學習整合到自己的項目中的了,第一次接觸UEditor是在暑假期間,當時做東西在師兄的代碼中發現了這東西,心想:臥槽,竟然可以這樣整合別人的東西! 學習接口性質類的東西,最官方權威的時候是看官方文檔,但是我想還是有人因該跟我一樣,對這東西天生還是有點恐懼感的!多少需要別人來告訴自己一聲:其實這個很簡單,這麼去學就很簡單了!因此,【有緣人啊....】如果看到這篇文章並且堅持看到了這裡,那你不妨繼續看下去,在這篇博客中,記錄了:編輯器的原理及各種常用編輯器的引入的一個大概的思路與學習方法!【當然,如果寫錯了,還請留下您寶貴的指點意見,謝謝指教,歡迎指教學習】(由於從為知筆記同步到博客的,代碼編排真是丑哭了朕,所以我附上的是代碼截圖)
百度針對論壇貼吧評論,又做了一個UM的編輯器,是UE的簡化版!大家也可以去看看~
對於此次學習,有以下幾點編程感悟:
==>1).技術都是想的難,其實很簡單==>難是難在自己的想法了,認為很難!要嘗試靜下心去看這個東西!
==>2).對於編輯器,在線支付,微信開發接口....這些不是PHP知識點的知識[因為這些東西都是單純的調用API罷了],最好的方法==>讀官方手冊,最權威;看下載壓縮包中的example實例,入門最快;
==>3).多動手,跟著官方文檔的思路去敲代碼!你不可能會所有語言,因此對待不懂的語言不要去抗拒!語言是學不完的【不管你懂不懂引入的這個語言,先把東西做出來再說】
2.編輯器原理:
1).什麼是編輯器==>對文字有編輯作用[修改,刪除....],對文字的加粗,劃下劃線......這些都是對文字樣式的改變(其實並不屬於編輯器的功能,但是現在大多編輯器都集成了)
==>下面這段代碼,對於“hello world!”這幾個字只是單純的一個顯示,我們無法刪除,無法重新修改
==>但是對於下面這個div呢?你還是單單只能看這個內容:“hello lms, what you like ?......”嗎?
2).編輯器原理:
==>插入一個iframe,並利用網頁的contentEditable屬性,使得該iframe可以編輯;
==>利用JS改變文字的樣式,完成加粗,變色,加下劃線,上傳圖片效果
==>最後獲取該區域的內容即可!至於如何處理,這些都是業務邏輯代碼了!
3.常見的編輯器:
1).比較長久老牌:FCKEditor-->更名為CKEditor;KindEditor【比較老,教程這些的都很多....】
2).國內淘寶用的:ewebEditor
3).目前比較新,流行的:UEditor,UM編輯器[為論壇貼吧定制的]==>都是百度出的!
4.如何學習編輯器:最權威,最官方的就是取看官方文檔【以UEditor為例】
1).如何引入
==>就是引入幾個js文件的事
==>http://fex.baidu.com/ueditor/官方DOC文件《1.2 創建demo文件》中有詳細說明
2).如何個性化配置==>
(1).在引入頁面覆蓋配置【推薦使用這個】
==>去配置文件中找到對應的配置項,拼接成一個對象,當成參數傳給UE.getEditor('container',{配置項1 , 配置項2, ...... })進行設置
(2).對配置文件進行修改==>【一修改,那麼所有引用了這個編輯器的都會被更改】
==>ueditor.config.js【前台顯示配置】
3).如何與自己系統整合==>
(1).現在你所需要運用編輯器的地方,將編輯器的"前端"引入進來;==>路徑URL寫死[整合到項目中的時候,資源是不能亂放的]
(2).==>對應語言的包下的config.json【後台處理配置--圖片、視頻上傳路徑....將默認的目錄路徑改為你要存放的地方】
①.在表單中要加上: enctype="multipart/form-data"==>有文件上傳,圖片上傳等必須要加[以二進制數據進行傳輸數據]
②.對於不明確的路徑,使用firebug查看原本路徑,一直追溯路徑變量
③.使用firebug查看返回來的值,查看返回來的[以上兩個是針對於出現問題時候,調試可以用的方法]
④.UE的1.4.2+版本中的通用上傳類Upload.class.php,所有配置都寫在了config.json中,只需要在config.json中修改對於路徑即可
⑤.1.4.2+ 以後路徑配置主要相關的配置項是
PathFormat【上傳保存路徑】 和
UrlPrefix【訪問路徑--對於ASP和.net來說需要配置】的配置項
⑥.1.4.2+ 路徑配置項無論是否以 "/" 開頭,都是相對於
網站根目錄 的路徑。
⑦.後台會過濾模板上的非法字符==> \ : * ? " < > | ==>這些非法字符都會被替換成空
來自為知筆記(Wiz)