laravel5中ueditor的安装和使用

小项目需要一个富文本的编辑器，选择了百度开发的ueditor，安装配置过程中也折腾了好久，记录一下过程。

composer 包：https://github.com/stevenyangecho/laravel-u-editor

环境：wamp+laravel5.4

1. 安装

• laravel 根目录下找到composer.json , 在 require 中
• 添加"stevenyangecho/laravel-u-editor": "~1.4"
• 命令行执行 composer install
• 打开框架下config目录中 app.php 文件，在 providers
• 下添加 Stevenyangecho\UEditor\UEditorServiceProvider::class
• 执行php artisan vendor:publish

1. 执行完后会public 目录下会新增 laravel-u-editor目录，config中会新增ueditorupload.php 文件
2. 2.
3. 使用时在views页面中引入js文件

@include('UEditor::head');

• 1

需要编辑器的地方嵌入

<!-- 加载编辑器的容器 -->

<script id="container" name="content" type="text/plain">

这里写你的初始化内容

</script>

<!-- 实例化编辑器 -->

<script type="text/javascript">

var ue = UE.getEditor('container');

ue.ready(function() {

ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');//此处为支持laravel5 csrf ,根据实际情况修改,目的就是设置 _token 值.

});

</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

我做完这些后出现了一个问题就是没办法上传图片，f12检查发现404报错，

/ueditor/server?action=config&&noCache=1512645502188

Failed to load resource: the server responded with a status of 404 (Not Found)

ueditor.all.js:8092 请求后台配置项http错误，上传功能将不能正常使用！

showErrorMsg @ ueditor.all.js:8092

检查后发现 接口路径没配置对，在laravl-u-editor 目录下 ueditor.config.js文件 中修改33行左右的 serverUrl，改成对应的路径即可。因为我没配置vhost,直接通过localhost目录访问项目，所以需要把项目的相对路径给补全。如果配置了域名，直接通过域名访问应该就不会出现错误了。

这样改完之后就可以上传图片了,上传后发现图片没显示，只出现了图片名，也是路径的问题.

修改UEditorUpload.php 文件中上传图片配置项，把imageUrlPrefix 改成对应的路径前缀。