Think PHP 完整的带富文本格式以及图片上传，并且在页面上分页展示
Think php6.0官网网址：序言 · ThinkPHP6.0完全开发手册 · 看云 (kancloud.cn)
下面是基础配置
第一步：创建TP框架，命名为tp
composer create-project topthink/think tp
第二步：点击架构里面的多应用模式，安装多应用模式拓展
composer require topthink/think-multi-app
第三步：点击视图里面的模板引擎，安装视图拓展
composer require topthink/think-view
第四步：点击tp框架里面的 .example.env 文件，将该文件重命名为 .env
第五步：创建一个名字为demo的多应用目录，该目录保存在app下
php think build demo
第六步：创建一个名为Goods的控制器
php think make:controller demo@Goods --plain
第七步：创建一个名为Good的模型
php think make:model demo@Good
第八步：在demo目录下面创建路由名为route的目录，并在该目录里面创建route.php路由文件，并借鉴框架里面的route目录下面的app.php路由文件，将下面路径复制到新建的route.php路由文件里面
use think\facade\Route;
下面配置域名数据库
在小皮里面配置第一域名www.2006a.com，并且根目录选择tp框架里面的public目录里面
此时已经可以访问到该框架
打开Nacivat，创建2006a数据库，并创建text表
在demo目录下面的view创建一个form.html，在网页访问的时候后因为域名需要为www.2006a.com/index.php/demo/form 才可以访问，这时需要打开public目录下面的 .htaccess文件，并将最后一行修改为
RewriteRule ^(.*)$ index.php?/$1 [QSA,PT,L]
因为该表单需要富文本，所以要把下面该富文本文件复制到public目录下面
（因文件无法上传，所以放网盘里面了） 链接：https://pan.baidu.com/s/1fsvhldLlJz3rRjPv0kfOMw?pwd=0613
提取码：0613
基本配置已经完成
连接到数据库，找到tp框架下面的.env文件进行修改为以下
APP_DEBUG = true [APP]
DEFAULT_TIMEZONE = Asia/Shanghai [DATABASE]
TYPE = mysql
HOSTNAME = 127.0.0.1
DATABASE = 2006a
USERNAME = root
PASSWORD = root
HOSTPORT = 3306
CHARSET = utf8
DEBUG = true [LANG]
default_lang = zh-cn
点击demo目录下面的模型文件,连接2006a数据库里面的text表单
<?php
declare (strict_types = 1); namespace app\demo\model; use think\Model; /**
* @mixin \think\Model
*/
class Good extends Model
{
//连接表单
public $table='text';
}
下面是富文本到form表单上面
首先找到public目录下的utf8-php，打开该文件夹再点开index.html文件，里面有下面三行代码
<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
选中这三行，要注意的是需要更改路径，将这三行代码复制到已经创建好的dmeo目录下的form表单，路径更改为
<script type="text/javascript" charset="utf-8" src="/utf8-php/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/utf8-php/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="/utf8-php/lang/zh-cn/zh-cn.js"></script>
接着回到index.html文件，在61行，有
<script type="text/javascript">
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');
这个也直接复制到form表单里面，不过需要注意的是，后面要加一个</script>，另外editor是富文本框的id值，注意更改
然后我们大致的表单添加页面就是
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" charset="utf-8" src="/utf8-php/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/utf8-php/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="/utf8-php/lang/zh-cn/zh-cn.js"></script> <body>
<div style="width: 800px; margin: auto;padding-top: 200px;"> <form class="form-horizontal" method="post" enctype="multipart/form-data" action="/demo/add">
<div class="form-group">
<label class="col-sm-2 control-label">用户名：</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">性别：</label>
<div >
<input type="radio" name="userend" value="男">男
<br>
<input type="radio" name="userend" value="女">女
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">个人头像：</label>
<div class="col-sm-10">
<input type="file" class="form-control" name="userimg">
</div>
</div> <div class="form-group">
<label class="col-sm-2 control-label">时间：</label>
<div class="col-sm-10">
<input type="datetime-local" name="usertime" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">个人介绍：</label>
<div class="col-sm-10">
<textarea name="usertext" id="goods_introduce" cols="90" rows="3" placeholder="我喜欢读书、跑步"></textarea>
</div>
</div> <div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary btn-lg">注册</button>
</div>
</div>
</form>
</div>
</body>
</html>
<script type="text/javascript">
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('goods_introduce');
</script>
下面是路由
<?php
use think\facade\Route; Route::get('form',function (){
return view('form');
});
Route::post('add','Goods/add'); Route::get('list','Goods/list'); Route::get('delete','Goods/del');
这个是控制器
<?php
declare (strict_types = 1); namespace app\demo\controller; use app\Request;
use think\facade\Filesystem;
use think\facade\View; class Goods
{
//添加
public function add(Request $request){
$pram=$request->param();
$data= new \app\demo\model\Good();
$file=$request->file('userimg');
$save='/'.Filesystem::disk('public')->putFile('image',$file);
$pram['userimg']=$save;
$res=$data->insert($pram);
if ($res){
return "<script>alert('添加成功');location.href='list'</script>";
}
} //展示
public function list(){
// $data=new \app\demo\model\Good();
// $res=$data->paginate(3); $data=\app\demo\model\Good::order('id','desc')->paginate(3);
return View::fetch('/list',['data'=>$data]); } //删除
public function del(Request $request){
$id=$request->param('id');
$data= new \app\demo\model\Good();
$del=$data->where('id',$id)->delete();
if ($del){
return "<script>alert('删除成功');location.href='list'</script>";
}else{
return "<script>alert('删除失败');location.href='list'</script>";
}
}
}
最基础的添加展示和删除就完成了
Think PHP 完整的带富文本格式以及图片上传，并且在页面上分页展示的更多相关文章
- 用POP动画编写带富文本的自定义动画效果
用POP动画编写带富文本的自定义动画效果 [源码] https://github.com/YouXianMing/UI-Component-Collection [效果] [特点] * 支持富文本 * ...
- SpringMvc + Jsp+ 富文本 kindeditor 进行 图片ftp上传nginx服务器 实现
一:html 原生态的附件上传 二:实现逻辑分析: 1.1.1 需求分析 Common.js 1.绑定事件 2.初始化参数 3.上传图片的url: /pic/upload 4.上图片参数名称: upl ...
- 在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传（开源代码.net core3.0）
我们的富文本编辑器不能没有图片上传尤其是截图上传,下面我来教大家怎么实现MarkDown富文本编辑器截图上传和图片上传. 1.配置编辑器到html页 <div id="test-edi ...
- 百度富文本Ueditor将图片存在项目外路径并回显
我的毕设中需要一个类似新闻发布的功能,使用到百度富文本编辑器,不过百度富文本编辑器有点坑(只是我太菜了),粘贴图片和回显这个坑坑了我两天时间.效果是这样的: 就是可以在文本中粘贴图片并显示出来,直接说 ...
- 富文本vue-quill-editor修改图片上传方法
富文本vue-quill-editor修改图片上传方法 HTML 代码 HTML codes <!-- 上传的组件 --> <upload style="display:n ...
- Vue富文本编辑器（图片拖拽缩放）
富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很 ...
- jenkins+svn完整打包并上传到linux服务器上
因为公司用的是svn版本管理工具并且部署在了windows服务器上,所以测试环使用jenkins需要部署两套环境, 一套是在本地windows服务器,jenkins从svn下载代码完成打包并上传到li ...
- vue-quill-editor + iview 实现富文本编辑器及图片上传
1.npm 安装 vue-quill-editor npm install vue-quill-editor 2.再main.js中引入 import VueQuillEditor from 'vue ...
- 关于移动手机端富文本编辑器qeditor图片上传改造
日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...
随机推荐
- SSMS设置为深色模式
更新记录 2022年4月16日:本文迁移自Panda666原博客,原发布时间:2022年2月8日. 2022年4月16日:SSMS很好用,但现在我更多使用DataGrip了. 2022年6月11日:S ...
- ASP.NET Core 应用配置指定地址和端口
更新记录 本文迁移自Panda666原博客,原发布时间:2021年5月10日. 几种方式 ASP.NET Core 应用配置指定地址和端口支持以下几种主要方式: 1.在命令行模式启动应用时设置 --u ...
- 万字剖析Ribbon核心组件以及运行原理
大家好,本文我将继续来剖析SpringCloud中负载均衡组件Ribbon的源码.本来我是打算接着OpenFeign动态代理生成文章直接讲Feign是如何整合Ribbon的,但是文章写了一半发现,如果 ...
- 获取在线ip
/** * 获取在线IP * @return String */ function getOnlineIp($format=0) { global $S_GLOBAL; if(empty($S_GLO ...
- SAP Word97 Intergration
*&---------------------------------------------------------------------* *& Report SAPRDEMOW ...
- Jenkins+Svn+Docker搭建持续集成环境 自动部署
一.准备工作: 两台服务器:192.168.206.212,192.168.206.213 自己新建一个maven项目 其中两台机子做下面的软件配置 212机子: 安装expect并配置: 安装jen ...
- sql server 开启一个事务
开启事务,回滚 /*============================================================== */ /* Date : 2020年11月18日 11 ...
- 从0到1建设智能灰度数据体系：以vivo游戏中心为例
作者: vivo 互联网数据分析团队-Dong Chenwei vivo 互联网大数据团队-Qin Cancan.Zeng Kun 本文介绍了vivo游戏中心在灰度数据分析体系上的实践经验,从&quo ...
- vim插件的社区活跃度怎么样
www.vim.org -> Scripts -> Browse all可以看到有5051个插件.搜索Nerd可以看到NerdTree插件,它的评分是Rating 7882/2514, D ...
- 有关golang信道的面试笔记
信道是一个goroutine之间很关键的通信媒介. 理解golang的信道很重要,这里记录平时易忘记的.易混淆的点. 1. 基本使用 刚声明的信道,零值为nil,无法直接使用,需配合make函数进行初 ...