1.安裝ueditor
在composer.json中添加
"stevenyangecho/laravel-u-editor": "~1.4"
并執(zhí)行安裝命令
composer update
2.注冊服務(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>
在底部啟動UEditor
<script type="text/javascript">
var ue = UE.getEditor('container');
ue.ready(function () {
//此處為支持laravel5 csrf ,根據(jù)實際情況修改,目的就是設(shè)置 _token 值.
ue.execCommand('serverparam', '_token', TOKEN);
});
</script>
5.單獨使用ueditor的圖片上傳津肛，文件上傳功能
- 彈出圖片上傳窗口
ue.ready(function () {
ue.getDialog("insertimage").open();
});
監(jiān)聽圖片上傳事件犁享，獲取圖片上傳的相對路徑
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)聽文件上傳事件静尼，獲取文件上傳的相對路徑
ue.addListener('afterUpfile', function (t, arg) {
alert(arg[0].url);
});
6翔脱、添加自定義的按鈕和功能到ueditor
- 為選中的圖片設(shè)置寬度為width:100%磁滚，優(yōu)化圖片在手機端的顯示效果
在ueditor.config.js下搜索toolbars數(shù)組讹蘑，添加自定義工具名
'fullwidth'
在ueditor.all.js下搜索btnCmds數(shù)組怀樟，添加按鈕
'fullwidth'
在ueditor.all.js下搜索UE.commands[找個合適的位置添加功偿，給選中的圖片添加class="fullwidth"來實現(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)（對應(yīng)的icon.png的背景偏移實現(xiàn)）
.edui-for-fullwidth .edui-icon{
background-position:-240px -20px;
}
