laravel框架下使用ueditor富文本编辑器

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;
}