在ThinkPHP中实现富文本编辑器可以使用Ueditor或者KindEditor等第三方富文本编辑器。下面以Ueditor为例来说明实现步骤:
下载Ueditor并解压到项目中的public目录下。
在控制器中添加Ueditor的配置信息:
public function ueditor()
{
$data = new \StdClass;
$data->state = 'SUCCESS';//默认为成功
$config = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents("./public/ueditor/config.json")), true);//读取配置文件
$action = input('action');//获取action参数
switch ($action) {
case 'config':
$result = json_encode($config);
break;
//此处省略其他case
default:
$result = json_encode($data);
break;
}
return $result;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>UEditor Demo</title>
<link rel="stylesheet" href="/public/ueditor/themes/default/css/ueditor.css">
</head>
<body>
<textarea name="content" id="editor"></textarea>
<script type="text/javascript" src="/public/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/public/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript">
var ue = UE.getEditor('editor');
</script>
</body>
</html>
需要注意的是,Ueditor的配置文件config.json中有一项UEDITOR_HOME_URL需要配置为Ueditor所在的相对路径,例如:
{
"UEDITOR_HOME_URL": "/public/ueditor/"
}
通过以上步骤,即可在ThinkPHP中实现Ueditor富文本编辑器。