IMCSI

0%

Laravel使用（UEditor,表单验证）

发表于 更新于 分类于 Valine：

1.富文本编辑器（UEditor）
laravel的依赖管理工具composer中可以快速的帮助我们集成ueditor到框架中，配置过程：

在laravel项目根目录配置composer.json文件，在require中写入：

1
"stevenyangecho/laravel-u-editor": "~1.4"

然后在cmd模式下输入：composer update （需要将composer配置为全局变量）

1
2
3
4
5
6
7
8
9
PS E:\wamp\www\blog> composer update
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 3 installs, 31 updates, 0 removals
 - Updating symfony/polyfill-mbstring (v1.6.0 => v1.7.0): Downloading (100%)
 - Updating symfony/var-dumper (v3.3.13 => v3.4.6): Downloading (100%)
 - Updating symfony/debug (v3.3.13 => v3.4.6): Downloading (100%)
.......//省略部分内容
Package manifest generated successfully.

更新完成之后，修改laravel的配置文件（config/app.php）:

在 “providers” 这个key 最后加上 ：

1
Stevenyangecho\UEditor\UEditorServiceProvider::class

在”aliases” 这个key最后加上：

1
'UEditor'=>Stevenyangecho\UEditor\UEditorServiceProvider::class

配置完之后，命令提示符进入项目的根目录：

1
2
3
4
5
6
PS E:\wamp\www> cd blog
PS E:\wamp\www\blog> php artisan vendor:publish


  [Symfony\Component\Debug\Exception\FatalThrowableError]
  Class 'Stevenyangecho\UEditor\UEditorServiceProvider' not found

提示以上的错误要确定之前的步骤是否正确：

1
2
3
4
5
6
7
8
9
PS E:\wamp\www\blog> php artisan vendor:publish

 Which provider or tag's files would you like to publish?:
  [0 ] Publish files from all providers and tags listed below
.......
 > 0//输入0

.......
Publishing complete.

出现以上信息说明已经配置完成。

一串文件下载配置之后，laravel项目的public目录下会自动建立一个laravel-u-editor的文件夹。这个文件夹里包含的是编辑器本身的JS文件。同时在config文件夹下也会生成一个名为UEditorUpload.php的文件，这个是基础的配置文件。当这些文件都生成之后，说明编辑器已经在项目中集成好了，下一步就可以在视图文件中进行注入了

前端视图中整合ue编辑器：

首先引入JS等文件，因为laravel框架已经帮我们集成好了，直接在视图文件尾部加入

1
@include('UEditor::head') 即可

然后加载编辑器的容器，最后实例化编辑器，这部分比较简单，直接贴代码：

加载编辑器的容器

1
2
3
4
<div id="detail_info">
<script id="container" name="content" type="text/plain" style="width: 900px;position:absolute;left:300px;top:120px;">
{!! html_entity_decode($article->content) !!} //将富文本编辑器内容转义并在页面上显示
</script>

实例化编辑器

1
2
3
4
5
6
7
<script>

var ue = UE.getEditor('container');
ue.ready(function(){ 
ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); //这里添加laravel安全token：便于数据提交
});
</script>

UEditor增加视频上传
UEditor安装好了之后并没有很好的支持插入视频，即便插入视频之后还是显示空白。

查阅了网上相关资料后，可以用一下方法实现视频上传：
修改ueditor.all.js文件（Laravel项目在public\laravel-u-editor下）

ueditor.all.js，17769行

html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, ‘image’));修改为

html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, ‘video’));

7343,7344,7346行，注释掉代码：

var root = UE.htmlparser(html);

me.filterInputRule(root);

html = root.toHtml();

然后清除一下缓存，刷新页面即可添加视频。

视频无法预览，但是仍可改变布局和大小。

看到有些博客写将whitList修改为whiteList，好像并没有什么效果。。

Ueditor图片上传

在laravel中使用ueditor上传图片依旧会出现上传错误的提示，按F12可以看到：

说明是一个图片上传的请求地址，原因可能出在上传的图片的保存路径。打开Ueditor扩展包的配置文件config/UEditorUpload.php：

/* 上传图片配置项 */
'upload' => [
    "imageActionName" => "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName" => "upfile", /* 提交的图片表单名称 */
    "imageMaxSize" => 2048000, /* 上传大小限制，单位B */
    "imageAllowFiles" => [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable" => true, /* 是否压缩图片,默认是true */
    "imageCompressBorder" => 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign" => "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix" => "", /* 图片访问路径前缀 */
    "imagePathFormat" => "/uploads/ueditor/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

将imagePathFormat改为图片保存的目录。Linux系统需要注意权限问题。修改之后重新选择图片本地上传，还是会出现以下问题：

在这个Upload.php中rand 第二个参数太长导致的，然后找到这个文件，路径：vendor\stevenyangecho\laravel-u-editor\src\Uploader下面。然后找到131行，发现：
$randNum = rand(1, 10000000000) . rand(1, 10000000000); 更改成
$randNum = rand(1, 1000000) . rand(1, 1000000);
修改之后上传的问题解决了。Linux系统下还是需要注意文件的路径问题以及权限问题。

Ueditor图片左右浮动

1
2
3
4
5
,xssFilterRules: true
//input xss过滤
,inputXssFilter: true
//output xss过滤
,outputXssFilter: true

然后设置元素的白名单过滤：

1
2
3
4
5
,whitList: {
...
img: [..., 'style'],
...
}

使img的style属性忽略。

2.表单验证
直接上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public function store(Request $request) {
	$data = $request->except('_token');//获取除token外的所有表单数据
	$this->validate($request, [//验证表单值
		'title' => 'requred',//设置title为必填
		'content' => 'integer',//设置content整数

	], [
		'required' => ':attribute 为必填项',//自定义提示文字，默认为英文
		'min' => ':attribute 长度不符合要求',
		'integer' => ':attribute 必须为整数',
	], [
		'title' => '标题',//设置表单字段表示的含义
		'content' => '内容',
	]);//当验证未通过则自动返回表单页面，不会执行以下内容
	$result = DB::table('news')
		->insert($data);//数据插入
	if ($result) {
		return redirect()->back()->with('msg', '操作成功');//插入成功，返回添加页
	} else {
		return redirect()->back()->with('msg', '操作失败')->withInput();//插入失败，返回添加页并提示错误，将原表单数据返回
	}
}

在页面上显示提示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@if (count($errors) > 0)//$errors 变量在每次请求的所有视图中都可以被使用，你可以很方便的假设 $errors 变量已被定义且进行安全地使用。
  <div class="alert alert-danger">//验证未通过则返回错误信息
    <ul>
      @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
      @endforeach
    </ul>
  </div>
@endif

<fieldset>
    <div class="form-group">
        <label class="col-sm-2 control-label">资讯标题</label>
      {{session('success')}}//此处返回表单验证通过后闪存中session的信息
        <div class="col-sm-6">
            <input value="{{old('title')}}" class="form-control" id="title" type="text" name="title"  style="width:40%;"/>
        </div>
    </div>

3.数据筛选和分页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
public function index(Request $request) {
	if ($request->input('category_id')) {//判断是否带有分类id
		$category_id = $request->input('category_id');//获取分类id
		if ($category_id == 'all') {//判断是否是所有分类
			$news = DB::table('news')
				->select('id', 'title', 'category_id', 'addtime')
				->orderBy("id", "desc")
				->paginate(10);
		} else {//否则执行where查询单个分类
			$news = DB::table('news')
				->select('id', 'title', 'category_id', 'addtime')
				->where('category_id', $category_id)
				->orderBy("id", "desc")
				->paginate(10);
		}
	} else {//不带分类id则默认加上，方便在分页里调用
		$news = DB::table('news')
			->select('id', 'title', 'category_id', 'addtime')
			->orderBy("id", "desc")
			->paginate(10);
		$category_id = 'all';
	}
    
	$category = DB::table('category')
		->get();
	$assign = array(
		'news' => $news,
		'category' => $category,
		'category_id' => $category_id,//用于记住分类id
	);
	return view('admin.news.index', $assign);
}

重点在于：

默认的分页展示写法是这样的：

1
{!! $news->links() !!}

那么当分页筛选成功后，点击下一页则无法按照条件筛选，因为category_id没有存入到分页的url。我们需要将分类id加入到分页url中才能记住用户选择的分类id：

1
{!! $news->appends(array('category_id'=>$category_id))->links() !!}

那么生成的分页url是这样的：

1
http://www.blog.com/admin/news/index?category_id=1&page=2

就能记住用户选择的分类id进行where条件筛选。