Thinkphp下嵌套UEditor富文本WEB编辑器
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码...
本文实际操作于ThinkPHP框架下,现分享与大家参考,整体流程详解如下:
第一步:
下载UEditor编译器,请到官网进行下载:http://ueditor.baidu.com/website/download.html
注:本例中所用UEditor编译器版本为:【1.4.3.2 PHP版本】
ThinkPHP框架版本为:【ThinkPHP3.2.3完整版】
第二步:
首先在后台的项目中引入UEditor编译器的js文件,如下:
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/ueditor/ueditor.all.js"></script>
然后在需要使用UEditor编译器的<textarea>标签中,设置id属值为:id="EditorId",如下:
<textarea type="text" name="content" id="EditorId" placeholder="请输入内容"></textarea>
第三步;
对UEditor编译器进行初始化,如下(以下代码放于第二步的两个JS文件下面):
<script type="text/javascript" charset="utf-8">window.UEDITOR_HOME_URL = "__PUBLIC__/admin/ueditor/";//配置路径设定为UEditor所放的位置 window.onload=function(){window.UEDITOR_CONFIG.initialFrameHeight=300;//编辑器的高度 window.UEDITOR_CONFIG.initialFrameWidth=800;//编辑器的宽度var editor = new UE.ui.Editor({imageUrl : '__APP__/Editor/uploadImage',fileUrl : '__APP__/Editor/uploadFile',imagePath : '',filePath : '',imageManagerUrl:'__APP__/Editor/imageManage', //图片在线管理的处理地址 imageManagerPath:'__ROOT__/'});editor.render("EditorId");//此处的EditorId与<textarea name="content" id="EditorId">的id值对应 </textarea> } </script>
UEditor编译器显示效果如下:
至此UEditor编译器的初始化配置已经完成。
另:对内容进行编辑提交后显示效果如下:
第四部:UEditor富文本WEB编辑器的前后台页面数据的显示
方法如下:
|htmlspecialchars_decode|stripslashes(前后台页面显示数据时不仅要反转义还要去掉html实体化)
如:{$VR.content|htmlspecialchars_decode|stripslashes}这样就能正常显示了,后台显示也是如此。
至此整个UEditor编辑器插件的安装配置已ok。
优化点:
在使用UEditor编辑器编写内容时你会发现,当输入的内容较多时,编辑框的边框高度也会自动增加,若希望输入内容较多时以拉框滚动的效果。
方法:找到Ueditor文件根目录下的ueditor.config.js,用编译器打开,看到282~286行代码如下:
//scaleEnabled//是否可以拉伸长高,默认true(当开启时,自动长高失效)//,scaleEnabled:false//,minFrameWidth:800 //编辑器拖动时最小宽度,默认800//,minFrameHeight:220 //编辑器拖动时最小高度,默认220
现修改成如下:(编译器拖动的最小高度可自行设置)
//scaleEnabled//是否可以拉伸长高,默认true(当开启时,自动长高失效),scaleEnabled:true//,minFrameWidth:800 //编辑器拖动时最小宽度,默认800,minFrameHeight:300 //编辑器拖动时最小高度,默认220
效果如下:
以上详细步骤,如有错误点,还请指正修改~
Thinkphp下嵌套UEditor富文本WEB编辑器相关推荐
- 大神论坛 UEditor 富文本web编辑器最新漏洞版XML文件上传导致存储型XSS
一.Ueditor最新版XML文件上传导致存储型XSS 测试版本:php版 v1.4.3.3 下载地址:https://github.com/fex-team/ueditor 复现步骤: 1. 上传一 ...
- 【php】ThinkPHP搭建百度Ueditor富文本编辑器
简介 UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. 下载UEditor 官网下载:http ...
- 推荐一个很好的富文本web编辑器UEditor
前天产品提了一个编辑器的bug,本人找是找到了问题的症结,就是不好改.框架是压缩兼混淆后的代码.查一下,好多年前的框架... 咨询了一个同事有关旧框架的事情,他也建议我升级编辑器并帮忙帮我找了UEdi ...
- node -- 使用UEditor富文本编辑器
最近在做一个微信素材编辑器的小项目,使用到了UEditor编辑器,使用中出现了许多问题. 1.介绍 UEditor是由百度web前端研发部开发所见即所得富文本web编辑器, 具有轻量,可定制,注重用户 ...
- nodejs 创建html文本编辑器,node使用UEditor富文本编辑器的方法实例
大部分编辑器的后台是基于java.PHP.asp等,很少有基于node.js的.今天就做一个基于node的 最近在做一个微信素材编辑器的小项目,使用到了UEditor编辑器,使用中出现了许多问题. 1 ...
- jquery富文本在线编辑器UEditor
UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. UEditor的功能非常强大,官方 ...
- vue如何使用ueditor富文本插件
UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.话不多说看流程:↓ ↓ ↓ 一.显示 ...
- java 接收前台富文本_前后端分离ueditor富文本编辑器的使用-Java版本
最近在写一个自己的后台管理系统(主要是写着玩的,用来熟悉后端java的知识,目前只是会简单的写点接口),想在项目中编写一个发布新闻文章的功能,想到了使用百度的ueditor富文本编辑器,网上找了很多j ...
- MVC 使用 Ueditor富文本编辑器
一.Ueditor 1.下载Ueditor富文本编辑器 官方下载地址: http://ueditor.baidu.com/website/download.html 建议下载开发版,此处我下载的是 . ...
最新文章
- 计算机视觉方面2016年重要会议deadline
- xp精简工具_Windows10你也可以精简优化,丝滑般极爽轻松做到,再也不卡了
- 自定义可扩展叠加头部的下拉控件
- UVa340 Master-Mind Hints
- IROS2020 | 鲁棒全景视觉惯性导航系统ROVINS
- Linux strace命令详解
- Hadoop基础教程之搭建开发环境及编写Hello World
- 帝豪gs车机系统wince_酷车:10万左右买辆“网红车”,名爵ZS和帝豪GS怎么选?...
- 软件著作权登记申请时的60页源代码格式
- 【性能测试】JMeter性能测试(一)-入门篇
- python 英语词频统计_Python实现统计英文文章词频的方法分析
- Linux 克隆虚拟机以及克隆之后引起的“Device eth0 does not seem to be present, delaying initialization”问题解决...
- 笔记本电脑上html怎样运行,手提电脑如何进入BIOS|笔记本电脑进入BIOS按哪个键...
- Python爬取豆瓣图书信息学习记录
- 零信任架构的3大核心技术
- selected和checked区别
- Linux内核网络:实现与理论--介绍
- 2019年计算机二级获证条件,2019年下半年全国计算机等级考试报考简章
- 云计算——Google云计算原理与应用(Google文件系统GFS)
- 数据分析---------指数计算
热门文章
- android按钮点击后闪退_CAD如何恢复自动崩溃、闪退的文件?
- ati显卡驱动安装linux,恭喜自己 ati显卡驱动安装成功
- matlab基本矩阵运算,科学网—matlab中矩阵基本运算 - 成爱芳的博文
- Hyper-V 网络设置 虚拟机固定Ip
- 01_初识Matplotlib、Figure的组成、绘图函数的输入类型、第一个例子(学习笔记)
- 通过16进制文件头判断文件类型
- Android-service
- 查询每个班级排名第三的学生
- java 博客系统_讲解开源项目:5分钟搭建私人Java博客系统
- 99.Shell脚本自启程序并监控(实现全自动监控服务)