1.安裝ueditor

在composer.json中添加

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

并執(zhí)行安裝命令

composer update

2.注冊(cè)服務(wù)

在config/app.php中的providers數(shù)組中添加服務(wù)

Stevenyangecho\UEditor\UEditorServiceProvider

3.生成ueditor相關(guān)文件

在config目錄下生成配置文件，在public目錄下生成ueditor文件，在view目錄下生成ueditor的js,css鏈接模板

php artisan vendor:publish

4.使用ueditor

在視圖文件中添加以下UEditor的頭部js,css鏈接模板引入

在head標(biāo)簽內(nèi)添加UEditor的js,css文件

@include('UEditor::head');

在body標(biāo)簽內(nèi)添加UEditor的容器

<script id="container" name="content" type="text/plain">
    這里寫你的初始化內(nèi)容
</script>

在底部啟動(dòng)UEditor

<script type="text/javascript">
     var ue = UE.getEditor('container');
    ue.ready(function () {
        //此處為支持laravel5 csrf ,根據(jù)實(shí)際情況修改,目的就是設(shè)置 _token 值.
        ue.execCommand('serverparam', '_token', TOKEN);
    });
</script>

5.單獨(dú)使用ueditor的圖片上傳，文件上傳功能

• 彈出圖片上傳窗口

ue.ready(function () {
    ue.getDialog("insertimage").open();
});

監(jiān)聽圖片上傳事件，獲取圖片上傳的相對(duì)路徑

ue.addListener('beforeInsertImage', function (t, arg) {
    alert(arg[0].src);
});

• 彈出文件上傳窗口

ue.ready(function () {
    ue.getDialog("attachment").open();
});

由于官方的ueditor.all.js中沒有相關(guān)監(jiān)聽事件可以直接使用
所以在ueditor.all.js中添加該監(jiān)聽事件
定位到

me.execCommand('insertHtml', html);

在其下一行添加這句

me.fireEvent('afterUpfile', filelist);

監(jiān)聽文件上傳事件，獲取文件上傳的相對(duì)路徑

ue.addListener('afterUpfile', function (t, arg) {
    alert(arg[0].url);
});

6、添加自定義的按鈕和功能到ueditor

• 為選中的圖片設(shè)置寬度為width:100%，優(yōu)化圖片在手機(jī)端的顯示效果
  在ueditor.config.js下搜索toolbars數(shù)組，添加自定義工具名

'fullwidth'

在ueditor.all.js下搜索btnCmds數(shù)組，添加按鈕

'fullwidth'

在ueditor.all.js下搜索UE.commands[找個(gè)合適的位置添加，給選中的圖片添加class="fullwidth"來實(shí)現(xiàn)

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最后添加自選圖標(biāo)（對(duì)應(yīng)的icon.png的背景偏移實(shí)現(xiàn)）

.edui-for-fullwidth .edui-icon{
    background-position:-240px -20px;
}