首页 > 学院 > 开发设计 > 正文

百度UEditor编辑器整合实录

2019-11-06 06:49:45
字体:
来源:转载
供稿:网友

百度UEditor编辑器整合实录


在Laravel中手动引入最新版UEditor编辑器。

1. 在官网下载的Ueditor编辑器的代码包中根目录下有index.html示例文件,打开该文件,复制head标签中引入CSS、js的部分,粘贴到你要引入的代码文件中(模板或者html)

<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><!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败--><!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文--><script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>

2. 修改相关引入路径,使引入的文件都能找到

<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> <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败--> <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文--> <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. 实例化编辑器。 这里是需要引入UEditor编辑器的位置,标签id是editor

<script id="editor" name="body" type="text/plain" style="width:100%;height:300px;" value="{{$article->body}}">{!!$article->body!!}</script>

使用该id实例化UEditor编辑器

<script type="text/javascript"> window.UEDITOR_HOME_URL = "{{asset(/Illuminate/Support/Facades/Config::get('options.public').'/ueditor/')}}"; //实例化编辑器 //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例 var ue = UE.getEditor('editor');</script>

最终效果图: 这里写图片描述

注意: 上传大文件失败,一般是php允许上传的文件大小限制太小,修改php.ini即可。 上传文件的相关配置,在UEditor/php/config.json中,有详尽中文注释


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表