PHP如何搭建百度Ueditor富文本编辑器
本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下
下载UEditor
官网:下载地址
将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为ueditor
第一步 引入javascript
在html中如入下面的js语句引入相关文件
1
2
|
< script type = "text/javascript" charset = "utf-8" src = "__PUBLIC__/ueditor/ueditor.config.js" ></ script > < script type = "text/javascript" charset = "utf-8" src = "__PUBLIC__/ueditor/ueditor.all.js" ></ script > |
第二步 添加textare文本域并设置id值
1
|
< textarea type = "text" name = "content" id = "EditorId" placeholder = "请输入内容" ></ textarea > |
第三步 初始化UEditor编辑器
在html代码中添加下面的代码初始化UEditor编译器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<script type= "text/javascript" charset= "utf-8" > //初始化编辑器 window.UEDITOR_HOME_URL = "__PUBLIC__/ueditor/" ; //配置路径设定为UEditor所放的位置 window.onload= function (){ window.UEDITOR_CONFIG.initialFrameHeight=600; //编辑器的高度 window.UEDITOR_CONFIG.initialFrameWidth=1200; //编辑器的宽度 var editor = new UE.ui.Editor({ imageUrl : '' , fileUrl : '' , imagePath : '' , filePath : '' , imageManagerUrl: '' , //图片在线管理的处理地址 imageManagerPath: '__ROOT__/' }); editor.render( "EditorId" ); //此处的EditorId与<textarea name="content" id="EditorId">的id值对应 </textarea> } </script> |
第四步 设置图片上传路径
UEditor编辑器的默认图片上传路径是根目录下/ueditor/php/upload/image/目录,没有这个目录会自动创建,如果要自定义图片上传路径,可以在ueditor/php/config.json文件中12行处修改。
最后贴上完整的html代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >Document</ title > < script type = "text/javascript" charset = "utf-8" src = "__PUBLIC__/ueditor/ueditor.config.js" ></ script > < script type = "text/javascript" charset = "utf-8" src = "__PUBLIC__/ueditor/ueditor.all.js" ></ script > </ head > < body > < form action = "__URL__/receiver" method = "post" accept-charset = "utf-8" > < textarea type = "text" name = "content" id = "EditorId" placeholder = "请输入内容" ></ textarea > < input type = "submit" value = "提交" > </ form > < script type = "text/javascript" charset = "utf-8" >//初始化编辑器 window.UEDITOR_HOME_URL = "__PUBLIC__/ueditor/";//配置路径设定为UEditor所放的位置 window.onload=function(){ window.UEDITOR_CONFIG.initialFrameHeight=600;//编辑器的高度 window.UEDITOR_CONFIG.initialFrameWidth=1200;//编辑器的宽度 var editor = new UE.ui.Editor({ imageUrl : '', fileUrl : '', imagePath : '', filePath : '', imageManagerUrl:'', //图片在线管理的处理地址 imageManagerPath:'__ROOT__/' }); editor.render("EditorId");//此处的EditorId与< textarea name = "content" id = "EditorId" >的id值对应 </ textarea > } </ script > </ body > </ html > |
效果图
以上就是本文的全部内容,
PHP如何搭建百度Ueditor富文本编辑器的更多相关文章
- 百度ueditor富文本编辑器的使用
百度ueditor富文本编辑器的使用 //以下为我在官网下载的ueditor v1.3.5 php版的大楷配置步骤第一步: //配置文件的引入应该比功能文件先引入,最后设置语言类型.即:editor. ...
- ASP.NET MVC5 中百度ueditor富文本编辑器的使用
随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...
- django之百度Ueditor富文本编辑器后台集成
Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...
- vue集成百度UEditor富文本编辑器
在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是 ...
- 百度UEditor(富文本编辑器)的基础用法
百度的这个编辑器挺强大的,这里只是用他的文本功能,没有介绍上传图片视频的. 我用是的SSH来写的项目. 1. 把下载的UEditor(ueditor1_4_3_1-utf8-jsp)解压后全部复制到W ...
- 百度UEditor富文本编辑器去除过滤div等标签
将设计排版好的页面html代码上传到数据库,再读取出来的时候发现所有的div都被替换成了p标签. 解决方法: 首先在ueditor.all.js文件内搜索allowDivTransToP,找到如下的代 ...
- 百度UEditor富文本编辑器去除自动追加p标签
本篇文章还原了我在遇到这个问题时的解决过程: 找到ueditor.all.js文件,搜索 me.addInputRule(function(root){ 或者直接搜索 //进入编辑器的li要套p标签 ...
- vue2.x结合百度UEditor富文本编辑器
1.首先下载UEditor源码(https://ueditor.baidu.com/website/),将整个文件放到static文件夹中 2.在src/components文件夹下创建公共组件UEd ...
- 百度Ueditor富文本编辑器 .net版本 任意文件上传执行漏掉修复
问题描述: 借由上传网络图片功能中可传递可执行文件.后台代码中只做了文件类型的检测未能正确的拦截掉非法文件. 只需将上传地址改为 XXXXXX.jpg?.aspx最终服务上最终存储的文件会变为XXXX ...
随机推荐
- DS博客作业02—线性表
1.思维导图及学习体会 1.1第一章绪论知识点思维导图 1.2.谈谈你对线性表的认识及学习体会. 线性表最重要的就是对指针的操作,插入删除都是看指针的指向进行操作以达到改变节点,以达到目的的.对于上学 ...
- element-ui多选框模糊搜索输入文字闪动问题
.el-select__tags { .el-select__input { width: 50px !important; } } 添加这段代码即可 <el-select v-model=&q ...
- HttpUtility.UrlEncode()关于空格的编码问题
因为 HttpUtility.UrlEncode 在 Encode 的时候, 将空格转换成加号"+", 在 Decode 的时候将"+"号转为空格, 但是浏览器 ...
- 搭建企业git代码版本管理所需工具
此片文章纯属记录一下使用gitlab搭建私有git版本管理的一些工具及概念. 先记录一下概念 git 是一种版本控制系统,是一个命令,是一种工具 github 是一个基于git实现 ...
- 20175315 《Java程序设计》第6周学习总结
20175215 <Java程序设计>第6周学习总结 教材学习内容总结 第七章主要讲的是内部类,匿名类,异常类等等. 内部类:Java支持在一个类中定义另一个类,称作内部类,包含内部类的类 ...
- Appnium-API-Execute Mobile Command
Execute Mobile Command Java:driver.executeScript("mobile: scroll", ImmutableMap.of("d ...
- html获取输入框的值
https://zhinan.sogou.com/guide/detail/?id=316512383339
- Python3学习笔记十八
1. MTV M: model 与数据库相关 T: Template 与html相关 V: views 与逻辑相关 一. URL配置 启动:python ...
- Apt下载安装包时Hash校验和不符
近期我的电脑在使用apt-get或aptitude下载Linux安装包时总是出现如下图所示的Hash校验和不符的问题.以至于下载过程被频繁中断,不得不反复运行apt-get或者在aptitude中按g ...
- Linux 高阶命令进阶(一)
Linux 高阶命令进阶 (一)输出重定向 1. > :正确覆盖输出,会覆盖掉原先的文件内容 把文本写入文档中 # vim test ...