一、前言
由于工作需求需要集成富文本编辑器，本来是想要选用之前用过的WangEditor的，但是考虑到WangEditor还是比较小众，所以最终选择了没用过的Uedtor,这篇文章主要讲述了Yii2.0集成Ueditor的基本配置，以及上传单张，多张图片，上传视频的问题。
二、集成Yii2-ueditor-widget以及基本的配置
1、选用kucha/ueditor
在开始之前，肯定是要先搜索一下有没有第三方插件的Ueditor的，直接引入的话，会比较麻烦，用的时候需要改命名空间等，所以这边直接选用了裤衩大神写的插件。
2、相关配置
博主在通过composer引入之后，然后按照裤衩大神的配置大致配置了一下。但是由于文档有限，好多地方还是似懂非懂的，走了不少弯路，这边详细记录一下配置的过程
（1）假定你按照github上面的配置了一遍，一定是似懂非懂的状态
首先，假如说你是要在NewsController下使用富文本编辑器，那么首先操作是：
//这个东西是必须要配置的，位置的话没什么特别的要求，直接加到控制器里面就行了，具体的
//配置参照注释
public function actions()
{
return [
'upload' => [
'class' => 'kucha\ueditor\UEditorAction',
'config' => [
"imageUrlPrefix" => "",//图片访问路径前缀
"imagePathFormat" => "/img/{time}{rand:6}", //上传保存路径
"imageFieldName" => "xxx", //这个我怀疑是随便写都行
"imageActionName" => "uploadimage", //这里uploadimage一定要用小写，请求的时候，会自动拼接action 上去，类似于：
//http://xxxxxx.com/index.php?r=xxxx/upload&action=uploadimage 具体参考UEditorAction的48行
],
]
];
}
（2）其次是使用activeForm引入编辑器
echo $form->field($model,'content')->widget('kucha\ueditor\UEditor',['id'=>'content','name'=>'content','clientOptions' => [
'serverUrl'=>$url, //这个是上传图片用到的方法的路由
'lang' =>'en', //中文为 zh-cn
'initialFrameHeight' => '400', //编辑器显示高度
'autoHeightEnabled'=>false, //出现滚动条
//定制菜单 //'insertvideo', 这个是上传视频tab
'toolbars' => [
[
'fullscreen', 'source', 'undo', 'redo', '|',
'fontsize',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat',
'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|',
'forecolor', 'backcolor', '|',
'lineheight', '|',
'indent', '|','simpleupload','insertimage','justifyleft', 'justifyright', 'justifycenter', 'justifyjustify', //两端对齐
],
]]]);
上面是编辑器的一些配置，可以直接引用的。相关的菜单博主去掉了不少，只保留需要用到的，主要是上传图片等。那个出现滚动条的配置是防止编辑器里面内容过多，把页面撑变形。
（3）刷新页面，控制套报错：Server config format error.
很明显是咱们的配置出现了问题。这里困扰了博主挺久的，主要是不知道该从哪里进行排错，既然是服务器配置问题，那是有八九是config引入的问题。具体的请参考上面actions的配置，主要是imageActionName这项，一定要是小写的uploadimage ，因为在上传方法中，使用的就是这个方法。
其次就是我们配置actions的时候，是return了一个upload数组,所以控制器要新增：
public functon upload(){
}
OK，刷新页面，错误消失，终于看到了传说中的Ueditor。
三、上传单张图片
1、上传图片的配置
点击上传图片，经过的步骤都有哪些呢？基本上点击上传之后都会报错，因为我们的配置还没有结束，大家可以参考下上传类的源码，根据源码一步步调试：
（1） 源码部分参考：UEditorAction.php的handleAction()方法，可以根据源码一步步查看，也就那些上传的步骤，大家一看就懂
（2） 上传使用的是Uploader.php类，进入里面先初始化，上传图片执行：upFile() 方法
（3） serverUrl一定要配置一下，不然上传图片会报错，访问不到指定的控制器方法
这里的$url就是自己定义的路径，大概是：?r=你的控制器名字/upload
大家按照上面的方法一步步调试，基本上传图片就走通了，在执行完upFile() 方法之后，会返回指定格式的数组，数组中的url就是我们图片的地址，大家可以打印着看一下。
2、上传成功之后，编辑器内不显示图片，只是显示一串字符串的问题
如果是把图片直接上传到根项目内，是不会出现这个问题的，直接就能访问到。我这边是把图片上传到了项目外，所以访问才出现了问题，虽然返回了url，但是根本无法访问项目外的文件。
（1） 打印返回的数据
original: "14683807384225690.jpg"
size: 10618
state: "SUCCESS"
title: "news"
type: ".jpg"
url: "电脑上图片的绝对路径"
（2） 点击编辑器左上角的html，我们可以看到，img标签的src引入的就是这个url的地址。因为图片是在项目外，所以并不能通过file:///文件协议直接访问到
（3） 通过替换返回的url值，返回一个接口地址，通过接口去读取图片流，返回给img的src即可
替换的地方：Uploader.php的upFile（）方法:
//$this->filePath = $this->getFilePath();
$this->filePath = \Yii::getAlias('@out_news'); 这一步先替换路径为自己的路径
//移动文件部分，拼接成自己的路径即可
Uploader.php的getFileInfo（）方法：
$name = substr($this->imgName,5);
// 这里本来返回的是全路径的图片地址，例如：C:\phpStudy\PHPTutorial\WWW/xxx/1562124088174261.jpg
//因为我把图片上传到了非项目目录，所以直接通过这个路径访问不到后续的图片。为了防止麻烦，索性拼接php接口地址
//访问php接口，返回图片资源，然后ueditor再把图片资源赋值给img的src即可正常显示
$http_url = "?r=xxxx/xxxxx&&imageName=".$name;
return array(
"state" => $this->stateInfo,
// "url" => $this->fullName,
"url" => $http_url,
"title" => $this->fileName,
"original" => $this->oriName,
"type" => $this->fileType,
"size" => $this->fileSize
);
关于接口读取图片，返回图片流的部分，需要的话可以参考：
网页上的base64码太长？科普base64到底是啥
如此单图片上传就算是完成了，能在编辑器中直接看到上传的图片。
四、上传多张图片
单张图片完成上传之后，点击多图上传，本以为会老老实实的成功，结果却发现图片报错：http error ！！！
1、查看network，发现路径为：
http://xxxx.com/assets/e96af72c/dialogs/image/image.html?r=xxxxx&action=uploadimage&encode=utf-8
很明显并不是yii的路由路径，此处猜测应该是没有限定根目录造成的，也就是serverUrl不够严谨造成的。
2、修改serverUrl
$url = "/index.php/?r=xxxx/upload"; //把/index.php/拼上即可
原来我写的地址是直接/?r=xxxx/upload，没有加上前面的index.php
3、多图上传成功，编辑器内正常显示，图片正常存储。
五、上传视频
上传视频的方法，我们可以去config里面看看，定义的有上传方法名称。博主本来还担心上传视频会很麻烦，实际上只要走上传图片部分的逻辑就好了，使用上传图片的方法也能够成功保存mp4文件。
（1） 上传视频不能正常播放问题，参考：
https://www.cnblogs.com/yuan951/p/7286242.html
这里就按照这个博主的配置，配置一下就可以。
（2） php读取mp4文件，返回流给video标签的src，视频播放，此处应该有代码
还是老问题，我这边访问不到项目外的文件，因此使用php解析mp4文件，返回流给video标签展示
public function actionUploadVideo()
{
header("Content-type: video/mp4");
header("Accept-Ranges: bytes");
Yii::$app->response->format = Response::FORMAT_JSON;
$objStr = new StringUtil();
$g_data = $objStr->strStripslashes($_GET);
$db_g_data = $objStr->strAddslashes($g_data);
$video = isset($db_g_data ['videoName']) ? $db_g_data ['videoName'] : "";
$path = \Yii::getAlias('@out_news');
$file = $path . "/video/".$video;
$size = filesize($file);
if(isset($_SERVER['HTTP_RANGE'])){
header("HTTP/1.1 206 Partial Content");
list($name, $range) = explode("=", $_SERVER['HTTP_RANGE']);
list($begin, $end) =explode("-", $range);
if($end == 0) $end = $size - 1;
}
else {
$begin = 0; $end = $size - 1;
}
header("Content-Length: " . ($end - $begin + 1));
header("Content-Disposition: filename=".basename($file));
header("Content-Range: bytes ".$begin."-".$end."/".$size);
$fp = fopen($file, 'rb');
fseek($fp, $begin);
while(!feof($fp)) {
$p = min(1024, $end - $begin + 1);
$begin += $p;
echo fread($fp, $p);
}
fclose($fp);
}
（3） src会自动清空问题，以及切换html标签之后，视频变成图片的问题
在视频能正常显示之后，我们会发现点击切换html标签，再切换回来的时候，视频消失了，变成了图片。这个问题貌似ueditor也发现了，具体的参考下面的链接吧，改一改源码即可。
参考： https://blog.csdn.net/yingjia11/article/details/78472261
（4） 上述问题是解决了，但是视频无法删除？
暂时没什么好方案，点击html删除视频吧
六、获取数据
以上完成之后，基本上就没什么难点了，剩下的就是获取数据的操作，这边简单列出一下：
1、获取编辑器中的内容
var content = UE.getEditor("activeForm中的id").getContent();
关于jquery怎么获取ueditor中的内容，可以参考：https://blog.csdn.net/qq_37138818/article/details/83653881
2、如果报错：Cannot read property ‘offsetWidth’ of null
可以参考：https://q.cnblogs.com/q/111336/ （不过考虑到是composer安装，自动初始化的，遇到这个问题的可能性小）
3、获取之后，剩下的就是业务逻辑了。如果要给编辑框赋值，采用函数：
UE.getEditor("activeForm中的id").setContent("你要赋值的内容");
七、使用ueditor的感受
通过近一天的配置，博主终于可以正常使用ueditor的相关功能，只是感觉麻烦，非常之麻烦。遇到问题总是要动源码部分，每次给源码动刀都心惊肉跳的，生怕影响到了其他功能。个人感觉上还是WangEditor更好用一些，最起码轻量级，够简单。
============ 2019年7月8日补充 ==========================
1、修改默认上传图片的/upload
这个路由看起来不够明显，并不能一眼知道它到底是哪部分的上传，所以最好是按照自己的业务逻辑修改下，比如改成/news-upload
（1）只是修改actions里面的upload为news-upload的话，会报错，server config错误。
return [
'news-upload' => [
'class' => 'kucha\ueditor\UEditorAction',
（2）console控制台发现有个请求http://xxx.com/index.php/?r=gm/upload&action=config&&noCache=1562556059012‘
这个链接的意思是请求ueditor的配置文件，但是很明显，这里的请求是错误的，路由并不是最新的路由
（3）在ueditor_all_js的8246行，打印url，发现url还是旧的方法。
（4）实在找不到这个在哪配置了，肯定是serverUrl的锅,参考：https://www.oschina.net/question/274219_240962?sort=time
本来以为会是Ueditor.php的init()方法中重写serverUrl，不过既然我们初始化的时候配置过serverUrl了，那么应该是以初始化的
配置为基准的。
（4）修改初始化编辑器里面的serverUrl，改为news-image这个新的方法
（5）刷新页面，请求成功，编辑器没再出错，上传图片功能可以正常使用
2、再次理解serverUrl是干嘛的
关于serverUrl,如果还有些疑惑的话，可以在ueditor.all.js中搜索：me.getOpt('serverUrl') ，大概是在24506行，会发现
拼接了一个form表单的action，用我们设置的serverUrl当做表单的action。然后去页面上搜索“edui_form_”，查看元素就会发现，
这个id对应的就是上传图片的小图标。
end
共同学习，写下你的评论
评论加载中...
作者其他优质文章
