基於ThinkPHP的在線編輯器調用

時間 2019-11-09

標籤基於 thinkphp 在線編輯器調用欄目 PHP 简体版

原文原文鏈接

開源的在線編輯器有不少，好比FCKEditor，UEditor，Kindeditor等，調用方式也都大同小異javascript

下面列舉UEditor在線編輯器插件在ThinkPHP裏面的應用html

一、Ueditor下載地址:http://ueditor.baidu.com/website/download.html(注意編碼)java

二、使用ThinkPHP版本爲ThinkPHP3.1.2web

先下載Ueditor插件解壓放置ThinkPHP項目的根目錄並將文件夾名稱重命名爲ueditorapp

以下圖:webapp

編寫測試類:編輯器

1 class IndexAction extends Action {
2     public function index(){
3         $this->display();
4     }

對應映射Html靜態頁面：ide

<!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：post

須要和下面的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'
        ]]

按照我的需求填寫所需就成

上圖代碼效果圖: