在Laravel中手動(dòng)引入最新版UEditor編輯器。
1. 在官網(wǎng)下載的Ueditor編輯器的代碼包中根目錄下有index.html示例文件,打開(kāi)該文件,復(fù)制head標(biāo)簽中引入CSS、js的部分,粘貼到你要引入的代碼文件中(模板或者h(yuǎn)tml)
<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script><script type="text/Javascript" charset="utf-8" src="ueditor.all.min.js"> </script><!--建議手動(dòng)加在語(yǔ)言,避免在ie下有時(shí)因?yàn)榧虞d語(yǔ)言失敗導(dǎo)致編輯器加載失敗--><!--這里加載的語(yǔ)言文件會(huì)覆蓋你在配置項(xiàng)目里添加的語(yǔ)言類型,比如你在配置項(xiàng)目里配置的是英文,這里加載的中文,那最后就是中文--><script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>2. 修改相關(guān)引入路徑,使引入的文件都能找到
<script type="text/javascript" charset="utf-8" src="{{asset(/Illuminate/Support/Facades/Config::get('options.public').'/ueditor/ueditor.config.js')}}"></script> <script type="text/javascript" charset="utf-8" src="{{asset(/Illuminate/Support/Facades/Config::get('options.public').'/ueditor/ueditor.all.min.js')}}"></script> <!--建議手動(dòng)加在語(yǔ)言,避免在ie下有時(shí)因?yàn)榧虞d語(yǔ)言失敗導(dǎo)致編輯器加載失敗--> <!--這里加載的語(yǔ)言文件會(huì)覆蓋你在配置項(xiàng)目里添加的語(yǔ)言類型,比如你在配置項(xiàng)目里配置的是英文,這里加載的中文,那最后就是中文--> <script type="text/javascript" charset="utf-8" src="{{asset(/Illuminate/Support/Facades/Config::get('options.public').'/ueditor/lang/zh-cn/zh-cn.js')}}"></script>3. 實(shí)例化編輯器。 這里是需要引入U(xiǎn)Editor編輯器的位置,標(biāo)簽id是editor
<script id="editor" name="body" type="text/plain" style="width:100%;height:300px;" value="{{$article->body}}">{!!$article->body!!}</script>使用該id實(shí)例化UEditor編輯器
<script type="text/javascript"> window.UEDITOR_HOME_URL = "{{asset(/Illuminate/Support/Facades/Config::get('options.public').'/ueditor/')}}"; //實(shí)例化編輯器 //建議使用工廠方法getEditor創(chuàng)建和引用編輯器實(shí)例,如果在某個(gè)閉包下引用該編輯器,直接調(diào)用UE.getEditor('editor')就能拿到相關(guān)的實(shí)例 var ue = UE.getEditor('editor');</script>最終效果圖: 
注意: 上傳大文件失敗,一般是php允許上傳的文件大小限制太小,修改php.ini即可。 上傳文件的相關(guān)配置,在UEditor/php/config.json中,有詳盡中文注釋
|
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注