开发日志 2015-03-27

最新推荐文章于 2024-01-17 06:22:50 发布

原创最新推荐文章于 2024-01-17 06:22:50 发布 · 置顶 · 496 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#umeditor #laravel5

vol-laravel 同时被 2 个专栏收录

7 篇文章

订阅专栏

开发日志

6 篇文章

订阅专栏

本文详细介绍了如何将 UMEditor 引入 Laravel 平台，包括配置、引入方式、解决常见问题及实现图片上传功能。通过遵循文中指南，开发者能够轻松地将 UMEditor 整合到 Laravel 应用中，提升内容编辑体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天尝试着把UMEditor弄到laravel上去，由于官网只有UEditor的文档（吐槽，后来才在Github找到UMeditor的），加上不了解laravel5如何引入自定义插件，走了一段弯路。

刚开始想着放到App文件夹下，然后通过路由处理访问，发现行不通，放到App/Http/Controllers下也不行（脑子真糊涂MVC架构直接放进去如何能compile。。）。后来醒悟到这种不依赖框架又要求地址回调（图片上传后的预览）的扔public妥妥的。。

和官网文档上UEitor实例化只需写

<!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>

不同，UMeditor要稍微多写些，而且相关的变量名和js文件名也要微调（Ref：UMeditor Github）

<head>
<!-- 样式文件 -->
<link rel="stylesheet" href="/umeditor/themes/default/css/umeditor.css">
<!-- 引用jquery -->
<script src="./umeditor/third-party/jquery.min.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="/umeditor/umeditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/umeditor/umeditor.js"></script>
<!-- 语言包文件 -->
<script type="text/javascript" src="/umeditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain" style="width:600px;height:200px;">
    这里写你的初始化内容
</script>
<!-- 实例化编辑器代码 -->
<script type="text/javascript">
    $(function(){
        window.um = UM.getEditor('container', {
            /* 传入配置参数,可配参数列表看umeditor.config.js */
            toolbar: ['undo redo | bold italic underline']
        });
    });
</script>
</body>

&，Github上href和src中都写的是“./umeditor/...”，不过laravel以public为根文件夹，记得把“.”删掉。

我把php文件夹中的三个文件拖出来放到了umeditor文件夹下。
配置上传图片存放的地方，在imageUp.php中修改为
```
//上传文件目录
    $Path = "../upload/images/";
```
对应public/upload/images。上传图片自带以“.../YYYYMMDD/”方式建立文件夹管理图片，如果有需要到Uploader.class.php中修改
```
$pathStr .= date( "Ymd" );
```
umeditor.config.js中修改toolbar变量控制默认显示的按钮，autoClearinitialContent设置是否第一次焦点是自动清除初试内容（默认false），autoHeightEnabled设置文字多时是否自动长高（默认false），以及
```
,imageUrl:URL+"/imageUp.php"     //图片上传提交地址
,imagePath:URL + "../"   //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置   //也就是public/，具体后面upload/image/YYYYMMDD会自动补上
```
。以上config项主体可以通过实例化时
```
window.um = UM.getEditor('container', {
    key: value
});
```
覆盖修改。
（2015-03-28追加）：部署后经测试dialog中功能异常，经调试发现加载dialog路径undefine。在umeditor.config.js中this.documentURL赋值不正确，在其后（26行左右）加上
```
this.documentURL = self.location.origin+'/umeditor';
```
Chrome上测试，IE上可能需要其他表达方式。
（2015-04-02追加）：发现umeditor中字体、字号、段落格式三个下拉框带有和metro UI相同的class dropdown-menu（其实是bootstrap中），会导致click下拉框无法弹出（刚被一个弹出就被另一个收起）。经检查umeditor.js中没有其他对该class的定义，而且其他地方也写的是edui-dropdown-menu，因此将8965行左右改为
```
tpl: "<ul class=\"edui-dropdown-menu ..." ...>
```