首頁 後端開發 php教程 tp3怎麼嵌入百度編輯器ueditor?

tp3怎麼嵌入百度編輯器ueditor?

Jul 16, 2017 pm 04:36 PM
百度 編輯器

載入百度ueditor編輯器並配置的方法分享
其實很簡單,不過讀取資料的時候需要用htmlspecialchars_decode($str);函數轉義一下,不然讀取到的內容有點小問題,具體看詳情

因為排版要求,很多時候我們需要嵌入富文本編輯器,輸出帶有html標籤的文本內容。因為我最近做一個後台管理系統,要求編輯好文字內容,讓它輸出帶有html標籤的文字存到伺服器,客戶端發請求拿到伺服器的標籤文字。我用的是ueditor,

1.首先我們去這裡www.jb51.net/codes/56667.html下載PHP版本utf版本。

把它放到Public的目錄下。

2.我們在視圖view上,要用到富文本編輯器的時候,一般都是在表單加入textarea,


<form>  
<p><textarea name="intro_detail" id="intro_detail" cols="30" rows="10"></textarea> </p>
</form>
登入後複製

3.在html最後加上script配置文字方塊初始值,其中PUBLIC是我在config配置的路徑


<script type="text/javascript" src="PUBLIC/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="PUBLIC/ueditor/ueditor.all.min.js"></script>
<!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
<script type="text/javascript" src="PUBLIC/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
  UE.getEditor(&#39;intro_detail&#39;,{  //intro_detail为要编辑的textarea的id
    initialFrameWidth: 418,  //初始化宽度
    initialFrameHeight: 500,  //初始化高度
  });

</script>
登入後複製

4.通常我們在表單裡面加個按鈕的時候會默認把表單裡面的資料全部提交上去,但是我的專案裡面還涉及到圖片上傳問題,我在這裡採用的是ajax異步提交,那麼問題來了,我們能否通過jq中的("#intro_detail").val()的值拿到要提交的值呢,答案是不能的,我的處理方法是,在textarea下面加一個隱藏的input,我門用ueditor提供的方法拿到裡面的值賦給input,讓它隨著表單一起提交過去,在控制器便可以通過_POST('表單的name'),如下:


 <p >  
<textarea name="intro_detail" id="intro_detail" cols="30" rows="10"></textarea>
</p>
 <input type="text" style="display: none" id="intro_detail1" name="intro_detail1" >
登入後複製

ajax提交,

程式碼如下:

$("#intro_detail1").val("&#39;"+UE.getEditor(&#39;intro_detail&#39;).getContent()+"&#39;");
登入後複製

把文字方塊輸入的帶標籤的用單引號拼起來,存到input裡面一併發過去,至於為啥用單引號,不然的話發不過去,會自動過濾掉標籤,我們在拿資料出來的時候把單引號處理掉就可以。


$.ajax({
          type: "POST",
          url: "<{:U(&#39;Admin/GameManager/Game/modGame&#39;)}>",
          dataType: &#39;json&#39;,
          processData: false,
          contentType: false,
          cache: false,
          data: formData,
          success:function(r){
            if(r.success){
              alert(&#39;编辑成功&#39;);
              window.location.reload();//重新刷新一次
              $(&#39;#user_dialog&#39;).modal(&#39;hide&#39;);
            }
            else{
              alert("参数错误");
            }
          }
        });
登入後複製

5.控制器裡面,可以用$_POST('表單的name')拿到數據,寫進資料庫


$db = M(&#39;game&#39;);
    $data  = $db->create(I(&#39;post.&#39;));
    $data[&#39;intro_detail&#39;] = $_POST[&#39;intro_detail1&#39;];
    $db->add($data);
登入後複製

6.我們在取資料到視圖的時候,把單引號處理掉就可以


foreach($result as $key =>$value){    
      $result[$key][&#39;intro_detail&#39;]=str_replace("&#39;","",$result[$key][&#39;intro_detail&#39;]);//过滤单引号
    }
    $this->assign(&#39;game_list&#39;, $result);
    $this->display(&#39;&#39;);
登入後複製

$result是我用sql語句查到的資料庫內容,而intro_detail就是存入資料庫標籤和單引號的文字內容


$user = M(&#39;game&#39;);
    $result = $user->field();
登入後複製

7.其實並不難,我也是為大家提供下思路,可以多討論,我也是小白。

以上是tp3怎麼嵌入百度編輯器ueditor?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

2 個月不見,人形機器人 Walker S 會摺衣服了 2 個月不見,人形機器人 Walker S 會摺衣服了 Apr 03, 2024 am 08:01 AM

機器之能報道編輯:吳昕國內版的人形機器人+大模型組隊,首次完成疊衣服這類複雜柔性材料的操作任務。隨著融合了OpenAI多模態大模型的Figure01揭開神秘面紗,國內同行的相關進展一直備受關注。就在昨天,國內"人形機器人第一股"優必選發布了人形機器人WalkerS深入融合百度文心大模型後的首個Demo,展示了一些有趣的新功能。現在,得到百度文心大模型能力加持的WalkerS是這個樣子的。和Figure01一樣,WalkerS沒有走動,而是站在桌子後面完成一系列任務。它可以聽從人類的命令,折疊衣物

Go語言開發工具介紹:必備工具一覽 Go語言開發工具介紹:必備工具一覽 Mar 29, 2024 pm 01:06 PM

標題:Go語言開發工具介紹:必備工具一覽在Go語言的開發過程中,使用適當的開發工具可以提高開發效率和程式碼品質。本文將介紹幾款在Go語言開發中常用的必備工具,並附上具體的程式碼範例,讓讀者更直觀地了解它們的使用方法和作用。 1.VisualStudioCodeVisualStudioCode是一款輕量級且功能強大的跨平台開發工具,具有豐富的插件和功能,

百度Apollo重磅發表全球首個支援L4級自動駕駛的大模型Apollo ADFM 百度Apollo重磅發表全球首個支援L4級自動駕駛的大模型Apollo ADFM Jun 04, 2024 pm 08:01 PM

5月15日,百度Apollo在武漢百度蘿蔔快跑汽車機器人智行谷舉辦ApolloDay2024,全方位展示百度十年深耕自動駕駛的重大進展,基於大模型帶來技術階躍、面向乘客安全全新定義的無人車和全球最大的無人車自動營運網絡,百度已經做到自動駕駛比人類駕駛更安全。得益於此,更安全舒適、綠色低碳的出行方式正從理想成為現實。百度集團副總裁、智慧駕駛事業群組總裁王雲鵬現場表示:「我們做無人車的初衷,是滿足老百姓日益增長的、對美好出行的嚮往,人民群眾的滿意是我們前進的動力。因為安全、所以美好,我們欣喜地看到

百度李彥宏率隊拜訪中國石油,討論油氣產業智慧化 百度李彥宏率隊拜訪中國石油,討論油氣產業智慧化 May 07, 2024 pm 06:13 PM

本站5月7日消息,5月6日,百度創辦人、董事長兼執行長李彥宏帶隊在北京拜訪中國石油天然氣集團有限公司(以下簡稱「中國石油」),並與中國石油集團董事長、黨組書記戴厚良舉行會談。雙方就強化合作,推動能源產業與數位化智慧化深度融合進行了深入交流。中國石油將加速推動數位中中國石油建設,加強與百度集團合作,推動能源產業與數位化智慧化的深度融合,為保障國家能源安全做出更大貢獻。李彥宏表示,大模型展現的「智慧湧現」與理解、生成、邏輯、記憶等核心能力,為前沿科技與油氣業務結合開啟了更廣闊的想像空間。一直

百度息壤貝殼取得方法介紹 百度息壤貝殼取得方法介紹 Mar 28, 2024 am 09:11 AM

在息壤中有不少用戶不知道貝殼在哪裡,怎麼才能獲得,有些玩家轉了幾個小時候都沒有找到,下面小編就帶來了百度息壤貝殼的獲取方法,快來一起看看吧。百度息壤貝殼怎麼獲得1、首先我們需要來到社區,然後來到下圖的這個位置。 2、在這裡選擇目的地,選擇進入188樓。 3.進入188層後,在周圍轉悠會有這個提示,點擊我知道了就行。 4.貝殼的位置可能會有些難找,就在188電梯的後面,有個發光的小點就是貝殼。 5.撿貝殼要用VR把手才能撿,點擊貝殼就可以了。兌換方式1、先點選頁面右上方的「設定」圖標,在設定中選擇「

VSCode功能詳解:它如何幫助你提高工作效率? VSCode功能詳解:它如何幫助你提高工作效率? Mar 25, 2024 pm 05:27 PM

VSCode功能詳解:它如何幫助你提高工作效率?隨著軟體開發產業的不斷發展,開發人員們追求工作效率和程式碼品質成為了他們工作中的重要目標。在這個過程中,程式碼編輯器的選擇成為了一項關鍵的決策。而在眾多的編輯器中,VisualStudioCode(簡稱VSCode)憑藉其強大的功能和靈活的擴展性受到了廣大開發者的喜愛。本文將詳細介紹VSCode的一些功能,探討

deepseek網頁版入口 deepseek官網入口 deepseek網頁版入口 deepseek官網入口 Feb 19, 2025 pm 04:54 PM

DeepSeek 是一款強大的智能搜索與分析工具,提供網頁版和官網兩種訪問方式。網頁版便捷高效,免安裝即可使用;官網則提供全面產品信息、下載資源和支持服務。無論個人還是企業用戶,都可以通過 DeepSeek 輕鬆獲取和分析海量數據,提升工作效率、輔助決策和促進創新。

了解VSCode:這款工具到底是用來做什麼的? 了解VSCode:這款工具到底是用來做什麼的? Mar 25, 2024 pm 03:06 PM

《了解VSCode:這款工具到底是用來做什麼的? 》身為程式設計師,無論是初學者或資深開發者,都離不開程式碼編輯工具的使用。在眾多編輯工具中,VisualStudioCode(簡稱VSCode)作為一款開源、輕量級、強大的程式碼編輯器備受開發者歡迎。那麼,VSCode到底是用來做什麼的呢?本文將深入探討VSCode的功能和用途,並提供具體的程式碼範例,以幫助讀者

See all articles