ThinkPHP整合百度Ueditor,thinkphpueditor

ThinkPHP整合百度Ueditor,基于黄永成老师的视频说明的

申明:最好大家都能写绝对路径的都写好绝对路径比如:window.UEDITOR_HOME_URL

他在教程里面已经说了的,我就不再次说了啊,就一笔带过,好了不废话!

在调用编辑器的时候首先先初始化一些值:

1

2 window.UEDITOR_HOME_URL = "/Public/ueditor/"; //UEDITOR_HOME_URL、config、all这三个顺序不能改变

3 window.οnlοad=function(){4 window.UEDITOR_CONFIG.initialFrameHeight=300;//编辑器的高度

5 window.UEDITOR_CONFIG.imageUrl="{:U('admin/Category/checkPic')}"; //图片上传提交地址

6 window.UEDITOR_CONFIG.imagePath=' /Uploads/thumb/';//编辑器调用图片的地址

7 UE.getEditor('contents');//里面的contents是我的textarea的id值

8

9 }10

11

然后再引入2个js文件,分别是:1、ueditor.all.min.js 2、ueditor.config.js

在这里申明一下 我以上说的调用方式,顺序绝对不能乱,乱了就会出问题了,所以你就按照我的按部就班的做吧!

因为我重写了编辑器的图片提交地址,所以我还得在控制器里面写一个对图片处理的方法。

代码如下:

1 //改变Ueditor 默认图片上传路径

2 public functioncheckPic(){3 import('ORG.Net.UploadFile');4 $upload = new UploadFile();//实例化上传类

5 $upload->allowExts = array('jpg', 'gif', 'png', 'jpeg');//设置附件上传类型

6 $upload->autoSub =true;7 $upload->subType ='date';8 $upload->dateFormat ='ym';9 $upload->savePath = './Uploads/thumb/';//设置附件上传目录

10 if($upload->upload()){11 $info = $upload->getUploadFileInfo();12 echo json_encode(array(13 'url'=>$info[0]['savename'],

14 'title'=>htmlspecialchars($_POST['pictitle'], ENT_QUOTES),

15 'original'=>$info[0]['name'],

16 'state'=>'SUCCESS'

17 ));18 }else{19 echo json_encode(array(20 'state'=>$upload->getErrorMsg()21 ));22 }23

24 }

我首先给大家看看代码先,在继续说明,

1、引入tp官方的文件上传处理类,然后初始化一些配置,这些都不介绍了啊!

2、判断他是否上传成功了,如果上传成功了,就先获取他的上传成功的信息,然后把数组转成json,用phpjson_encode。如果上传失败就把上传失败的信息直接返回!

以上都是在黄永成老师教程里面已经说明了的!就不详细说明了,不懂的就去看视频!

在整合好了上传后,发现上传的图片路径被转义了,一直显示不出来如图:

我就在显示出数据的哪里用反转义函数,进行操作了一下{$article.content|stripslashes}这样就是把转义的字符串进行反转义,这样数据就能正常显示了

如图:

然后在前台模版显示数据的时候不仅要反转义还要去掉html实体化,{$article.content|htmlspecialchars_decode|stripslashes}这样就能正常显示了!

还有哟个问题,百度编辑器当里面的内容增长时,他的高度也是增长的,如图:

解决方案就是在Ueditor的配置文件ueditor.config.js,里面的第428行打开注释,改成true,还有430行注释打开把他改成你初始化的的高度对应就好了。如图:

这样编辑器就不会撑高了!如图:

完结!!! 说的不好的大神勿喷~~这个只是分享交流,如果说错了 指出来就行了 谢谢~~~

补充说明:关于Ueditor在ie7下面调用不出来的bug问题解决办法,这个是前天逛官网的时候,发现一个人的这个问题的,因为我只有人见人爱的ie6,也都没有去测试,所以还是别人提醒,现在更正一下ie7的bug解决方案~感谢这位大湿啊~

如图:

thinkphp框架整合ueditor编辑器路径设置问题

在imageUp.php的上传配置里面修改:

$config = array(“savePath” => “../../Public”);

有人知道thinkphp与ueditor怎集成?现在我点击编辑器任意图标时都会报“不可以加载模块dialogs”

thinkphp是个轻量级的框架,小型项目用得多些,你要学PHP,就专心把原生的PHP开发学好,不然光学框架学不出个什么名堂来的 恩,大师我观你有旺财的

www.bkjia.comtrueTechArticleThinkPHP整合百度Ueditor,thinkphpueditor ThinkPHP整合百度Ueditor,基于黄永成老师的视频说明的 申明:最好大家都能写绝对路径的都写好绝对路径…

ueditor imageup.php,ThinkPHP整合百度Ueditor,thinkphpueditor_PHP教程相关推荐

  1. ThinkPHP整合百度Ueditor图文教程

    ThinkPHP整合百度Ueditor图文教程 ThinkPHP整合百度Ueditor,基于黄永成老师的视频说明的 申明:最好大家都能写绝对路径的都写好绝对路径比如:window.UEDITOR_HO ...

  2. 【php】ThinkPHP搭建百度Ueditor富文本编辑器

    简介 UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 下载UEditor 官网下载:http ...

  3. 整合百度UEditor上传图片到阿里云OSS

    前言 将图片上传到阿里云OSS是一种趋势,一个必然.当你的项目图片过多,需要频繁上传和替换的时候,用阿里云OSS可以很方便的管理你的图片,节省服务器空间,大大提高了效率.阿里云OSS是阿里云提供的海量 ...

  4. YII2 整合百度UEditor上传图片到阿里云OSS

    yii2 composer 安装完 ueditor 后 目录: \vendor\kucha\ueditor 修改Uploader.php文件 添加: use common\helpers\MyHelp ...

  5. ueditor统计字数中文_百度UEditor修改右下角统计字数包含html样式

    百度UEditor修改右下角统计字数默认只统计前台所见的文字个数,为了便于展示实际保存的时候是保存的包含html标签的,所以右下角的统计字数功能需要修改 /** * 计算编辑器当前内容的长度 * @n ...

  6. 关于dedecms织梦后台html编辑器不能复制word格式的处理方法/ kindEditor编辑器/百度(ueditor)编辑器的添加方法

    Q:word文件内容粘贴到dede后台编辑器里,格式都失效了 dede自带的文本编辑器很不好用,且有些功能还需要我们自己手动去修改源码,才能完成我们想要的效果 一.更换kindEditor编辑器操作步 ...

  7. phpcms9.6 ueditor_Phpcms v9深度整合百度编辑器Ueditor

    PHPCMS V9自带的ckeditor功能有点弱,用起来很不习惯,最近发现百度推出的开源编辑器ueditor还不错,于是开始整合PHPCMS V9和ueditor 1.2,经过拖拖拉拉两周的时间终于 ...

  8. 帝国cms html5 编辑器,帝国cms整合百度编辑器ueditor图文教程

    一.UEditor简介 帝国cms自带文本编辑器是fckeditor,用起来效果不太理想. 百度也推出了自己的编辑器UEditor UEditor是由WEB前端研发部开发的所见即所得的开源富文本编辑器 ...

  9. themyleaf 图片上传_springboot thymeleaf 整合 百度富文本编辑器UEditor进行图片上传

    项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...

  10. Vue 百度富文本编辑器Ueditor Spring Boot 前后台整合示例(附带完整源码)

    前端 安装vue-ueditor-wrap npm i vue-ueditor-wrap 引入并注册VueUeditorWrap组件,配置组件属性 <script> import VueU ...

最新文章

  1. ASP.NET Razor – 标记简介
  2. 【分享】Vue 资源典藏(UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例)...
  3. ReactNative v0.55学习笔记
  4. [Ubuntu] SVN常用的批量操作
  5. javascript核心
  6. 软中断amp;taskletamp;工作队列
  7. 2019蓝桥杯省赛---java---C---9(等差数列)
  8. c语言输出星期几的英语表达,C语言程序设计: 输入年月日 然后输出是星期几...
  9. gojs 节点右键点击事件_SWMM快速建模方法(3)—建立管线上下游节点编号
  10. sql右下角图标工具
  11. Openstack平台搭建之第二天
  12. aspnet还有人用吗_微信公众号软件安装管家会员真的那么好吗
  13. 使用弹性布局来解决令人烦恼的垂直居中问题~~
  14. opencv之retina滤波器---Retina_create
  15. 玉伯 对 前端的 金玉良言
  16. python面板数据模型_面板数据模型选择问题
  17. echarts地图下钻可缩放
  18. 第五模块 常用邮件沟通场景(1):求职信
  19. 关于A 星算法的研究与简单分析及其实现-A star
  20. 微商卖养生产品怎么吸粉?让客户慢慢进入你的营销场景

热门文章

  1. 白话区块链 之 12 - 未花费事务输出 (UTXO) 是什么?
  2. 闽教英语app 破解版 免费版
  3. 16种常用统计分析软件介绍
  4. STM32F103C8T6在Arduino框架下驱动ssd1306 0.96“ IIC OLED显示
  5. fluidsim元件库下载_模块七 FluidSIM软件应用
  6. STM8L152的LCD模块原理及驱动
  7. C++实现屏幕截图(全屏截图)
  8. 中兴配置dhcp服务器,在中兴接入层交换机上配置DHCP Snooping
  9. wordpress 中 erphpdown 短代码
  10. CAD图纸、影像地形、倾斜摄影、矢量数据统统搬入图新地球,一键浏览分析