Laravel框架集成UEditor编辑器的方法图文与实例详解


Posted in PHP onApril 17, 2019

本文实例讲述了Laravel框架集成UEditor编辑器的方法。分享给大家供大家参考,具体如下:

一、 背景

  • 在项目开发的过程中,免不了使用修改功能,而富文本编辑器是极为方便的一种推荐,当然,个人认为 MarkDown 更为简单,但是感觉暂时只适合程序猿
  • 此文介绍如何在 Laravel5.5 框架中集成使用富文本编辑器 UEditor

ps : 其实编辑器只是一个工具,举一反三可以用在各种代码语言或框架中

二、 探讨

  • 通过网上求知,发现主要有两种方法实现

①. 第一种是使用 composer 进行安装,可推荐参考文章 Laravel-u-editor,个人试过,无法上传图片 …

②. 第二种是到 UEditor 官方下载源包自行配置(下文主要为此操作)

  • ps : [如果有哪位能够成功实现第一种方案,请告诉鄙人一下,万分感谢!]

三、操作步骤

❶. 下载对应的源码包

  • 可点击进入下载地址,本人下载的是最新 PHP(UTF-8) 版本

Laravel框架集成UEditor编辑器的方法图文与实例详解

❷. 放置在 Public 目录下

  • 将解压后的文件夹,放置在 Public 目录下,本人只是将文件夹名字改动了一下.

Laravel框架集成UEditor编辑器的方法图文与实例详解

❸. 前端文件配置

  • 详情可参考 官方文档
    以本人为例:

①. 首先在当前页面,需要引入 js 文件,注意类比src的正确引用.

<!-- ueditor-mz 配置文件 -->
<script type="text/javascript" src="{{asset('ueditor-mz/ueditor.config.js')}}"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="{{asset('ueditor-mz/ueditor.all.js')}}"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
 var ue = UE.getEditor('ue-container');
 ue.ready(function(){
  ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');
 });
</script>

②. 在需要显示富文本编辑器的位置,补充如下代码

<!-- 加载编辑器的容器 -->
<script id="ue-container" name="content" type="text/plain">
@php
echo htmlspecialchars_decode($article['content']);
@endphp
</script>
<!-- 上述的 php 代码是根据实际需求进行的编写,该处为初始化内容的位置-->

③. 实现效果如下:

Laravel框架集成UEditor编辑器的方法图文与实例详解

❹. 补充

①. 在进行 form 表单提交时,将获得 name="content" 所传输的数据写入数据库即可,而对应在数据库中存储的数据如下所示:

<p><strong style="white-space: normal; padding: 0px; margin: 0px;">        <span style="color: rgb(51, 51, 51);"></span></strong><span style="color: rgb(51, 51, 51);">开场后,第<strong>32秒</strong>,佩顿在朗多投篮时犯规,送给鹈鹕2次罚球机会。第1分35秒,考辛斯妙传,朱-霍勒迪三分远投命中。</span></p><p><span style="color: rgb(51, 51, 51);">        第7分28秒,佩顿手滑丢球,被考辛斯抢断。鹈鹕对篮板发起疯狂进攻,本节共抢下16个篮板,包括6个前场篮板,其中戴维斯一人就贡献4个篮板球。</span></p><p style="text-align: center;"><img src="http://lar5Pro.com/upload/image/20171227/NjUzNDczMDc3ODU2.jpg" title="NjUzNDczMDc3ODU2.jpg" alt="article_3.jpg" width="906" height="450"/><br/></p>

②. 当取得了上述数据,若要在前端进行显示,需要执行类似的转化代码:

echo htmlspecialchars_decode($article['content']);
③. 在富文本编辑器中,图片的大小可自行调整.

四、扩展学习

♩. 图片上传路径

  • 其实,如果只是个简单的小网站或者学生的课设项目,无需修改,上传的图片会默认放置在 Public/ueditor/php/upload/image/ 目录下

  • 如果需要修改,可进入php/config.json 文件,找到配置项 "imagePathFormat" 进行符合需求的修改,建议可以让文件名较长一些以避免重名:

Laravel框架集成UEditor编辑器的方法图文与实例详解

[注]:
个人初始测试发现,文件命名时的“{rand:6}”定义无法实现,网上却没有类似的解决方法,解决方案请参考后面的 ***【附录】***.

♪. 图片访问前缀

  • 如果使用了多个服务器,设置统一的图片访问前缀极有必要,可配置参数“imageUrlPrefix”,例如我的配置路径可以为:“http://lar5Pro.com”

  • 这样一来,存入数据库中的图片路径都会加上了此前缀.

五、附录

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

  1. 刚开始想到使用时间戳加文件原名称来作为名字,但是当有中文字符时无法上传。
  2. 其实原本的ThinkPHP框架中也集成过UEditor,但是没有这种问题,通过阅读源码,找到正则表达式的匹配位置 Public/ueditor-mz/php/Uploader.class.php
  • 大概在 304 行左右,原因是rand() 取值太大可能导致部分环境报错

  • 个人觉得数字的命名不如字母好些,于是代码替换为如下的样子:

//TODO 替换随机字符串 数值太大可能导致部分环境报错
$randNum = rand(100000, 10000000) . rand(100000, 10000000);
//也可用使用md5()或两者的组合
$randNum = base64_encode($randNum);

Laravel框架集成UEditor编辑器的方法图文与实例详解

♫. 呵呵

  • 真是尴尬了,方案一测试多遍依然不成功,所以钟情于第二种方案 …
  • HELP !HELP!HELP!

【补充问题】(2018-02-06):

emm楼主第一种上传不了图片的问题我当时也遇到过,最后发现是接口路径没配置好。在laravl-u-editor 目录下 ueditor.config.js文件 中修改33行左右的 serverUrl,改成对应的路径即可。

这个问题,可以参考 相应文章的提示,下次有机会可以尝试一番…

希望本文所述对大家基于Laravel框架的PHP程序设计有所帮助。

PHP 相关文章推荐
Zend引擎的发展 [15]
Oct 09 PHP
php 页面执行时间计算代码
Dec 04 PHP
PHP 将图片按创建时间进行分类存储的实现代码
Jan 05 PHP
php+highchats生成动态统计图
May 21 PHP
php判断一个数组是否为有序的方法
Mar 27 PHP
PHP读取汉字的点阵数据
Jun 22 PHP
php邮件发送的两种方式
Apr 28 PHP
PHP工程师VIM配置分享
Dec 15 PHP
php导出生成word的方法
Dec 25 PHP
PHP类相关知识点实例总结
Sep 28 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
Oct 15 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
Dec 16 PHP
Laravel5框架自定义错误页面配置操作示例
Apr 17 #PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
Apr 16 #PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
Apr 16 #PHP
Laravel中9个不经常用的小技巧汇总
Apr 16 #PHP
Laravel框架自定义公共函数的引入操作示例
Apr 16 #PHP
Laravel框架文件上传功能实现方法示例
Apr 16 #PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
Apr 16 #PHP
You might like
自动生成文章摘要的代码[PHP 版本]
2007/03/20 PHP
php学习之 认清变量的作用范围
2010/01/26 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
SQL SERVER面试资料
2013/03/30 面试题
软件工程师面试题
2012/06/25 面试题
人力资源主管岗位职责
2014/01/29 职场文书
青春励志演讲稿
2014/04/29 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
情感电台广播稿
2015/08/18 职场文书
Python入门之基础语法详解
2021/05/11 Python
原生JS实现飞机大战小游戏
2021/06/09 Javascript