近日開發中要在laravel框架中集成富文本編輯器,方便運營同事使用。原來使用TP框架的思路就是把JS文件整合到框架中,然后前端注入,后端交互。在laravel中的思路也應該差不多。下面將laravel集成Ueditor的方法和心得記錄如下:
1. laravel的依賴管理工具composer中可以快速的幫助我們集成ueditor到框架中,配置過程:
配置composer.json文件,在require中寫入:
"stevenyangecho/laravel-u-editor": "~1.4"
然后在cmd模式下輸入:composer update (需要將composer配置為全局變量)
更新完成之后,修改laravel的配置文件(config/app.php):
在 "providers" 這個key 最后加上 :
Stevenyangecho\UEditor\UEditorServiceProvider::class
在"aliases" 這個key最后加上:
'UEditor'=>Stevenyangecho\UEditor\UEditorServiceProvider::class
OK,配置完成之后進入laravel項目的根目錄下輸入:
php artisan vendor:publish
一串文件下載配置之后,laravel項目的public目錄下會自動建立一個laravel-u-editor的文件夾。這個文件夾里包含的是編輯器本身的JS文件。同時在config文件夾下也會生成一個名為UEditorUpload.php的文件,這個是基礎的配置文件。當這些文件都生成之后,說明編輯器已經在項目中集成好了,下一步就可以在視圖文件中進行注入了
2. 前端視圖中整合ue編輯器:
首先引入JS等文件,因為laravel框架已經幫我們集成好了,直接在視圖文件尾部加入
@include('UEditor::head') 即可
然后加載編輯器的容器,最后實例化編輯器,這部分比較簡單,直接貼代碼:
<!-- 加載編輯器的容器 -->
<div id="detail_info">
<script id="container" name="content" type="text/plain" style="width: 900px;position:absolute;left:300px;top:120px;">
</script>
<!-- 實例化編輯器 -->
<script>
var ue = UE.getEditor('container');
</script>
好了,到此為止大功告成。另外有關於百度富文本編輯器的問題,請移步官方api文檔尋找答案。有疑問的話可以評論或者私信我,大家一起研究解決~~~~