在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中,有详尽中文注释
新闻热点
疑难解答