thinkphp6.0如何使用kindeditor(一)

来源:WX部落

文章通过实战讲解如何在thinkphp6.0中使用kindeditor,相信通过阅读本文,你将掌握如何在thinkphp6.0中使用kindeditor的方法。实战代码已在github上共享,需要的小伙伴可以自取。

本文主要讲解thinkphp6.0如何整合kindeditor,通过阅读本文,你可以掌握thinkphp6.0使用kindeditor的方法。

1、首先安装一个tp6的项目

composer create-project topthink/think kindeditor

2、下载kindeditory源码,本文写作时,最新版本为4.1.12

https://github.com/kindsoft/kindeditor/releases

将下载的源码解压缩后,看到如下图所示目录结构,只保留红框中的部分就可以,将其他部分删掉即可

然后将kindeditory目录,复制到刚创建的tp6项目的public/static下面

3、安装模板引擎

composer require topthink/think-view

4、在app\controller\Index.php中添加一个测试方法index

<?php
namespace app\controller;

use app\BaseController;
use think\facade\View;

class Index extends BaseController
{
    /**
     * Notes: 测试kindeditor编辑器
     * Author: 陈宁
     * Website: http://wxbuluo.com
     * DateTime: 2021/12/24 11:33
     * @return string
     */
    public function index()
    {
        if($this->request->isPost()){
            // 打印编辑器输入的内容
            dump($this->request->post('content'));
        }else{
            return View::fetch('index');
        }
    }
}

5、创建一个模板app\view\index\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/5.1.3/css/bootstrap.min.css">
    <style>
        #editor_id {
            width: 50vw;
            height: 50vh;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <form action="" method="POST">
            <textarea id="editor_id" class="form-control" name="content"></textarea>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</div>

<script src="/static/kindeditor/kindeditor-all-min.js"></script>
<script>
    var editor;
    KindEditor.ready(function (K) {
        editor = K.create('#editor_id', {
            /*上传接口*/
            uploadJson: '/static/kindeditor/php/upload_json.php' 
        });
    });
</script>
</body>
</html>

6、kindeditory给我们提供了一个上传接口的示例,就是/static/kindeditor/php/upload_json.php,我本地测试的php环境为php7.3.9,这个文件中的部分代码已不适用,我稍微修改了一下,主要是返回json部分的代码。这里我们主要关注一下文件上传的路径,这里我们上传到了/public/uploads下面,大家记得要在public下面先创建uploads文件夹,我的测试环境为windows,不存在写入权限的问题,如果是linux,或者mac,需要给文件夹以写入权限

<?php
/**
 * KindEditor PHP
 *
 * 本PHP程序是演示程序,建议不要直接在实际项目中使用。
 * 如果您确定直接使用本程序,使用之前请仔细确认相关安全设置。
 *
 */

//require_once 'JSON.php';
$php_path = dirname(__FILE__) . '/';
$php_url = dirname($_SERVER['PHP_SELF']) . '/';

//文件保存目录路径,这里我们上传到/public/uploads/下面
$save_path = $php_path . '../../../uploads/';
//文件保存目录URL
$save_url = $php_url . '../../../uploads/';

//定义允许上传的文件扩展名
$ext_arr = array(
	'image' => array('gif', 'jpg', 'jpeg', 'png', 'bmp'),
	'flash' => array('swf', 'flv'),
	'media' => array('swf', 'flv', 'mp3', 'wav', 'wma', 'wmv', 'mid', 'avi', 'mpg', 'asf', 'rm', 'rmvb'),
	'file' => array('doc', 'docx', 'xls', 'xlsx', 'ppt', 'txt', 'zip', 'rar', 'gz', 'bz2'),
);
//最大文件大小
$max_size = 1000000;

$save_path = realpath($save_path) . '/';

//PHP上传失败
if (!empty($_FILES['imgFile']['error'])) {
	switch($_FILES['imgFile']['error']){
		case '1':
			$error = '超过php.ini允许的大小。';
			break;
		case '2':
			$error = '超过表单允许的大小。';
			break;
		case '3':
			$error = '图片只有部分被上传。';
			break;
		case '4':
			$error = '请选择图片。';
			break;
		case '6':
			$error = '找不到临时目录。';
			break;
		case '7':
			$error = '写文件到硬盘出错。';
			break;
		case '8':
			$error = 'File upload stopped by extension。';
			break;
		case '999':
		default:
			$error = '未知错误。';
	}
	alert($error);
}

//有上传文件时
if (empty($_FILES) === false) {
	//原文件名
	$file_name = $_FILES['imgFile']['name'];
	//服务器上临时文件名
	$tmp_name = $_FILES['imgFile']['tmp_name'];
	//文件大小
	$file_size = $_FILES['imgFile']['size'];
	//检查文件名
	if (!$file_name) {
		alert("请选择文件。");
	}
	//检查目录
	if (@is_dir($save_path) === false) {
		alert("上传目录不存在。");
	}
	//检查目录写权限
	if (@is_writable($save_path) === false) {
		alert("上传目录没有写权限。");
	}
	//检查是否已上传
	if (@is_uploaded_file($tmp_name) === false) {
		alert("上传失败。");
	}
	//检查文件大小
	if ($file_size > $max_size) {
		alert("上传文件大小超过限制。");
	}
	//检查目录名
	$dir_name = empty($_GET['dir']) ? 'image' : trim($_GET['dir']);
	if (empty($ext_arr[$dir_name])) {
		alert("目录名不正确。");
	}
	//获得文件扩展名
	$temp_arr = explode(".", $file_name);
	$file_ext = array_pop($temp_arr);
	$file_ext = trim($file_ext);
	$file_ext = strtolower($file_ext);
	//检查扩展名
	if (in_array($file_ext, $ext_arr[$dir_name]) === false) {
		alert("上传文件扩展名是不允许的扩展名。\n只允许" . implode(",", $ext_arr[$dir_name]) . "格式。");
	}
	//创建文件夹
	if ($dir_name !== '') {
		$save_path .= $dir_name . "/";
		$save_url .= $dir_name . "/";
		if (!file_exists($save_path)) {
			mkdir($save_path);
		}
	}
	$ymd = date("Ymd");
	$save_path .= $ymd . "/";
	$save_url .= $ymd . "/";
	if (!file_exists($save_path)) {
		mkdir($save_path);
	}
	//新文件名
	$new_file_name = date("YmdHis") . '_' . rand(10000, 99999) . '.' . $file_ext;
	//移动文件
	$file_path = $save_path . $new_file_name;
	if (move_uploaded_file($tmp_name, $file_path) === false) {
		alert("上传文件失败。");
	}
	@chmod($file_path, 0644);
	$file_url = $save_url . $new_file_name;

	header('Content-type: text/html; charset=UTF-8');
//	$json = new Services_JSON();
//	echo $json->encode(array('error' => 0, 'url' => $file_url));
	echo json_encode(['error'=>0,'url'=>$file_url]);
	exit;
}

function alert($msg) {
	header('Content-type: text/html; charset=UTF-8');
//	$json = new Services_JSON();
//	echo $json->encode(array('error' => 1, 'message' => $msg));
	echo json_encode(['error'=>1,'message'=>$msg]);
	exit;
}

7、输入点内容测试一下,或者上传个图片测试一下

声明:

① 凡本网所有原创文章及图片、图表的版权均属WX部落所有,如需转载,需注明“信息来源:WX部落”,并且添加本文地址:http://wxbuluo.com/index/article/37.html

② 凡本网注明“来源:XXX(非WX部落)”的文字及图片内容,均转载自其他媒体,版权归原媒体及作者所有。转载目的在于传递更多的资讯,并不代表本网赞同其观点和对其真实性负责。如有侵权,请联系删除。联系方式:296720094@qq.com

③ 本网站的资源部分内容来源于网络,仅供大家学习与参考,如有侵权,请联系站长296720094@qq.com进行删除处理。

④ 部分项目课程具有时效性,如发布时间较长请搜索相关课程选择发布时间最近的查看。

⑤ 部分具有时效性的项目课程文章,我们会逐步转移到免费类分类开放下载。同时免费分类链接失效不补!

⑥ 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

相关文章推荐: