開源的在線編輯器有很多，比如FCKEditor，UEditor，Kindeditor等，調用方式也都大同小異
下面列舉UEditor在線編輯器插件在ThinkPHP里面的應用
1、Ueditor下載地址:http://ueditor.baidu.com/website/download.html(注意編碼)
2、使用ThinkPHP版本為ThinkPHP3.1.2
先下載Ueditor插件解壓放置ThinkPHP項目的根目錄并將文件夾名稱重命名為ueditor
如下圖:
編寫測試類:
1 class IndexAction extends Action {2 public function index(){3 $this->display();4 }
對應映射Html靜態頁面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Ueditor</title> <script type="text/javascript" src="__ROOT__/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="__ROOT__/ueditor/ueditor.all.js"></script> <script type="text/javascript"> function edit(){ UE.getEditor('content'); } </script></head><body onload="edit()"> <form action="__URL__/edit" method="post"> 標題：<br/> <input type="text" name="info"/><br/> 內容：<textarea id="content" name="content" style="width:700px;height:300px;"></textarea> <input type="submit" value="提交"/> </form></body></html>在靜態頁面HTML用Javascript調用，分別引入ueditor.config.js、ueditor.all.js兩個JS文件，可直接用UE.getEditor(參數1，{參數2});進行調用
參數1：
需要和下面的TextArea的ID名對應。
參數2：（非必須）
一些初始化參數，比如寬度，高度，各種按鈕，樣式等。
若不填寫此參數，默認下是用TextArea的Style樣式的寬高來定義Ueditor
效果如下圖：
提交表單：
-------------------------------------------------------------華麗的分割線-------------------------------------------------------------------
來說下關于參數二，畢竟一般的在線編輯器是不需要那么多功能的，使其簡潔。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Ueditor</title> <script type="text/javascript" src="__ROOT__/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="__ROOT__/ueditor/ueditor.all.js"></script> <script type="text/javascript"> function edit(){ UE.getEditor('content',{ //這里可以選擇自己需要的工具按鈕名稱,此處僅選擇如下五個 toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','bold','test']], //focus時自動清空初始化時的內容 autoClearinitialContent:true, //關閉字數統計 wordCount:false, //關閉elementPath elementPathEnabled:false, //默認的編輯區域高度 initialFrameHeight:300 //更多其他參數，請參考ueditor.config.js中的配置項 }); } </script></head><body onload="edit()"> <form action="__URL__/edit" method="post"> 標題：<br/> <input type="text" name="info"/><br/> 內容：<textarea id="content" name="content" style="width:700px;height:300px;"></textarea> <input type="submit" value="提交"/> </form></body></html>關于參數二的toolbars在開發文檔ueditor.config.js中有給出：
toolbars: [[ 'fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'directionalityltr', 'directionalityrtl', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|', 'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|', 'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|', 'print', 'preview', 'searchreplace', 'help', 'drafts' ]]
按照個人需求填寫所需就成
上圖代碼效果圖:
PHP編程
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
新聞熱點
疑難解答
