PHP如何搭建百度Ueditor富文本编辑器
本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法，供大家参考，具体内容如下
下载UEditor
官网：下载地址
将下载好的文件解压到thinkphp项目中，本文是解压到PUBLIC目录下并改文件夹名称为ueditor
第一步 引入javascript
在html中如入下面的js语句引入相关文件
<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值
<textarea type="text" name="content" id="EditorId" placeholder="请输入内容"></textarea>
第三步 初始化UEditor编辑器
在html代码中添加下面的代码初始化UEditor编译器
<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代码：
<!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>
效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
ThinkPHP中使用Ueditor富文本编辑器
具体插件下载: http://ueditor.baidu.com/website/download.html#ueditor UEditor官方文档: http://ueditor.baidu.com/website/document.html 之前于 "ThinkPHP-代码" 案例中发布版本: http://www.thinkphp.cn/code/175.html UEditor解压于:PUBLIC/Ueditor下(同级目录有:Common,Conf,Lib,Tpl等) 例:在
-
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
ThinkPHP的conf文件中的Convention.php有一个配置选项 'DEFAULT_FILTER' => 'htmlspecialchars', // 默认参数过滤方法 用于I函数... 默认这个方法是开启的.也就是说,我们往数据库里面存储的数据中都会经过htmlspecialchars这个函数的转义处理. 我在我的项目中使用了Kindeditor富文本编辑器(或许你使用的是Ueditor\ckeditor),通过富文本编辑器编辑文章的内容然后存储到数据库中,再从数据
-
PHP如何搭建百度Ueditor富文本编辑器
本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为ueditor 第一步 引入javascript 在html中如入下面的js语句引入相关文件 <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/u
-
vue2.x集成百度UEditor富文本编辑器的方法
最近开发vue项目过程中,由于产品需要在项目中添加富文本编辑器,也在npm上找了几个基于vue开发的富文本编辑器,但是对兼容性比较高,不能兼容到IE9,10.所以最后决定使用百度UEditor.然后又是各种找如何集成到vue中.好记性不如烂笔头,记录下来以便以后需要的时候可以直接用. 1.首先下载UEditor源码,将整个文件放到static文件夹中 2.然后将UEditor集成到项目中去. 找到src/main.js,在main.js中 import '../static/ueditor/ue
-
vue集成百度UEditor富文本编辑器使用教程
在前端开发的项目中,难免会遇到需要在页面上集成一个富文本编辑器.那么,如果你有这个需求,希望可以帮助到你. vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是我将百度富文本编辑器放到vue项目中使用.效果图如下 废话不多说. 1.使用vue-cli构建一个vue项目.然后下载UEditor源码,地址 把项目复制到vue项目的static文件下.目的是让服务可以访问到里面的文件,打开UEditor目录文件.这里下载的是jsp版本的.文件名字没有更改过.打
-
Vue.js结合Ueditor富文本编辑器的实例代码
在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器. 前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了. 1. 总体思路 1.1 模块化 vue的很大的一个优势在于模块化,我们可以通过模块化实现页面和逻辑的复用.所以可以把Ueditor重新封装成一个.vue的模板文件.其他组件通过引入这个模板实现代码复用. 1.2 数据传输 首先父组件需要设置编辑器的长度.宽度.初始文本,这些数据可以通过prop
-
vue中使用ueditor富文本编辑器
最近在做后台管理系统的时候遇到要使用富文本编辑器.最后选择了ueditor,我的项目使用 vue+vuex+vue-router+webpack+elementUI的方案完成框架的搭建, 1.下载UEditor官网最新的jsp版本的包,下载完成解压之后得到一个utf8-jsp的文件夹,里面包含的内容如下: 2.将这个文件夹改名为ueditor,并且移入自己项目中的static文件夹下,修改ueditor.config.js文件夹中的内容,如下图: 3.编写子组件 <template> <
-
C#使用百度Ueditor富文本框实现上传文件
目录 使用背景 准备 创建项目 配置项目 使用 使用背景 项目中需要用的富文本框去上传视频,图片的话大部分都是可以的.相对来说,国外的富文本框很成熟.但鉴于文档是英语,这里使用了百度的富文本框. 采用的api的方式,调用接口进行上传文件.话不多说,开撸! 准备 创建一个.net mvc的项目.下载百度富文本框.net 版本的js文件. 创建项目 创建好项目之后,首先引用一下富文本框的js.目录如下: 然后新增一个单页.这里使用的 home 控制器 下的index页面.代码如下 : @{ View
-
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
将Ueditor集成到YII框架中后,参照editor_config.js中的toolbars中的内容,更改options中标签可以给编辑器添加想要的功能: 因此要想添加文件和图片上传功能,应该加入以下两个标签: 文本编辑器中便出现了对应的两个选项: 但是点击上传图片按钮后发现,无法正常进行图片上传,文件上传也是失败的,问题都是Flash Player需要升级, 因此在火狐浏览器中安装对应的flash player组件,选择其中一个工作: 此时,文件上传和图片上传功能就能正常使用了: 上传路径的
-
Vue2.0中集成UEditor富文本编辑器的方法
在vue的'项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor. 这类的文章网上有很多,我进行了摸索.手写代码.汇总.排版,形成了这篇文章. 下载对应的UEditor源码 首先,去官网上下载UEditor的源码,根据你后台语言的不同下载对应的版本(PHP.Asp..Net.Jsp). http://ueditor.baidu.com/website/download.html 下载
-
js获取UEditor富文本编辑器中的图片地址
写之前在网上找了很多方法,最简单的思路应该是1.获取UEditor中的内容:2.将获取到的字符串转换成jquery对象:3.选择器找到img元素,获取src值. var content= UE.getEditor('details').getContent();//获取编辑器内容 var $div = document.createElement("div");//创建一个div元素对象 $div.innerHTML = content;//往div里填充html var $v = $
-
nodejs后台集成ueditor富文本编辑器的实例
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.. 1 下载ueditor nodejs版本 2 复制public目录下面的文件 到项目静态资源public文件夹下 3 在项目根目录创建ueditor文件夹 要复制进来的内容为 4 在根目录的 ueditor文件夹下执行 npm install 安装此目录下面package.json依赖的模块 5 项目根目录下创建 ue.js 代码部分来自于