首頁 > 後端開發 > php教程 > 關於thinkphp3.2嵌入百度編輯器ueditor的解析

關於thinkphp3.2嵌入百度編輯器ueditor的解析

不言
發布: 2023-03-30 18:48:01
原創
1847 人瀏覽過

本篇文章主要介紹了thinkphp3.2嵌入百度編輯器ueditor的實例程式碼,具有一定的參考價值,有興趣的可以了解一下

本文介紹了thinkphp3.2嵌入百度編輯器ueditor ,分享給大家,希望這篇文章對各位有所幫助

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

1.首先我們去下載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.其實並不難,我也是為大家提供下思路,可以多討論,我也是小白。

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關建議:

關於thinkPHP框架對接支付寶即時到帳介面回呼問題的解析

基於Thinkphp和jquery實作ajax多選反選不選刪除資料的功能

#

以上是關於thinkphp3.2嵌入百度編輯器ueditor的解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板