ThinkPHP使用Ueditor的方法詳解
來源:易賢網(wǎng) 閱讀:539 次 日期:2016-08-20 13:27:05
溫馨提示:易賢網(wǎng)小編為您整理了“ThinkPHP使用Ueditor的方法詳解”,方便廣大網(wǎng)友查閱!

本文實例講述了ThinkPHP使用Ueditor的方法。分享給大家供大家參考,具體如下:

相信很多人現(xiàn)在還在用著FCkeditor,以前我也在用,可是后來發(fā)現(xiàn)百度的Ueditor之后,發(fā)現(xiàn),Ueditor比Fckeditor更好看,操作性上也比Fckeditor好多了,所以還是嘗試著使用ueditor,但是在ThinkPHP框架下使用ueditor還是遇到了一些問題,也花費了一些時間去解決這些問題,這樣,在這里寫一個關(guān)于ThinkPHP下使用ueditor的教程,給需要使用的人。

1、在網(wǎng)站的根目錄下建一個“Public”的文件夾,這個文件夾在ThinkPHP中可以用__PUBLIC__來替換,所以這樣方便我們程序的編寫,然后將ueditor文件放到這個文件夾中。

2、在我們需要使用ueditor的模板文件中導(dǎo)入ueditor所要使用的js和css,例如,我在App/Tpl/default/Venter/createvent.html中添加以下代碼:

<script type="text/javascript" src="__PUBLIC__/ueditor/editor_config.js"></script>

<script type="text/javascript" src="__PUBLIC__/ueditor/editor_all.js"></script>

<link rel="stylesheet" href="__PUBLIC__/ueditor/themes/default/ueditor.css"/>

3、配置Ueditor相對于網(wǎng)站根目錄的位置,這里我建議使用絕對路徑,即類似于http://localhost:1080這樣的路徑,因為在網(wǎng)站項目的開發(fā)中,很多地方會用到ueditor,但是由于所用到的位置不同便導(dǎo)致當(dāng)前目錄和服務(wù)器根目錄的相對路徑變化,也就使得ueditor無法使用,例如,我配置的路徑(配置文件:ueditor目錄下的editor_config.js),將一下代碼進(jìn)行替換:

URL= tmp.substr(0,tmp.lastIndexOf("\/")+1).replace("_examples/","");

//這里你可以配置成ueditor目錄在您網(wǎng)站的相對路徑或者絕對路徑(指以http開頭的絕對路徑)

替換成:

URL = "http://localhost:1080/Public/ueditor/";

4、下面便是一個對表單的使用的應(yīng)用:

<form action="__ROOT__/index.php/Venter/ventChk" method="post">

  <script type="text/plain" id="Vent" style="width:500px;"></script>

  <input type="checkbox" name="opened" value="1"/>公開發(fā)表

  <input type="submit" value="發(fā)泄" />

</form>

<!--注冊百度ueditor-->

<script type="text/javascript">

  var editor = new baidu.editor.ui.Editor({

    toolbars:[['Spechars','Emotion','InsertImage','Bold','Italic','ForeColor','FontFamily','FontSize', ]],//自定義ueditor工具欄

    initialContent: '<span style="color:#ccc">點擊這里發(fā)泄吧</span>',

    minFrameHeight: 100,//初始化框架大小

    autoFloatEnabled: false,//工具欄自動浮動-》關(guān)閉

    textarea:'myVent'//form表單將通過該參數(shù)獲得表單提交的數(shù)據(jù)

  });

  editor.render("Vent");

</script>

<!--百度Ueditor注冊完畢-->

如上面代碼所示,可以通過$_POST['myVent']來獲取Ueditor編輯區(qū)的內(nèi)容。

5、在Thinkphp中如何去使用呢?首先要先將得到的內(nèi)容提交進(jìn)行轉(zhuǎn)義,這里我們使用以下代碼:

$content = htmlspecialchars(stripslashes(POST['myVent']));

這之后的操作便是將$content插入到數(shù)據(jù)庫中(這里不再多說)。

6、從數(shù)據(jù)中提取數(shù)據(jù)并進(jìn)行轉(zhuǎn)義使得內(nèi)容可以正常顯示:

$vent = new VenterModel;

$list = $vent->select();

$this->assign("list",$list)

這樣在相應(yīng)的html模板中可以這樣來顯示內(nèi)容:

<volist name="list" id="vo">

{$vo.content|htmlspecialchars_decode}

</volist>

這里用到了thinkphp模板的一個用法,即可以在模板中使用函數(shù),這里便使用了函數(shù)htmlspecialchars_decode來對$vo,content進(jìn)行轉(zhuǎn)義,上面的代碼可以看成是這樣:

htmlspecialchars_decode($vo.content),在這里的這個方法的選擇上我用了很長時間,當(dāng)時沒有考慮到這個方法,當(dāng)時只是想著,由于htmlspecialchars_decode函數(shù)接受的傳值不能是數(shù)組,所以從數(shù)據(jù)庫中提取的數(shù)據(jù)便不能直接傳給他,后來想可以通過遍歷數(shù)組的方法來讓數(shù)組內(nèi)每個元素都htmlspecialchars_decode一下,雖然可以將內(nèi)容轉(zhuǎn)義,但是卻不能在模板中顯示了,直到最后看了一些官方的手冊,才想到了這里,所以做程序,一定要多看看官方的文檔,很多問題便能解決。

希望本文所述對大家基于ThinkPHP框架的PHP程序設(shè)計有所幫助。

更多信息請查看網(wǎng)絡(luò)編程
易賢網(wǎng)手機(jī)網(wǎng)站地址:ThinkPHP使用Ueditor的方法詳解
由于各方面情況的不斷調(diào)整與變化,易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考,敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)!
關(guān)于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 加入群交流 | 手機(jī)站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務(wù)許可證:(云)人服證字(2023)第0102001523號
云南網(wǎng)警備案專用圖標(biāo)
聯(lián)系電話:0871-65317125(9:00—18:00) 獲取招聘考試信息及咨詢關(guān)注公眾號:hfpxwx
咨詢QQ:526150442(9:00—18:00)版權(quán)所有:易賢網(wǎng)
云南網(wǎng)警報警專用圖標(biāo)