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 相关文章推荐
一篇不错的PHP基础学习笔记
Mar 18 PHP
require(),include(),require_once()和include_once()区别
Mar 27 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
Apr 10 PHP
解析PHP中常见的mongodb查询操作
Jun 20 PHP
IIS下PHP的三种配置方式对比
Nov 20 PHP
php统计数组元素个数的方法
Jul 02 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
Sep 20 PHP
PHP几个实用自定义函数小结
Jan 25 PHP
PHP 配置后台登录以及模板引入
Jan 24 PHP
php基于dom实现读取图书xml格式数据的方法
Feb 03 PHP
PHP实现限制IP访问及提交次数的方法详解
Jul 17 PHP
PHP数组遍历的几种常见方式总结
Feb 15 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 各种应用乱码问题的解决方法
2010/05/09 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
javascript抖动元素的小例子
2013/10/28 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
Python中super()函数简介及用法分享
2016/07/11 Python
Python实现抢购IPhone手机
2018/02/07 Python
详解python中的线程
2018/02/10 Python
Python进行特征提取的示例代码
2020/10/15 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
python实现登录与注册系统
2020/11/30 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
python 录制系统声音的示例
2020/12/21 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
植树造林的宣传标语
2014/06/23 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
处级干部考察材料
2014/12/24 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
售票员岗位职责
2015/02/15 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL