1.安装ueditor
在composer.json中添加
"stevenyangecho/laravel-u-editor": "~1.4"
并执行安装命令
composer update
2.注册服务
在config/app.php中的providers数组中添加服务
Stevenyangecho\UEditor\UEditorServiceProvider
3.生成ueditor相关文件
在config目录下生成配置文件，在public目录下生成ueditor文件，在view目录下生成ueditor的js,css链接模板
php artisan vendor:publish
4.使用ueditor
在视图文件中添加以下UEditor的头部js,css链接模板引入
在head标签内添加UEditor的js,css文件
@include('UEditor::head');
在body标签内添加UEditor的容器
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
在底部启动UEditor
<script type="text/javascript">
var ue = UE.getEditor('container');
ue.ready(function () {
//此处为支持laravel5 csrf ,根据实际情况修改,目的就是设置 _token 值.
ue.execCommand('serverparam', '_token', TOKEN);
});
</script>
5.单独使用ueditor的图片上传，文件上传功能
- 弹出图片上传窗口
ue.ready(function () {
ue.getDialog("insertimage").open();
});
监听图片上传事件，获取图片上传的相对路径
ue.addListener('beforeInsertImage', function (t, arg) {
alert(arg[0].src);
});
- 弹出文件上传窗口
ue.ready(function () {
ue.getDialog("attachment").open();
});
由于官方的ueditor.all.js中没有相关监听事件可以直接使用
所以在ueditor.all.js中添加该监听事件
定位到
me.execCommand('insertHtml', html);
在其下一行添加这句
me.fireEvent('afterUpfile', filelist);
监听文件上传事件，获取文件上传的相对路径
ue.addListener('afterUpfile', function (t, arg) {
alert(arg[0].url);
});
6、添加自定义的按钮和功能到ueditor
- 为选中的图片设置宽度为width:100%，优化图片在手机端的显示效果
在ueditor.config.js下搜索toolbars数组，添加自定义工具名
'fullwidth'
在ueditor.all.js下搜索btnCmds数组，添加按钮
'fullwidth'
在ueditor.all.js下搜索UE.commands[找个合适的位置添加，给选中的图片添加class="fullwidth"来实现
UE.commands['fullwidth'] = {
execCommand: function (cmdName, align) {
var select = this.selection.getStart();
if(select.nodeName == "IMG"){
UE.dom.domUtils.addClass(select,"fullwidth");
}
return true ;
}
};
在ueditor.css最后添加自选图标（对应的icon.png的背景偏移实现）
.edui-for-fullwidth .edui-icon{
background-position:-240px -20px;
}
