当前位置：文档之家 › UEditor富文本编辑器整合经验分享

UEditor富文本编辑器整合经验分享

  • 格式：docx
  • 大小：2.07 MB
  • 文档页数：19

UEditor富文本编辑器整合经验分享
UEditor富文本编辑器整合经验分享 (1)
第 1 章引言 (1)
第 2 章官方DEMO (3)
第 3 章动手整合UEditor (5)
第 1 章引言
前段时间开发邮件模块需要使用到一款富文本编辑器，综合考察之后选择了UEditor——百度的富文本编辑器。

在整合到项目的过程中，遇到了不少问题，困扰了不少时间，在整合过程中也参考了不少前辈们的文章收获良多，本文主要是谈谈自己在整合过程中遇到各种问题（或者网上甚少提到的）及UEditor自己的一些内部瑕疵，做为经验分享给大家，希望大家在以后的整合过程中避免可能会重复陷入的坑提供一些帮助和提醒。

UEditor工具条
UEditor功能展示
UEditor是一款功能相对比较强大的前端富文本编辑器，支持四种后台语言环境，比如php，asp，，jsp。

UEditor是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

百度官方UEditor文档及下载地址为
百度UEditor官网上，可以查看并下载UEditor源码，初始了解UEditor功能及体验。

由于ueditor开发组是一个前端团队，而对后端实力较欠缺(官方原话)，笔者在整合过程中发现其对后台的处理还有些瑕疵（比如图片上传及回显处理或文件上传及下载处理），特别是没有具体前后台交互的实际案例（能让开发者在本地实际运行的DEMO）开发者实际调试成功，便能快速地掌握前后台交互的机制。

下图为百度FEX团队的对后端部署的说明
第 2 章官方DEMO
官方下载地址
/website/download.html
本文以JSP版本为例下载UTF-8版本并解压
用浏览器打开index.html
看到demo界面，兴奋了一阵子，然而涉及到后台交互的功能(如图片文件上传)，暂时是不能用的，按F12查看浏览器控制台发现有错误
由于官方demo没有后台代码的实际支撑，所以实际整合过程中会遇到各种问题，或许一时没有头绪，如果有一个实际能运行的案例就好了。

笔者参考csdn网站博主liuyazhang的一篇文章
拜读之后才开始自己的整合之路，并提供了实际运行的DEMO该例子也是在博主的例子的基础之上，修复了若干问题后才整合成功的。

解决了问题是，图片上传、存储、前端页面显示；文件上传、存储、前端页面下载
第 3 章动手整合Ueditor
3.1ueditor整体植入结构
本例子整合工具使用的eclipse,用流行的idea当然也是可以的，ueditor插件目录如下所示
工程中需要添加以下jar包(Ueditor中就有),如果工程使用Mevan则添加到Mevan中
3.2富文本页面入口index.jsp
引入富文本编辑入口页面index.jsp如下所示
引用了ueditor.config.js,ueditor.all.js,zh-cn.js,index.js和jquery-1.12.0.min.js 控件容器载体可以用<textarea>,<div>等
控件初始化方法UE.getEditor(‘myEditor’)
也可以使用<div>加<script>来定义控件容器载体,初始化方法大同小异
无论是<textarea><div><script>等标签做为控件容器，最终都会被UEditor所渲染成控件。

3.2关于config.json
很多资料都提到了config.json文件是配置参数的文件，然而笔者发现参数定义在本文件中并不起作用，实际上配置参数定义在ueditor.config.js文件中才会真正起到作用
3.3关于ueditor.config.js
可以说是ueditor最重要的配置文件,后台配置基本定义在此。

官方文件如上所示，定义了serverUrl服务器统一请求接口路径jsp/controller.jsp
在ueditor目录中能找到这个controller.jsp，这个jsp仅仅是用来模拟后台的入口，真实整合过程中应该是调用后台Controller类而不是这个jsp
整合完成之后的ueditor.config.js参考如下
contextRootPath:
由于整合过程中很多地方会用到工程根目录，这里就定义好即可，与工程名保持一致即可。

serverUrl:
服务器统一请求接口路径比如../ueditor/config (参考UEditorController) imageActionName:
定义了图片上传后台类及方法比如/resource/upload/images (参考UploadImageController) imageUrl:
图片页面回显后台类及方法比如: /resource/upload/viewImagesToPage.do?imagePath=(参考UploadImageController)
fileActionName:
文件上传设置比如/resource/upload/images(参考UploadImageController)
fileUrlPrefix:
文件下载后台比如/ueditor/resource/upload/fileDownLoad.do?(参考UploadImageController) 3.4serverUrl与服务器统一请求控制类UEditorController
本类替换原来官方提供的后台入口controller.jsp ,参考代码如下
3.5图片及文件上传控制类UploadImageController
本类是实现图片上传至服务指定目录并在页面回显的指定服务类，同时也是文件上传及下载的服务类，与配置文件ueditor.config.js中定义的以下参数有关联
imageActionName:
定义了图片上传后台类及方法比如/resource/upload/images
imageUrl:
图片页面回显后台类及方法比如: /resource/upload/viewImagesToPage.do?imagePath= fileActionName:
文件上传设置比如/resource/upload/images
fileUrlPrefix:
文件下载后台比如/ueditor/resource/upload/fileDownLoad.do?
代码参考如下
图片文件上传及存储方法images
图片在JSP页面回显方法viewImagesToPage方法
文件在页面下载方法fileDownLoad
3.6关于图片上传涉及ueditor.all.js中的一些问题
●图片上传至后台MultipartFile为空
原码24486行涉及到图片上传的部分代码
name="' + me.options.imageFieldName + '" '需要与后台images方法中的MultipartFile file 名称保持一致
如不然，则会取不到值MultipartFile对象为空
●后端配置项没有正常加载，上传插件不能正常使用!
常出现于24557行me.getOpt('imageActionName')获值出错原因为ueditor.config.js中未定义imageActionName图片后台服务路径
注意：上面代码对图片上传的路径做了调整并添加文件类型为image的参数(为存储路径的参数)
●上传后图片无法回显
原码24524行对图片路径处理的调整其中json.url 是后台方法image赋值过去的
浏览器控制台打印效果 (图片显示链接)
●上传excel文件后，页面反显为txt图片
上传的明明是excle文件显示的居然是txt图标原因是原码中少了对xlsx文件的映射关系，这里属于ueditor的小瑕疵
解决办法是在原码中加入对xlsx类型文件的映射关系即可
再重试.xlsx类文件上传，发现图标恢复正常。

3.7关于附件上传的问题
●attachment.html
建议不引用webuploader.min.js改为引用原webuploader.js以方便处理附件上传遇到的各种问题
●文件上传路径
webuploader.js第6199行
添加以上三行代码取得文件路径为
文件类型参数为file
●附件上传路径问题
attachment.js第146行
actionUrl = editor.getOpt('fileActionName'),考虑不用getActionUrl方法
●附件下载链接问题
attachment.js第560行
●文件上传路径
3.8关于图片附件上传服务器存储路径的问题
对图片附件的存储路径定义在applications.properties文件中
后台的UploadImageController将对请求参数的不同将图片和附件存放在不同的目录中
第 4 章案例分享
本文提供的完全与文章内容一致的案例，可供读者实际在本地运行
4.1案例下载地址
/download/lixinyao5281/10170693
4.2运行准备工作
本案例由于是SpirngMVC整合需要连接Mysql数据库,数据库的连接配置文件为applicationContext.xml,配置举例如下
读者在本地配置好mysql数据库即可
实际运行效果如下
图片上传按钮和附件上传按钮如下图左侧和右侧。

合集下载

UEditor富文本编辑器上传图片配置

UEditor富文本编辑器上传图片配置

UEditor富⽂本编辑器上传图⽚配置UEditor 上传⽂件不进⾏配置的话，是⽆法使⽤的。

然后下载符合⾃⼰项⽬的版本，我是⽤的asp版，其实都⼀样，因为基本不需要你进⾏编码
解压后⾥⾯是这个样⼦的
把整个⽂件夹都扔进项⽬，然后我们就要开始配置了
打开ueditor.config.js，看⼀下serverUrl是不是指向controller.asp，如果不是就改为指向controller.asp。

接下来打开asp⽂件夹中的config.json
⾥⾯图⽚上传相关的配置有两个地⽅
⾃带的注释已经写得很详细了，就不多做解释了
如果上传的图⽚位置不对
改 imagePathFormat
如果上传时正常，上传后在富⽂本编辑器中显⽰时路径不对
改 imageUrlPrefix
如果上传时和富⽂本中都正常，但是多图上传→在线管理的路径不对
改 imageManagerUrlPrefix
第⼀张图是上传功能的相关配置，第⼆张图则是多图上传→在线管理的相关配置
到这⾥就配置完了
config.json⾥还有上传⽂件的相关配置，需要的话也可以⾃⼰看看，应该和图⽚没什么区别。

使用 Ueditor 的剪切板功能快速剪切和复制文本

使用 Ueditor 的剪切板功能快速剪切和复制文本

使用 Ueditor 的剪切板功能快速剪切和复制文本
Ueditor 是一款功能强大的在线文本编辑器，支持多种格式的文本插入和编辑。

在使用过程中，我们可能需要对文本进行剪切操作，以满足特定的需求。

Ueditor 提供了多种剪切方法，以下是其中两种常用的方法:
1. 使用 Ueditor 的剪贴板功能
Ueditor 的剪贴板功能可以保存当前编辑器中的文本内容，并可以直接将其剪切到剪贴板中。

要使用此功能，请执行以下步骤:
- 在编辑器中编辑文本。

- 按下键盘上的 Ctrl+X(Windows) 或 Cmd+X(Mac) 键，选择要剪切的文本。

- 在弹出的“剪切”对话框中，选择要保存文本的剪贴板。

- 将文本从编辑器中剪切到剪贴板中。

2. 使用 Ueditor 的剪切板管理器
Ueditor 的剪切板管理器可以方便地管理剪贴板中的文本。

要使用此功能，请执行以下步骤:
- 在编辑器中编辑文本。

- 按下键盘上的 Ctrl+X(Windows) 或 Cmd+X(Mac) 键，选择要剪切的文本。

- 打开 Ueditor 的“剪切板管理器”对话框。

- 在对话框中，可以选择要保存到剪贴板中的文本，并将其拖到编辑器中。

- 将文本从编辑器中剪切到剪贴板中。

Ueditor 的剪切板功能可以帮助用户快速剪切和复制文本，以满足特定的需求。

ueditor的关于右键的方法

ueditor的关于右键的方法

ueditor的关于右键的方法ueditor是一款非常实用的富文本编辑器，其功能强大且易于使用。

其中关于右键的方法更是为用户提供了便捷的操作方式。

本文将详细介绍ueditor关于右键的方法，帮助读者更好地利用这一功能。

1. 设置右键菜单ueditor提供了设置右键菜单的方法，可以根据具体需求自定义右键菜单的内容和功能。

通过配置项`contextMenu`可以实现对右键菜单进行设置。

用户可以根据自己的需求，添加或删除右键菜单的选项，从而实现个性化的操作方式。

2. 自定义右键菜单功能在设置右键菜单的基础上，ueditor还提供了自定义右键菜单功能，允许用户根据具体需求自定义右键菜单的功能。

通过配置项`contextMenu`中的`items`属性，可以对右键菜单的选项进行自定义。

用户可以添加自己需要的功能，例如插入特殊符号、格式化文本等，从而提高编辑效率。

3. 控制右键菜单的显示与隐藏有时候，用户可能只希望在特定情况下显示右键菜单，而在其他情况下隐藏。

ueditor提供了控制右键菜单显示与隐藏的方法，用户可以根据具体需求，在合适的时机调用相关方法，来控制右键菜单的显示或隐藏。

4. 自定义右键菜单样式除了功能的设置，用户还可以根据自己的喜好，对右键菜单的样式进行自定义。

ueditor提供了丰富的样式配置项，可以自定义右键菜单的背景颜色、字体样式、边框样式等。

通过设置相关配置项，用户可以将右键菜单的样式与页面整体风格保持一致，提升用户体验。

5. 扩展右键菜单功能如果用户需要更多的右键菜单功能，可以通过扩展插件的方式来实现。

ueditor提供了插件开发的接口，用户可以根据自己的需求开发相应的插件，从而扩展右键菜单的功能。

通过插件的方式，用户可以实现更多的功能，满足个性化的编辑需求。

总结通过以上几个方面的介绍，我们可以看到ueditor关于右键的方法非常丰富。

用户可以根据自己的需求，进行个性化的设置和定制，提高编辑效率和用户体验。

百度编辑器（UEditor）开发系列——调用上传图片、上传文件等模块

百度编辑器（UEditor）开发系列——调用上传图片、上传文件等模块

百度编辑器（UEditor）开发系列——调用上传图片、上传文件等模块说到百度富文本编辑器ueditor（下面简称ue），我不得不给它一个大大的赞。

我们在网站建设、前端开发时，网站的内容管理就使用了它。

对于它的多图片上传和附件上传，个人感觉很好用，我就琢磨着是否可以外部调用多图上传和附件上传组件为自己所用，并封装成一个插件，节省单独开发的成本。

有了这个想法后，着手操作，理下实现思路，得出实现的关键在于监听这两个组件在编辑器里的插入动作。

打开源码，苦心研究，皇天不负苦心人，终于摸索出解决方法，现在分享出来，给拥有同样想法的小伙伴，为网站建设届尽一份力。

注：本文基于UEditor1.4.3.3版本。

1、引入ue相关文件，写好初始代码为了更好的封装整一个单独的插件，这里我们要做到示例化ue后隐藏网页中的编辑窗口，并移除焦点。

<!doctype html><html lang="zh-cn"><head><meta charset="UTF-8"><title>外部调用UEditor的多图上传和附件上传</title><script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script><style>ul{display: inline-block;width: 100%;margin: 0;padding: 0;}li{list-style-type: none;margin: 5px;padding: 0;}</style></head><body><h1>外部调用UEditor的多图上传和附件上传示例</h1><button type="button" id="j_upload_img_btn">多图上传</button><ul id="upload_img_wrap"></ul><button type="button" id="j_upload_file_btn">附件上传</button><ul id="upload_file_wrap"></ul><!-- 加载编辑器的容器 --><textarea id="uploadEditor" style="display: none;"></textarea><!-- 使用ue --><script type="text/javascript">// 实例化编辑器，这里注意配置项隐藏编辑器并禁用默认的基础功能。