百度UEditor编辑器整合实录

百度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中，有详尽中文注释