最新版富文本编辑器UEditor操作教程
最近项目中使用到了富文本编辑器,选择的是百度的UEditor。所以对其进行了研究,发现最近发布了新版本,与以往的用法有的改变。一下对UEditotr 的是用做一下详细的介绍。
首先是UEditotr的下载,下载地址:http://ueditor.baidu.com/website/download.html
在这个页面有很多下载选项,为了简单起见,可以更具开发的环境进行下载。我用的是JSP,所以下载的是
以下的使用说明也都是以JSP的作为介绍,其他的大同小异。
下载完成之后解压出来。
下边开始介绍使用方法:
一.导入:
将解压好的文件导入工程,我用的是MyEclipse,直接粘贴到工程中的WebRoot下如图:
工程中的js文件报错是由于开发工具的问题,不用处理。
二.包的导入:
在导入的文件中的jsp->lib下有需要导入的包
将这些包拷贝到WEB-INF的lib下
导入后有的包不能自动添加,需要手动添加一下。
三.简单例子:
在jsp的head中添加:
<script type="text/javascript"charset="utf-8" src="ueditor1_4_2-utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor1_4_2-utf8-jsp/ueditor.all.js"> </script>
body中添加:
<scriptid="editor" name="editor" type="text/plain" style="width:1024px;height:500px;"></script>
<script type="text/javascript">
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下 引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');
</script>
注意在head中的引用是否正确,一切完成后启动程序,就能看到效果。
四.修改展现的样式:
如果你不需要这么多的功能选项,可以修改ueditor.config.js
这是规定页面展现的地方,不要的删除即可。我只需要上传图片和表格,所有修改后如图:
五.修改图片上传地址:
这个地方,之前的版本是在ueditor.config.js修改的,但新版本中是在config.json中修改:
这里有很详细的中文注解。修改imagePathFormat即可修改上传图片的地址,其他上传功能修改相似。
六.上传到云盘或别的网站:
之前的上传是上传到程序所在的服务器上,这样迟早是会沾满资源的,所以要放到云盘或别的地方。
指定上传路劲:UE.Editor.prototype._bkGetActionUrl= UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl= function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action== 'uploadimage') {
return "<c:url value='/savePic'/>";
} else if (action == 'uploadvideo') {
return 'http://a.b.com/video.php';
} else {
return this._bkGetActionUrl.call(this, action);
}
};
这样在上传图片的时候就会去找/savePic路劲,实现你指定的上传。在后台写好上传功能即可。需注意的是上传时,信息放在Request Payload中,后台接收数据时,需注意(接收方法请上网查找,此处不做介绍);图片保存后,需向前台回传信息:
JSONObject result = new JSONObject();
result.put("state", "SUCCESS");
// result.put("title", "1431917830166036926.png");
// result.put("original","QQ\u56fe\u724720150511105213.png");
// result.put("type", ".png");
result.put("url", request().getContextPath()+"/pledge/download?filePath="+filePath);
// result.put("size", "8941");
this.renderJSON(result.toString());
七.表单提交:
简单的form表单提交即可。将接收的信息保存。
八.页面展示:
从数据库提取信息,展示即可:
<script id="editor"name="editor" type="text/plain" style="width:1024px;height:500px;"> <c:out value="${editor}"/> </script>
九.页面操作:
页面有时需要一些操作,比如禁止编辑,提取信息等:
varue = UE.getEditor('editor');
ue.ready(function() {
ue.setDisabled('fullscreen');
});//禁止编辑
可查看文档:http://fex.baidu.com/ueditor/#api-common
转载于:https://www.cnblogs.com/taocong/p/5939444.html
最新版富文本编辑器UEditor操作教程相关推荐
- TP5.1框架中百度富文本编辑器UEditor的使用
在实际项目开发中最常使用到的工具之一就是富文本编辑器,使用富文本编辑器可以实现所见即所得的效果,且所有富文本编辑器里的内容(包括图片,视频,音乐等文件)全部可以带格式的存入数据库中且只需占用一个字段. ...
- themyleaf 图片上传_springboot thymeleaf 整合 百度富文本编辑器UEditor进行图片上传
项目中需要使用到富文本编辑器,找来找去发现百度UEditor富文本编辑器在国内最为常用因此就尝试引入.编辑器官网是:http://ueditor.baidu.com/website/index.htm ...
- java集成富文本编辑器UEditor
JAVA集成富文本编辑器UEditor 集成前说明 集成UEditor 一.UEditor下载 二.UEditor迁入项目 三.引入ueditor中的js 四.初始化UEditor 五.实现图片上传 ...
- 富文本编辑器Ueditor实战(四)-video集成
本文接上文富文本编辑器Ueditor实战(三)-springboot集成,上文留了一个小问题,ueditor中上传video存在一个问题,标签会被自动替换的问题.那么如何应对在富文本编辑器中上传视频呢 ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- vue项目+富文本编辑器ueditor - 资源篇
资源地址: git源码 · 解说地址 git源码:源码下载地址 · [基于 vue-cli 2.x 的完整 DEMO] ueditor插件Demo演示地址 说明: 支持 vue-cli 2.x 支持 ...
- yii2 html编辑器,浅析Yii2集成富文本编辑器redactor实例教程
在上篇文章给大家介绍了如何在yii2中集成百度编辑器umeditor以及如何解决umeditor上传图片问题. 今天我们来谈谈yii2集成另外一个强大好用的富文本编辑器Redactor,个人觉得Red ...
- Markdown富文本编辑器(数学公式教程)
Markdown富文本编辑器(数学公式教程) 简单分类 行内公式示例如下 行间公式实例如下 希腊字母 上标与下标 括号 小括号与方括号 大括号 尖括号 上取整 下取整 求和与积分 求和 积分 连乘 其 ...
- 富文本编辑器Ueditor实战(二)-图片上传
本文接前文富文本编辑器Ueditor实战(一),前文留了一个问题,就是图片上传功能无法使用,报后台配置错误的问题.那么应该如何配置图片上传功能呢?本文将使用jsp+tomcat的方式进行说明如何动态配 ...
最新文章
- linux 明文创建密码,linux下抓取内存中明文密码mimipenguin
- Transferring GANs: generating images from limited data 论文学习
- lua sleep函数实现
- Python(2):基本数据类型
- java前补零工具类_java生成编码工具类,不足补0
- 如何退订语音包_怎么关闭语音助手 - 卡饭网
- shape context matlab,形状上下文(shape context)算法完全解读
- 制作Camtasia 2020击键标记动画
- 轮廓系数的应用:kmeans聚类理论篇K的选择(轮廓系数)
- 2013CSDN全国高校巡讲之四川托普信息技术职业学院
- word中插入分割线
- 三维点云处理(5)——Clustering
- html输入日期算出星座,如何通过日期计算星座
- Python全栈笔记(三)
- 获奖公布|@程序员,你读过的书,藏着自己的命运
- VS2019怎么没有C++的窗体应用模板_简历中常被忽视的「自我评价」,怎么写?
- 使用 JavaScript 拦截和跟踪浏览器中的 HTTP 请求
- python开发飞机小游戏_Python开发的飞机打外星人小游戏
- 先用总分升序再用计算机降序,怎样用升序降序给EXCEL排名
- 模型计算算力_8核人工智能开源主板_基于 BITMAIN AI 计算模组_3.5寸