首先下載ueditor編輯器的文件放入tp5的static目錄下
第二步，引入Ueditor編輯器
在用到的頁面（視圖頁面）載入ueditor的js文件
然后初始化ueditor，實例代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>index頁面</title>
</head>
<body>
<h1>首頁，練習ueditor編輯器</h1>
<!-- 加載編輯器的容器 -->
<form action="" method="post" enctype="multipart/form-data">
<input type="text" name="id">
<textarea id="container" name="content" cols="30" rows="15" style="width:80%; margin: 0 auto;">我的editor
</textarea>
<input type="submit" value="提交">
</form>
<!-- 配置文件 -->
<script type="text/javascript" src="__STATIC__/ueditor/ueditor.config.js"></script>
<!-- 編輯器源碼文件 -->
<script type="text/javascript" src="__STATIC__/ueditor/ueditor.all.js"></script>
<!-- 實例化編輯器 -->
<script type="text/javascript">
//var ue = UE.getEditor('container');
var ue = UE.getEditor('container', {
autoHeightEnabled:false,
initialFrameHeight:420
});
</script>
</body>
</html>
也可以使用script的方式載入ueditor
代碼如下：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<!-- 加載編輯器的容器 -->
<script id="container" name="content" type="text/plain">
這里寫你的初始化內容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="__STATIC__/ueditor/ueditor.config.js"></script>
<!-- 編輯器源碼文件 -->
<script type="text/javascript" src="__STATIC__/ueditor/ueditor.all.js"></script>
<!-- 實例化編輯器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>
</html>
第三部配置上傳圖片的保存路徑，主要需要修改config.json 文件里的配置即可
具體參考官方文檔
http://fex.baidu.com/ueditor/#server-php
第四步，修改前端配置，來滿足需求即可
主要修改ueditor.config.js 文件，具體參考官方文檔
最后運行測試效果展示如下
控制器代碼如下：用來接收編輯器的內容
<?php
// +----------------------------------------------------------------------
// | ThinkAdmin
// +----------------------------------------------------------------------
// | 版權所有 2014~2017 廣州楚才信息科技有限公司 [ http://www.cuci.cc ]
// +----------------------------------------------------------------------
// | 官方網站: http://think.ctolog.com
// +----------------------------------------------------------------------
// | 開源協議 ( https://mit-license.org )
// +----------------------------------------------------------------------
// | github開源項目：https://github.com/zoujingli/ThinkAdmin
// +----------------------------------------------------------------------
namespace app\index\controller;
use think\Controller;
/**
* 應用入口控制器
* @author Anyon <zoujingli@qq.com>
*/
class Index extends Controller
{
public function index()
{
if(request()->isPost()){
$a=$_POST;
var_dump($a);
//$b=str_replace('<','<',$a);
//var_dump($b);
}
return $this->fetch();
}
}
最后，寫的比較匆忙，不夠詳細，有不理解的加群咨詢群主即可。