您的位置:时时app平台注册网站 > web前端 > JavaScript 富文本编辑器

JavaScript 富文本编辑器

2019-11-08 03:50

WEB项目中使用UEditor(富文本编辑器)

2.在页面中添加js引用,在页面中引用

 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2     import="com.baidu.ueditor.ActionEnter" 3     pageEncoding="UTF-8"%> 4 <%@ page trimDirectiveWhitespaces="true" %> 5 <% 6  7     request.setCharacterEncoding( "utf-8" ); 8     response.setHeader("Content-Type" , "text/html"); 9     String rootPath = application.getRealPath( "/" );10     out.write( new ActionEnter( request, rootPath ).exec;11     12 %>

第9行中的rootPath 是获取 项目的实际路径,并作为 ActionEnter 构造函数的参数之一实例化对象,在这个构造函数中会去初始化改类的成员变量以及通过“ConfigManager.getInstance”获取配置,
其实是获取 ueditor/jsp/config.json 的配置信息。大家可以去看一下里面配置了一些什么内容,里面也有注释,我这里粘贴图片的配置内容:

1     public ActionEnter(HttpServletRequest request, String rootPath) {2         this.request = request;3         this.rootPath = rootPath;4         this.actionType = request.getParameter("action");5         this.contextPath = request.getContextPath();6         this.configManager = ConfigManager.getInstance(this.rootPath, this.contextPath, request.getRequestURI;7     }

 1     /* 上传图片配置项 */ 2     "imageActionName": "uploadimage", /* 执行上传图片的action名称 */ 3     "imageFieldName": "upfile", /* 提交的图片表单名称 */ 4     "imageMaxSize": 2048000, /* 上传大小限制,单位B */ 5     "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */ 6     "imageCompressEnable": true, /* 是否压缩图片,默认是true */ 7     "imageCompressBorder": 1600, /* 图片压缩最长边限制 */ 8     "imageInsertAlign": "none", /* 插入的图片浮动方式 */ 9     "imageUrlPrefix": "", /* 图片访问路径前缀 */10     "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */11                                 /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */12                                 /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */13                                 /* {time} 会替换成时间戳 */14                                 /* {yyyy} 会替换成四位年份 */15                                 /* {yy} 会替换成两位年份 */16                                 /* {mm} 会替换成两位月份 */17                                 /* {dd} 会替换成两位日期 */18                                 /* {hh} 会替换成两位小时 */19                                 /* {ii} 会替换成两位分钟 */20                                 /* {ss} 会替换成两位秒 */21                                 /* 非法字符  : * ? " < > | */22                                 /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */

UEditor注意事项:

下载的文件包,如图:

图片 1

在网站目录或者Web项目下建一个文件夹,名为ueditor

.NET网站项目需要添加引用Newtonsoft.Json;

正常情况下就可以使用该富文本编辑器了.如果遇到后端配置异常等问题,请检查ueditor目录是否正确,或者调试controller.ashx等,上传的附件都保存在~/ueditor/net/upload/image这里

 

使用ueditor加载页面绑定数据时,等到页面加载完毕后才能赋值的处理办法:

UE.getEditor( 'editor' ).ready( function ()
{
  UE.getEditor( 'editor' ).setContent( obj.ArticleContent );
} );
//obj.ArticleContent是需要赋的值

如此就完美了,至于如何使用ueditor,请查看index.html页面的东西,可以直接粘贴图片的

 

(注:最新的代码需要时基于.NETFramework4以上)

如果你的不是maven项目的话,直接把所有包拷贝到项目下面的lib目录下就可以自动引入了,但是如果是maven项目的话,maven库里没有ueditor的包,那就不能按照平常的方式引入了,可以把ueditor的包拷贝到项目的lib目录下之后,在pom.xml中这样引入:

UEditor - 完整示例

1.将ueditor包导入项目

可能有些人也知道,UEditor是百度的开源富文本编辑器,当然也有一些其他优秀的富文本编辑器,比如kindeditor,ckeditor之类的,大家可以对比一下使用,但是我今天主要是讲java版的UEditor。

首先在页面加载时获取到新闻的id,然后再进行ajax查询,查询新闻封装在了一个handler中,向这个handler发起ajax请求,请求参数为新闻id,获取新闻,获取到之后,把新闻的内容设置给ueditor

好了时间不早了,要休息了,大家如果有什么更好的方法,可以在评论去留言,大家一起讨论!如果有什么不妥之处也请大家多多指教!

0.ueditor简介

 1           <!-- 加载编辑器的容器 --> 2                 <div  style="width:1024px;"> 3                     <script  name="article_content" type="text/plain" style="width:1024px;height:400px;"> 4                         在这里输入您的内容...... 5                     </script> 6                 </div> 7                 <!-- 实例化编辑器 --> 8                 <script type="text/javascript"> 9                     var ue = UE.getEditor('article_content',{10                         <!-- 根据个人需要配置,不配置则按默认的 -->11                         maximumWords:50000,12                         enableAutoSave:true,13                         saveInterval:50014                     });15                 </script>   

4.编辑内容时,页面的加载

突然发现好久没写博客了,感觉变懒了,是要让自己养成经常写文章的习惯才行。既可以分享自己的所学,和所想,和大家一起讨论,发现自己的不足的问题。

自定义的UEditorHelper.js文件中使用到了一些方法,并对第一行代码进行了修改,进行 ueditor富文本编辑器的设置

 1 public class Uploader { 2     private HttpServletRequest request = null; 3     private Map<String, Object> conf = null; 4  5     public Uploader(HttpServletRequest request, Map<String, Object> conf) { 6         this.request = request; 7         this.conf = conf; 8     } 9 10     public final State doExec() {11         String filedName = this.conf.get("fieldName");12         State state = null;13         if ("true".equals(this.conf.get("isBase64"))) {14             state = Base64Uploader.save(this.request.getParameter(filedName), this.conf);15         } else {16             state = BinaryUploader.save(this.request, this.conf);17         }18 19         return state;20     }21 }

在net目录下,我们只保留controller.ashx与config.json就可以了,同时把App_Code中的代码拷贝到项目中的App_Code中,同时添加对bin目录下Json.NET程序集的引用,config.json文件定义了一些设置,配置上传文件的一些要求以及上传到服务器保存的路径,在web.config文件中可以看到项目框架应至少为4.0

1     public String exec() {2         String callbackName = this.request.getParameter("callback");3         if (callbackName != null) {4             return !this.validCallbackName(callbackName) ? (new BaseState(false, 401)).toJSONString() : callbackName   "("   this.invoke;";5         } else {6             return this.invoke();7         }8     }

添加zh-cn.js文件是要设置语言,防止自动识别语言错误而导致语言适配错误,UEditorHelper.js文件是一些常用的方法和编辑器设置的封装,查看index.html的源代码,在其中有一段js代码

所以返回的value值是 1,而文件“uploadfile”返回的是4。我们再看到上面的switch 可以知道执行this.configManager.getConfig重新组装了配置信息并将配置信息作为参数实例化Uploader ,并调用该实例 的doExec()方法。

图片 2

2. 总共也就几行代码,发现会调用ActionEnter 类的exec() 方法,我进入该方法:

图片 3

大家可能经常会用到富文本编辑器,今天我要说的是UEditor的使用,这是一个简单易用的开源富文本编辑器。但是对于没有用过的同学而言还是需要稍微了解一下的。

我在我的项目中新建了一个ueditorHelper.js文件,在文件中定义了一些ueditor常用的方法,以及对于ueditor的一些设置

1         <dependency>2             <groupId>com.baidu.ueditor</groupId>3             <artifactId>ueditor</artifactId>4             <version>1.1.2</version>5             <scope>system</scope>6             <systemPath>${project.basedir}/src/main/webapp/WEB-INF/lib/ueditor-1.1.2.jar</systemPath>7         </dependency>

解压后目录下文件如下:

 1     public static final State save(HttpServletRequest request, Map<String, Object> conf) { 2         FileItemStream fileStream = null; 3         boolean isAjaxUpload = request.getHeader("X_Requested_With") != null; 4         if (!ServletFileUpload.isMultipartContent { 5             return new BaseState(false, 5); 6         } else { 7             ServletFileUpload upload = new ServletFileUpload(new DiskFileItemFactory; 8             if (isAjaxUpload) { 9                 upload.setHeaderEncoding("UTF-8");10             }11 12             try {13                 for(FileItemIterator iterator = upload.getItemIterator; iterator.hasNext(); fileStream = null) {14                     fileStream = iterator.next();15                     if (!fileStream.isFormField {16                         break;17                     }18                 }19 20                 if (fileStream == null) {21                     return new BaseState(false, 7);22                 } else {23                     String savePath = conf.get("savePath");24                     String originFileName = fileStream.getName();25                     String suffix = FileType.getSuffixByFilename(originFileName);26                     originFileName = originFileName.substring(0, originFileName.length() - suffix.length;27                     savePath = savePath   suffix;28                     long maxSize = conf.get("maxSize")).longValue();29                     if (!validType(suffix, conf.get("allowFiles"))) {30                         return new BaseState(false, 8);31                     } else {32                         savePath = PathFormat.parse(savePath, originFileName);33                         String physicalPath = conf.get("rootPath")   savePath;34                         InputStream is = fileStream.openStream();35                         State storageState = StorageManager.saveFileByInputStream(is, physicalPath, maxSize);36                         is.close();37                         if (storageState.isSuccess {38                             storageState.putInfo("url", PathFormat.format);39                             storageState.putInfo("type", suffix);40                             storageState.putInfo("original", originFileName   suffix);41                         }42 43                         return storageState;44                     }45                 }46             } catch (FileUploadException var14) {47                 return new BaseState(false, 6);48             } catch (IOException var15) {49                 return new BaseState(false, 4);50             }51         }52     }

图片 4

我们把UEditor拷贝到我们的项目路径下,与你的页面是在同一个目录下就可以了。

图片 5

上面的步骤都完成之后就可以去对应的页面试一下效果如何。如果没有做任何改动的话就是下面的效果:

图片 6

图片 7

3.页面初始化

  "saveRootPath": "/data/", /* 文件和图片上传绝对根路径*/    /* 上传图片配置项 */    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */    "imageFieldName": "upfile", /* 提交的图片表单名称 */    "imageMaxSize": 2048000, /* 上传大小限制,单位B */    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */    "imageCompressEnable": true, /* 是否压缩图片,默认是true */    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */    "imageInsertAlign": "none", /* 插入的图片浮动方式 */    "imageUrlPrefix": "http://xxx", /* 指向saveRootPath的url,用于访问图片或文件*/
  "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",

图片 8图片 9

6.上面都是在分析代码,下面就开始修改了,我们在配置文件“ueditor/jsp/config.json”里添加saveRootPath ,这就是存储图片或文件的绝对根路径,修改imageUrlPrefix 的值,这个链接是要指向 绝对根路径,用于访问图片或文件,大家可以搭一个nginx服务器,或者直接用Tomcat也可以,只要能访问都行。

<script id="editor" type="text/plain"></script>

图片 10

UEditor官方文档地址:

  • dialogs: 弹出对话框对应的资源和JS文件
  • jsp或php或asp或net: 涉及到服务器端操作的后台文件
  • lang: 编辑器国际化显示的文件
  • themes: 样式图片和样式文件
  • third-party: 第三方插件(包括代码高亮,源码编辑等组件)
  • ueditor.all.js: 开发版代码合并的结果,目录下所有文件的打包文件
  • ueditor.all.min.js: ueditor.all.js文件的压缩版,建议在正式部署时采用
  • ueditor.config.js: 编辑器的配置文件,建议和编辑器实例化页面置于同一目录
  • ueditor.parse.js: 编辑的内容显示页面引用,会自动加载表格、列表、代码高亮等样式

UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用。

3. 发现这个方法会调用 该类的 invoke() 方法,我们继续看invoke() 方法:

因为富文本编辑器只是生成的一段html代码,我们需要利用Ajax动态加载内容,相比CKEditor来说,这是比较麻烦的地方,使用CKEditor可以直接使用封装好的服务器端控件,当然也可以不用服务器端控件利用Ajax动态加载内容。

这样 我们就把 原来的相对路径改成了我们想要的绝对路径了,大家可以尝试一下。

图片 11

在页面需要展示富文本编辑器的位置这样引入:

index.html 是一个示例文件、可以删去,ueditor.config.js中是一些富文本编辑器的设置,建议不要改动,可以在页面中引用的时候设置,如果所有页面都需要设置可以写在一个js文件中,dialogs是在文本框中点击按钮时用到的一些弹出框效果,lang文件夹下是语言相关的设置,目前只有中文与英文,themes文件夹下是一些样式,third-party文件夹下是一些第三方的插件,有代码高亮,截屏等

 1 public final class ActionMap { 2     public static final Map<String, Integer> mapping = new HashMap<String, Integer>() { 3         { 4             this.put("config", Integer.valueOf; 5             this.put("uploadimage", Integer.valueOf; 6             this.put("uploadscrawl", Integer.valueOf; 7             this.put("uploadvideo", Integer.valueOf; 8             this.put("uploadfile", Integer.valueOf; 9             this.put("catchimage", Integer.valueOf;10             this.put("listfile", Integer.valueOf;11             this.put("listimage", Integer.valueOf;12         }13     };14     public static final int CONFIG = 0;15     public static final int UPLOAD_IMAGE = 1;16     public static final int UPLOAD_SCRAWL = 2;17     public static final int UPLOAD_VIDEO = 3;18     public static final int UPLOAD_FILE = 4;19     public static final int CATCH_IMAGE = 5;20     public static final int LIST_FILE = 6;21     public static final int LIST_IMAGE = 7;22 23     public ActionMap() {24     }25 26     public static int getType(String key) {27         return mapping.get.intValue();28     }29 }

UEditorHelper

首先介绍一下它的目录层级:

ASP.NET中UEditor使用

4.我进入到Uploader 类,上一步最后就是调用第10行的方法,因为配置里 不是base64 所以执行else里的内容,调用BinaryUploader 的save方法

在需要添加富文本编辑器的地方加入以下代码:

7. 我们在 第 3 步 的invoke() 方法 中调用的this.configManager.getConfig(actionCode); 方法里 组装绝对根路径。就是在返回conf之前添加 下面代码中的红色内容。

将从官网上下载的开发包解压后包含到项目中

1 //                      String physicalPath = conf.get("rootPath")   savePath;2                         String physicalPath = conf.get("saveRootPath")   savePath;

UEditor官网:

所以为了避免这样的情况发生,我们接下来稍微修改一下UEditor的代码。可能步骤有点多,但是耐心地跟着我的步骤一步步去理解,应该可以很快就知道怎么修改。

 1 //实例化编辑器 2 //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor就能拿到相关的实例 3 var ue = UE.getEditor('editor',{autoHeightEnabled: false}); 4 function isFocus { 5     alert(UE.getEditor('editor').isFocus; 6     UE.dom.domUtils.preventDefault 7 } 8 function setblur { 9     UE.getEditor('editor').blur();10     UE.dom.domUtils.preventDefault11 }12 function insertHtml() {13     var value = prompt('插入html代码', '');14     UE.getEditor.execCommand('insertHtml', value)15 }16 function createEditor() {17     UE.getEditor('editor');18 }19 function getAllHtml() {20     return UE.getEditor('editor').getAllHtml();21 }22 function getContent() {23     return UE.getEditor('editor').getContent();24 }25 function getPlainTxt() {26     return UE.getEditor('editor').getPlainTxt();27 }28 function setContent(isAppendTo) {29     UE.getEditor.setContent('', isAppendTo);   30 }31 function getText() {32     //当你点击按钮时编辑区域已经失去了焦点,如果直接用getText将不会得到内容,所以要在选回来,然后取得内容33     var range = UE.getEditor('editor').selection.getRange();34     range.select();35     return UE.getEditor('editor').selection.getText();36 }37 function getContentTxt() {38     return UE.getEditor('editor').getContentTxt();39 }40 function hasContent() {41     return UE.getEditor('editor').hasContents();42 }43 function setFocus() {44     UE.getEditor('editor').focus();45 }46 function deleteEditor() {47     UE.getEditor('editor').destroy();48 }49 function getLocalData() {50     alert(UE.getEditor.execCommand("getlocaldata"));51 }52 function clearLocalData() {53     UE.getEditor.execCommand("clearlocaldata");54     alert("已清空草稿箱")55 }

图片 12

图片 13

1. 上传图片或文件时最开始会进入“ueditor/jsp/controller.jsp”,我们查看其代码:

除此之外我们还要引入UEditor所需要的jar包 在 UEditor目录下的 jsp/lib 下有,如果你有引入这些包的话,则无需引入。

5. 我们继续进入到BinaryUploader 的save方法 ,我们看到下面的代码的第33行,会去设定 “physicalPath” 的值,并作为参数 调用 方法:StorageManager.saveFileByInputStream 进行保存,而“physicalPath” 值是由 配置信息 参数 config 获取。所以我们需要通过修改配置 来 修改这个值就行了。**

1         conf.put("savePath", savePath);2         conf.put("rootPath", this.rootPath);3         conf.put("saveRootPath",this.jsonConfig.getString("saveRootPath"));4         return conf;

但是当你重新部署项目之后会发现,怎么之前上传的文件和图片下载不了也看不到了呢。这就是因为UEditor原生上传文件和图片的方式是上传到项目路径下,那重新部署项目,那不就把原来上传的文件和图片覆盖了咯。

在需要用到UEditor的页面引入下面的文件即可,根据自己的实际路径引入:

8. 最后我们把 第5步 里的 save 方法里的physicalPath 值修改一下 ,注释原来的内容,新增下面代码的红色内容。

通过查看源码,下面我们一步步来追踪:

以上就完成了最简单的UEditor富文本编辑器引入方式,可以体验一下上传图片和文件,都可以正常上传。

    <script type="text/javascript" charset="utf-8" src="../../ueditor/ueditor.config.js"></script>    <script type="text/javascript" charset="utf-8" src="../../ueditor/ueditor.all.min.js"></script>    <script type="text/javascript" src="../../ueditor/lang/zh-cn/zh-cn.js"></script>  
 1     public String invoke() { 2         if (this.actionType != null && ActionMap.mapping.containsKey(this.actionType)) { 3             if (this.configManager != null && this.configManager.valid { 4                 State state = null; 5                 int actionCode = ActionMap.getType(this.actionType); 6                 Map<String, Object> conf = null; 7                 switch(actionCode) { 8                 case 0: 9                     return this.configManager.getAllConfig().toString();10                 case 1:11                 case 2:12                 case 3:13                 case 4:14                     conf = this.configManager.getConfig(actionCode);15                     state = (new Uploader(this.request, conf)).doExec();16                     break;17                 case 5:18                     conf = this.configManager.getConfig(actionCode);19                     String[] list = this.request.getParameterValuesconf.get("fieldName"));20                     state = (new ImageHunter.capture;21                     break;22                 case 6:23                 case 7:24                     conf = this.configManager.getConfig(actionCode);25                     int start = this.getStartIndex();26                     state = (new FileManager.listFile;27                 }28 29                 return state.toJSONString();30             } else {31                 return (new BaseState(false, 102)).toJSONString();32             }33         } else {34             return (new BaseState(false, 101)).toJSONString();35         }36     }

在上面的这个方法中我们发现,在第7行代码中有一个switch,根据 “actionCode” 的值的不同做一些不同的事情,我们看一下这个值从哪里来的,发现这个值是 通过调用这 个 方法 而得到 “ActionMap.getType(this.actionType)”,我们进去getType方法会发现 只是返回一个map的velue值,这个value值就是上的mapping 里的值,我们通过第1步的配置文件可以知道上传图片的是“uploadimage”

大家可以通过

本文由时时app平台注册网站发布于web前端,转载请注明出处:JavaScript 富文本编辑器

关键词: