下载安装

1.首先到官网下载最新版的UE1.4.3
UE官方下载地址:http://ueditor.baidu.com/website/download.html#ueditor

这里我下载的是1.4.3PHP版本。下载你所使用的版本就行。

解压文件到你的项目

2.部署.在前端Html页面引入UE  所需的JS文件,然后使用getEditor 实例化

<body>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>

浏览你的页面,即可见Ueditor 。是不是很简单的说。

配置Ueditor

UEditor 的配置项分为两类:前端配置项 和 后端配置项。
前后端的配置统一写在后端(PHP版本的config在php/config.json),编辑器实例化时,异步读取后端配置信息,覆盖到前端的配置里。

后端获取的配置项 > 实例化传入的配置项 > ueditor.config.js文件的配置项

前端配置项:官方提供了两种配置方法,静态配置、动态配置。

静态配置:即配置ueditor 目录下的 ueditor.config.js  具体配置项就参考  http://fex-team.github.io/ueditor/#start-config

动态配置:即在实例化UE的时候,通过动态传入配置参数。

var ue = UE.getEditor('container', {
//这里写你的自定义配置项
toolbars: [
['fullscreen', 'source', 'undo', 'redo', 'bold']
],
autoHeightEnabled: true,
autoFloatEnabled: true
});

后端配置项:
在这里先说一下UE的请求:UE所有的操作都是通过get方式请求serverUrl传递action变量的值来进行下一步操作。获取配置、上传图片、获取图片等等其它的操作。

UE默认是通过读取目录下的ueditor.config.js 中的serverUrl 参数然后通过get方法传递action=config来获取后端的配置项的。默认请求是:serverUrl?action=config 来获取配置项的。serverUrl 可以在前端页面动态配置和ueditor.config.js静态配置都是可以的。

你可以测试你的网站下的路径 ueditor/php/controller.php?action=config 是否正常返回了json格式(其它格式也可以,具体请看官方文档)的后端配置内容,格式大致如下。如果这个请求出错,出现400、500等错误,编辑器上传相关的功能将不能正常使用。

{
"imageUrl": "http://localhost/ueditor/php/controller.php?action=uploadimage",
"imagePath": "/ueditor/php/",
"imageFieldName": "upfile",
"imageMaxSize": 2048,
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"]
"其他配置项...": "其他配置值..."
}

集成

前面已经说过了UE所有的操作都是通过get方式请求serverUrl传递action变量的值来进行下一步操作。获取配置、上传图片、获取图片等等其它的操作。了解了这一点,对于集成PHP。或者其它的语言都很简单了。具体代码可以参考官方提供的Demo。

htmlspecialchars_decode() 函数把预定义的 HTML 实体转换为字符。

会被解码的 HTML 实体是:

  • & 解码成 & (和号)
  • " 解码成 " (双引号)
  • ' 解码成 ' (单引号)
  • < 解码成 < (小于)
  • > 解码成 > (大于)

htmlspecialchars_decode() 函数是 htmlspecialchars() 函数的反函数。

把预定义的 HTML 实体转换为字符:

<?php
$str = "Bill & 'Steve'";
echo htmlspecialchars_decode($str, ENT_COMPAT); // 只转换双引号
echo "<br>";
echo htmlspecialchars_decode($str, ENT_QUOTES); // 转换双引号和单引号
echo "<br>";
echo htmlspecialchars_decode($str, ENT_NOQUOTES); // 不转换任何引号
?>

以上代码的 HTML 输出如下(查看源代码):

<!DOCTYPE html>
<html>
<body>
Bill & &#039;Steve'<br>
Bill & 'Steve'<br>
Bill & &#039;Steve'
</body>
</html>

PHP集成百度Ueditor 1.4.3的更多相关文章

  1. 网站如何集成百度UEditor编辑器

    在平时的网站维护使用过程中,富文本编辑器是网站必不可少的元素之一.现在市面上各种编辑器功能设计参差不齐,自己做了几个网站都是用蝉知建站系统做的,而蝉知默认内置的编辑器是KindEditor,功能简单, ...

  2. 【军哥谈CI框架】之CI中集成百度UEditor

    Hello,各位亲,新的一周来临啦,很高兴这么快又跟大家伙见面!话说上一回,军哥带大家用JQuery写了一个城市级联菜单的例子 ,不知道亲们学会了多少,是否自己可以独立写出来了呢. 军哥很是期待大家学 ...

  3. vue集成百度UEditor富文本编辑器

    在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是 ...

  4. Spring Boot集成百度Ueditor

    遇到的问题: 1.将ueditor加入/static目录下,能正常显示,但是出现“请求后台配置项http错误,上传功能将不能正常使用!”(解决在下面,都是自定义上传的,如果需要官方的示例,我也无能为力 ...

  5. SpringBoot集成百度UEditor图片上传后直接访问404解决办法

    SpringBoot项目上传图片一般是上传至远程服务器存储,开发过程中可能会上传至当前项目的某个静态目录中,此时就会遇到这个问题,文件在上传之后直接访问并不能被访问到,必须重新加载项目. 首先分析一下 ...

  6. 集成百度编辑器 ueditor 后端配置项没有正常加载,上传插件不能正常使用!

    项目要用到编辑器,于是集成了ueditor,集成ok,但一直显示 ‘’后端配置项没有正常加载,上传插件不能正常使用!‘’ 各种查: 网上说的无非就是那么集中情况 1. 因为百度官方的问题,php/co ...

  7. django之百度Ueditor富文本编辑器后台集成

    Python3 + Django2.0 百度Ueditor 富文本编辑器的集成 百度富文本编辑器官网地址:http://fex.baidu.com/ueditor/ 疑问:为什么要二次集成? 答案:因 ...

  8. vue集成百度富文本编辑器

    1.前期工作,访问百度富文本官网下载相应的百度富文本文件,根据后端用的技术下载相应的版本,建议下载最新版UTF-8版 (有图有真相,看图) https://ueditor.baidu.com/webs ...

  9. 百度UEditor在线编辑器的配置和图片上传

    前言 最近在项目中使用了百度UEditor富文本编辑器,配置UEditor过程中遇到了几个问题,在此记录一下解决方案和使用方法,避免以后使用UEditor出现类似的错误. 基本配置 一.下载UEdit ...

随机推荐

  1. 打造完美的xml技术解决方案(dom4j/xstream)

    转: XML 技术是随着 Java 的发展而发展起来的.在 XML 出现之前对于简单的数据格式通常是存储在 ini 配置文件等文本文件中,复杂的格式则采用自定义的文件格式,因此对于每种文件格式都要有专 ...

  2. Kylin(三): Saiku

    Saiku是一个轻量级的OLAP分析引擎,可以方便的扩展.嵌入和配置.Saiku通过REST API连接OLAP系统,利用其友好的界面为用户提供直观的分析数据的方式,它是基于jQuery做的前端界面. ...

  3. coffeeScript中类的多态[学习篇]

    类的一大应用就是多态.多态是一个面向对象编程的高级术语----“一个东西可编程很多不同的东西,但不是任何东西”.[引自coffeescript深入浅出] class Shape constructor ...

  4. XFire最佳实践

    前言:XFire是新一代WebService框架,同时也支持与Spring集成,帮助我们方便快速地在Spring框架中开发WebService应用. 本节主要介绍XFire+Spring集成的2种常用 ...

  5. [综] Latent Dirichlet Allocation(LDA)主题模型算法

    多项分布 http://szjc.math168.com/book/ebookdetail.aspx?cateid=1&&sectionid=983 二项分布和多项分布 http:// ...

  6. oracle数据库常用语句

    --查看数据库版本-- select * from product_component_version; -- 查看dbf存放位置 select * from dba_data_files; -- 查 ...

  7. 代码安装apk文件

    Intent intent = new Intent(); intent.setAction(Intent.ACTION_VIEW); Uri uri = Uri.fromFile(file); in ...

  8. Python文本处理——中文标点符号处理

    中文文本中可能出现的标点符号来源比较复杂,通过匹配等手段对他们处理的时候需要格外小心,防止遗漏.以下为在下处理中文标点的时候采用的两种方法,如有更好的工具,请推荐补充. 中文标点集合 比较常见标点有这 ...

  9. jQuery的编码标准和最佳实践

    不知道在哪里看到了这篇关于jQuery编码的文章,挺实用的,恰好最近在研究jQuery的基础知识,今天打开收藏夹来翻译一下,原文的英语不难,但是内容很实用,可能有大神已经翻译过了,大家看精华就行了. ...

  10. form表单的enter自动提交

    当form中只有一个文本框时并且获得焦点 按enter时,就会自动提交表单.阻止自动提交 可以添加一个隐藏的input框 <input type="text" style=& ...