本文阐述了将UEditor编辑器与Laravel框架集成的方法。分享给大家参考，如下：

一、 背景

在项目开发过程中，不可避免的要用到修改功能，而富文本编辑器就是一个非常方便的推荐。当然，我个人觉得MarkDown比较简单，但我觉得暂时只适合程。本文介绍了如何在Laravel5.5框架中集成和使用富文本编辑器UEditorps :事实上，编辑器只是一个工具，可以类比用于各种代码语言或框架。

从010到1010，我发现主要有两种实现方式。首先是使用composer进行安装，我可以推荐参考文章Laravel-u-editor。我个人试过，但是不能上传图片…

.第二种方法是从UEditor下载源包并自行配置(主要用于下面的目的)

Ps :【如果有人能成功实施第一个方案，请告诉我，非常感谢！]

二、 探讨

三、操作步骤

可以点击输入下载地址，而我下载的是最新的PHP(UTF-8)版本

. 下载对应的源码包

把解压后的文件夹放在Public目录下，但我只是改了文件夹名。

. 放置在 Public 目录下

详情请参考官方文件。以我自己为例：。首先在当前页面需要介绍js文件，注意类比src的正确引用。

！- ueditor-mz配置文件-脚本类型=' text/JavaScript ' src=' http 3360 { { asset(' ueditor-mz/ueditor . config . js ')} } '/脚本！-编辑器源代码文件-脚本类型=' text/JAVAScript ' src=' http : { { asset(' ueditor-mz/ueditor . all . js ')} } '/脚本！-实例化编辑器-脚本类型=' text/JavaScript' var UE=UE。geteditor(' UE-container ')；UE . ready(function(){ UE . exec command(' server param '，' _token '，' { { csrf _ token()} } ')；});/script。在需要显示富文本编辑器的地方，添加以下代码

！-加载编辑器的容器-脚本id=' UE-container ' name=' content ' type=' text/plain ' @ PHP echo html specialchars _ decode($ article[' content '])；@endphp/script！-以上php代码是根据实际需要编写的，这是初始化内容的位置-(3)。实施效果如下：

. 前端文件配置

.提交表单时，可以将名称='content '的传输数据写入数据库，数据库中存储的相应数据如下：

复制代码如下： p strong style=' white-space : normal；padding: 0pxmargin: 0px'span style='color: rgb(51，51，51)；'/span/strong span style=' color : RGB(51，51，51)；'开场后，在强势的第32秒/strong势，佩顿在隆多的投篮中犯规，给鹈鹕两罚全中。第1分35秒，卡曾斯妙传，朱赫莱迪三分球。/span/PP span style=' color : RGB(51，51，51)；第7分28秒，佩顿滑倒丢球，球被卡曾斯抢断。鹈鹕队对篮板发起了疯狂的进攻，在这一节抢下了16个篮板，其中前场篮板6个，其中仅戴维斯就贡献了4个篮板。/span/PP style=' text-align : center；'img src=' http :3358 lar5 pro.com/upload/image/20171227/njuzndczmdc3 odu 2 . jpg ' title=' njuzndczmdc3 odu 2 . jpg ' alt=' article _ 3 . jpg ' width=' 906 ' height=' 450 '/br//p

.当获得上述数据时，如果要在前端显示，则需要执行类似的转换代码：

echo html specialchars _ decode($ article[' content '])；.在富文本编辑器中，图片的大小可以自行调整。

. 补充

四、扩展学习

。其实如果只是一个简单的小网站或者是学生的班级项目，就不需要修改了，上传的图片默认会放在public/u editor/PHP/upload/image/目录中

如果需要修改，可以进入php/config.json文件，找到配置项‘imagepath format’，根据需求进行修改。建议文件名可以长一些，避免：的重名

【注】对：人的初步测试发现，文件命名中“{rand:6}”的定义无法实现，但互联网上没有类似的解决方案。请参考以下* * *[附录] * * *。

. 图片上传路径

如果使用多台服务器，需要设置统一的映像访问前缀。可以配置参数“imageUrlPrefix”。例如，我的配置路径可以是“http://lar5Pro.com”

这样，存储在数据库中的图像路径将以此前缀作为前缀。

. 图片访问前缀

-

五、附录

只是想到用时间戳加原文件名作为名字，但是有汉字的时候无法上传。其实最初的ThinkPHP框架也集成了UEditor，但是没有这样的问题。通过阅读源代码，我们可以发现正则表达式的匹配位置约为304行，因为rand()的值太大，可能会导致某些环境报错

我个人觉得数字的命名不如字母好，所以代码换成了下面的：

//TODO替换随机字符串的值太大可能会导致某些环境报告错误：$ randnum=rand (100000，1000000)。兰特(100000，1000000)；//也可以使用md5()或两者的组合$ randnum=base64 _ encode($ randnum)；

. 图片文件名 {rand:$num} 解决

真的很尴尬。第一个方案的测试还是不成功，所以我很喜欢第二个方案… HELP！救命！救命！【补充问题】(2018年2月6日):

emm主不能上传图片的第一个问题是我当时也遇到过，最后发现接口路径配置不正确。在laravl-u-editor目录下的文件ueditor.config.js中，修改大约33行的serverUrl，并将其更改为相应的路径。

这个问题，可以参考相应文章的提示，下次可以试试…

更多对Laravel感兴趣的读者可以查看本网站的话题：《Laravel框架入门与进阶教程》、《php优秀开发框架总结》、《php面向对象程序设计入门教程》、《php+mysql数据库操作入门教程》和《php常见数据库操作技巧汇总》

希望本文对基于Laravel框架的PHP编程有所帮助。