相信不止我，很多开发者在之前的很多项目中需要用到富文本工具(特别是一些需要发文章之类的网站)，然后各种封装进来，然后出现各种问题；什么和前端框架不兼容啊，有些东西引入不进来啊。。等等等。。。（笔者在以往的项目中自己引入过2种富文本工具，虽然都很成功，但无疑会浪费很多时间 之前用过的有百度的富文本和一个叫做kindeditor的富文本）
为什么给大家推荐这个小插件呢，因为在有些项目里面 他还真是必不可少的，为了减少开发速度，用这个插件基本上几分钟就能完美引入这个插件了，而且他还可以支撑云存储上传（6666..）
插件介绍: UEditor是由百度web前端研发部开发所见即所得富文本web编辑器 本项目，是为了支持laravel5，使用的UEditor是php版本的1.4.3 支持本地和七牛云存储(在配置文件中配置),默认为本地上传 public/uploads
示例：
一、 安装组件
composer require menthe/aliyun-ueditor -vvv
安装完成后，打开config/app.php配置服务提供者,即provider
Harris\UEditor\UEditorServiceProvider::class,
运行
php artisan vendor:publish
二、配置文件
若以上安装没问题,自定义项目配置文件会生成一个 config/ueditor.php
<?php
/* 前后端通信相关的配置,注释只允许使用多行方式 */
return [
/*
|--------------------------------------------------------------------------
| 新增配置,route
|--------------------------------------------------------------------------
|
|注意权限验证,请自行添加middleware
|middleware 相当重要,请根据自己的项目设置,比如如果在后台使用,请设置为后台的auth middleware.
|如果是单纯本机测试,请将
|`// 'middleware' => 'auth',` 直接注释掉,如果留 `'middleware'=>''`空值,会产生bug,原因不详.
|
|
*/
'core' => [
'route' => [
// 'middleware' => 'auth',
],
'mode'=>'local',//上传方式,local 为本地 qiniu 为七牛
'baseurl'=>'http://admin.test.com',// 设置网站的根路由(可访问到index.php的路由)
//七牛配置,若mode='qiniu',以下为必填.
'qiniu'=>[
'accessKey'=>' env('QINIU_ACCESSKEY');',
'secretKey'=>'env('QINIU_SECRETKEY')',
'bucket'=>'env('QINIU_BUCKET')',// 使用的七牛空间名称
'url'=>'env('QINIU_DOMAIN')',//七牛分配的CDN域名,注意带上http://
]
],
/**
* 和原 UEditor /php/config.json 配置完全相同
*
*/
/* 上传图片配置项 */
'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/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
/* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
/* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
/* {time} 会替换成时间戳 */
/* {yyyy} 会替换成四位年份 */
/* {yy} 会替换成两位年份 */
/* {mm} 会替换成两位月份 */
/* {dd} 会替换成两位日期 */
/* {hh} 会替换成两位小时 */
/* {ii} 会替换成两位分钟 */
/* {ss} 会替换成两位秒 */
/* 非法字符 \ : * ? " < > | */
/* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */
/* 涂鸦图片上传配置项 */
"scrawlActionName" => "uploadscrawl", /* 执行上传涂鸦的action名称 */
"scrawlFieldName" => "upfile", /* 提交的图片表单名称 */
"scrawlPathFormat" => "/uploads/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"scrawlMaxSize" => 2048000, /* 上传大小限制，单位B */
"scrawlUrlPrefix" => "", /* 图片访问路径前缀 */
"scrawlInsertAlign" => "none",
/* 截图工具上传 */
"snapscreenActionName" => "uploadimage", /* 执行上传截图的action名称 */
"snapscreenPathFormat" => "/uploads/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"snapscreenUrlPrefix" => "", /* 图片访问路径前缀 */
"snapscreenInsertAlign" => "none", /* 插入的图片浮动方式 */
/* 抓取远程图片配置 */
"catcherLocalDomain" => ["127.0.0.1", "localhost", "img.baidu.com"],
"catcherActionName" => "catchimage", /* 执行抓取远程图片的action名称 */
"catcherFieldName" => "source", /* 提交的图片列表表单名称 */
"catcherPathFormat" => "/uploads/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"catcherUrlPrefix" => "", /* 图片访问路径前缀 */
"catcherMaxSize" => 2048000, /* 上传大小限制，单位B */
"catcherAllowFiles" => [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */
/* 上传视频配置 */
"videoActionName" => "uploadvideo", /* 执行上传视频的action名称 */
"videoFieldName" => "upfile", /* 提交的视频表单名称 */
"videoPathFormat" => "/uploads/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"videoUrlPrefix" => "", /* 视频访问路径前缀 */
"videoMaxSize" => 102400000, /* 上传大小限制，单位B，默认100MB */
"videoAllowFiles" => [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */
...
...
middleware 相当重要,请根据自己的项目设置,比如如果在后台使用,请设置为后台的auth middleware. 如果是单纯本机测试,请将 // 'middleware' => 'auth', 直接注释掉,如果留 'middleware'=>''空值,会产生bug,原因不详.
所有UEditor 的官方资源,会放在 public/laravel-ueditor/ ,可以根据自己的需求,更改.
这里需要重点说明的是 core.baseurl 这个配置项，必须正确配置，否则上传的图片路径无法正确显示，当然如果使用七牛，这个可留空不做设置.
三、 使用组件
执行完以后步骤后，会在resources/views/vendor/UEditor中看到test.blade.php文件， 现在需要做以下几步操作
生成一个控制器
php artisan make:controller PhotoController
路由中指定控制器
Route::get('/', 'PhotoController@index');
路由指定完成后，控制器中直接输出页面
/**
* 这是我的一个测试方法
* @return \Illuminate\Http\Response
*/
public function index()
{
//
return view('vendor.UEditor.test');
}
这样在浏览器中就可以看到富文本输出在页面上了
另外：
页面里面的js也可以按照自己的需求来调整，csrf_token() 也已经全部写好了。
@include('UEditor::head')
<form method="post">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<!-- 加载编辑器的容器 -->
<textarea id="ueditor" name="content">这里写你的初始化内容</textarea>
<input type="submit" value="提交">
</form>
<script type="text/javascript">
var ue = UE.getEditor('ueditor', {
initialFrameWidth : 1200,
initialFrameHeight : 350,
});
ue.ready(function() {
//此处为支持laravel5 csrf ,根据实际情况修改,目的就是设置 _token 值.
ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');
});
</script>
文件/public/aliyun-ueditor/ueditor.config.js/里面可以根据自己的喜好或者项目的需求，减少功能按钮.
希望这篇文章可以帮到正在奋战的你们。
本文为作者原创，允许转载，转载后请以链接形式说明文章出处. 如转载但不标明来源，后果自负。