百度Ueditor配置步骤

合集下载

百度ueditor富文本编辑器实现上传文件、图片、视频到ftp服务器并在页面端回显

百度ueditor富⽂本编辑器实现上传⽂件、图⽚、视频到ftp服务器并在页⾯端回显之前⼀直⽤ueditor作为富⽂本编辑器，想要实现图⽚上传到ftp的功能，⽹上搜索了⼀圈，发现都感觉讲的不是很明⽩，⽽且有不少要引⼊其他的java代码，最近⾃⼰试了⼀下，终于调通了，希望能帮到各位。

废话不多说，查看步骤。

（注意，这个是springboot版本，其实springmvc的也差不多，有⼀点点不同，最后我会说明）1.将utf8-jsp的整个⽂件夹复制到resources的static⽬录下，打开之后⽬录如下。

项⽬⽬录如下（我多加了⼀层ueditor⽬录，不过也⼀样）2.写两个controller，代码如下（请忽略楼主潦草的代码，⾃⼰拿回去调整⼀下，修改⼀下UploadController中ftp的地址，密码即可，总共有三个地⽅）1.UploadControllerpackage com.wang.controller;import lombok.extern.slf4j.Slf4j;import mons.fileupload.FileItem;import mons.fileupload.disk.DiskFileItemFactory;import mons.fileupload.servlet.ServletFileUpload;import .ftp.FTP;import .ftp.FTPClient;import .ftp.FTPConnectionClosedException;import .ftp.FTPReply;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import javax.imageio.ImageIO;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.awt.image.BufferedImage;import java.io.*;import .URLEncoder;import java.text.SimpleDateFormat;import java.util.*;@RequestMapping("/ueditor/file")@Controller@Slf4jpublic class UploadController {private FTPClient ftpClient = new FTPClient();private Logger logger = LoggerFactory.getLogger(UploadController.class);//上传图⽚并回显@RequestMapping("/uploadImg")@ResponseBodypublic Map<String,Object> upload(HttpServletRequest request) throws Exception {Map<String ,Object> map = new HashMap<>();// 判断enctype属性是否为multipart/form-databoolean isMultipart = ServletFileUpload.isMultipartContent(request);if (!isMultipart)throw new IllegalArgumentException("上传内容不是有效的multipart/form-data类型.");// Create a factory for disk-based file itemsDiskFileItemFactory factory = new DiskFileItemFactory();// Create a new file upload handlerServletFileUpload upload = new ServletFileUpload(factory);FileItem item = (FileItem) iter.next();// 如果是⽂件字段String fieldName = item.getFieldName();String orginFileName = item.getName();String imgSunffix = orginFileName.substring(stIndexOf(".")); String uuid = UUID.randomUUID().toString().replaceAll("-", "");String fileName = uuid+imgSunffix;// String contentType = item.getContentType();// boolean isInMemory = item.isInMemory();// long sizeInBytes = item.getSize();// String filePath = STORE_FILE_DIR + fileName;//写⼊⽂件到当前服务器磁盘// File uploadedFile = new File(filePath);SimpleDateFormat formatPath = new SimpleDateFormat("yyMMdd");SimpleDateFormat fromahhPath = new SimpleDateFormat("HH");String yyMMdd = formatPath.format(new Date());String hours = fromahhPath.format(new Date());String ftpfilePath = yyMMdd + "/" + hours;// FileInputStream fileInputStream = (FileInputStream) item.getInputStream(); InputStream inputStream = item.getInputStream();BufferedInputStream bufferedInputStream = null;bufferedInputStream = new BufferedInputStream(inputStream);FTPClient ftp = new FTPClient();try {int reply;ftp.connect("11111", 21);// 连接FTP服务器// 如果采⽤默认端⼝，可以使⽤ftp.connect(url)的⽅式直接连接FTP服务器 ftp.login("11111", "11111");// 登录ftp.setFileType(FTP.BINARY_FILE_TYPE);ftp.setFileTransferMode(FTP.STREAM_TRANSFER_MODE);reply = ftp.getReplyCode();if(!FTPReply.isPositiveCompletion(reply)){ftp.disconnect();throw new IOException("ftp登录失败");}for (String str:ftpfilePath.split("/")){ftp.makeDirectory(str);ftp.changeWorkingDirectory(str);}boolean tag = ftp.appendFile(fileName,bufferedInputStream);if(!tag){throw new Exception("保存到FTP失败");}}catch (Exception e){e.printStackTrace();}finally {try {inputStream.close();ftp.logout();} catch (IOException e) {e.printStackTrace();}if(ftp.isConnected()){try {ftp.disconnect();}catch (IOException e){e.printStackTrace();}}}String path = "/"+ftpfilePath+"/"+fileName;// item.write(uploadedFile);map.put("state","SUCCESS");map.put("url",path);map.put("title",orginFileName);map.put("original",orginFileName);}// response.setCharacterEncoding("UTF-8");// response.getWriter().println("上传成功");return map;}//回显图⽚// imgPath = "ftpfile\\upload\\11.png";OutputStream os = null;ftp = new FTPClient();ftp.setConnectTimeout(1000 * 30);//设置连接超时时间ftp.setControlEncoding("utf-8");//设置ftp字符集ftp.enterLocalPassiveMode();//设置被动模式，⽂件传输端⼝设置try {int reply;ftp.connect("11111", 21);// 连接FTP服务器// 如果采⽤默认端⼝，可以使⽤ftp.connect(url)的⽅式直接连接FTP服务器ftp.login("11111", "11111");// 登录ftp.setFileType(FTP.BINARY_FILE_TYPE);ftp.setFileTransferMode(FTP.STREAM_TRANSFER_MODE);reply = ftp.getReplyCode();if (!FTPReply.isPositiveCompletion(reply)) {ftp.disconnect();throw new IOException("FTP登录失败");}//下载⽂件 FTP协议⾥⾯，规定⽂件名编码为iso-8859-1，所以读取时要将⽂件名转码为iso-8859-1//如果没有设置按照UTF-8读，获取的流是空值nullin = ftp.retrieveFileStream(new String(imgPath.getBytes("UTF-8"), "iso-8859-1"));String picType = imgPath.split("\\.")[1];BufferedImage bufImg = null;bufImg = ImageIO.read(in);os = response.getOutputStream();ImageIO.write(bufImg, picType, os);} catch (IOException e) {e.printStackTrace();} finally {try {in.close();// 在这⾥关闭，保证⼀定要关闭ftp.logout();// 在这⾥登出，保证⼀定要登出} catch (IOException e) {e.printStackTrace();}if (ftp.isConnected()) {try {ftp.disconnect();} catch (IOException ioe) {}}}response.setContentType("image/jpg");}/*** 下载⽂件到浏览器* @param response* @throws IOException*/@RequestMapping("/downloadFile.do")@ResponseBodypublic void downFile(@RequestParam("path")String path, HttpServletResponse response) throws IOException {// 获取ftp信息// 获取⽂件名称String[] strs = path.split("/");String downloadFile = strs[strs.length - 1];try {// 设置⽂件ContentType类型，这样设置，会⾃动判断下载⽂件类型response.setContentType("application/x-msdownload");// 设置⽂件头：最后⼀个参数是设置下载的⽂件名并编码为UTF-8response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(downloadFile, "UTF-8")); // 建⽴连接connectToServer();ftpClient.enterLocalPassiveMode();// 设置传输⼆进制⽂件int reply = ftpClient.getReplyCode();// ftpClient.changeWorkingDirectory("./home/ftp");if(!FTPReply.isPositiveCompletion(reply)) {ftpClient.disconnect();throw new IOException("failed to connect to the FTP Server:"+21);}// 此句代码适⽤Linux的FTP服务器String newPath = new String(path.getBytes("GBK"),"ISO-8859-1");bis = new BufferedInputStream(is);OutputStream out = response.getOutputStream();byte[] buf = new byte[1024];int len = 0;while ((len = bis.read(buf)) > 0) {out.write(buf, 0, len);}out.flush();} catch (Exception e) {e.printStackTrace();} finally {closeConnect();if (bis != null) {try {bis.close();} catch (IOException e) {e.printStackTrace();}}if (is != null) {try {is.close();} catch (IOException e) {e.printStackTrace();}}}} catch (FTPConnectionClosedException e) {logger.error("ftp连接被关闭！", e);throw e;} catch (Exception e) {logger.error("ERR : upload file "+ downloadFile+ " from ftp : failed!", e);}}/*** 连接到ftp服务器*/private void connectToServer() throws Exception {// ftpClient.connect(server,21);if (!ftpClient.isConnected()) {int reply;try {ftpClient=new FTPClient();ftpClient.connect("111111", 21);// 连接FTP服务器// 如果采⽤默认端⼝，可以使⽤ftp.connect(url)的⽅式直接连接FTP服务器ftpClient.login("111111", "111111");// 登录reply = ftpClient.getReplyCode();if (!FTPReply.isPositiveCompletion(reply)) {ftpClient.disconnect();("connectToServer FTP server refused connection.");}}catch(FTPConnectionClosedException ex){logger.error("服务器:IP："+21+"没有连接数！there are too many connected users,please try later", ex); throw ex;}catch (Exception e) {logger.error("登录ftp服务器【"+21+"】失败", e);throw e;}}}/**** 功能：关闭连接*/public void closeConnect() {try {if (ftpClient != null) {ftpClient.logout();ftpClient.disconnect();}} catch (Exception e) {logger.error("ftp连接关闭失败！", e);} 2.ServerControllerpackage com.wang.controller;import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.JSONObject;import com.baidu.ueditor.ActionEnter;import org.springframework.core.io.ClassPathResource;import org.springframework.stereotype.Controller;import org.springframework.util.ClassUtils;import org.springframework.web.bind.annotation.RequestMapping;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.FileInputStream;import java.io.IOException;import java.io.InputStream;import java.io.PrintWriter;//ueditor单独上传的controller@Controllerpublic class ServerController {@RequestMapping("/configNew")public void config(HttpServletRequest request, HttpServletResponse response){response.setContentType("application/json");// String res = ClassUtils.getDefaultClassLoader().getResource("km").getPath();// System.out.println("res:"+res);System.out.println("路径："+ClassUtils.getDefaultClassLoader().getResource("").getPath());// String rootPath = ClassUtils.getDefaultClassLoader().getResource("../../").getPath() + "static/ueditor/jsp"; String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static/ueditor/jsp";System.out.println("root路径："+rootPath);try {response.setCharacterEncoding("UTF-8");String exec = new ActionEnter(request, rootPath).exec();System.out.println(exec);PrintWriter writer = response.getWriter();writer.write(new ActionEnter(request, rootPath).exec());writer.flush();writer.close();} catch (IOException e) {e.printStackTrace();}}// public void getUEConfig(HttpServletRequest request, HttpServletResponse response){// org.springframework.core.io.Resource res = new ClassPathResource("config.json");// InputStream is = null;// response.setHeader("Content-Type" , "text/html");// try {// is = new FileInputStream(res.getFile());// StringBuffer sb = new StringBuffer();// byte[] b = new byte[1024];// int length=0;// while(-1!=(length=is.read(b))){// sb.append(new String(b,0,length,"utf-8"));// }// String result = sb.toString().replaceAll("/\\*(.|[\\r\\n])*?\\*/","");// JSONObject json = JSON.parseObject(result);// PrintWriter out = response.getWriter();// out.print(json.toString());// } catch (IOException e) {// e.printStackTrace();// }finally {// try {// is.close();// } catch (IOException e) {// e.printStackTrace();// }// }// }}　3.修改ueditor.config.jsvar URL = window.UEDITOR_HOME_URL || getUEBasePath();var server_url = window.location.protocol+"//"+window.location.hostname+":"+window.location.port;/*** 配置项主体。

React中使用UEditor百度富文本的方法

React中使⽤UEditor百度富⽂本的⽅法前⾔本⽂将介绍笔者在React的项⽬中使⽤百度的富⽂本编辑器Ueditor的过程。

注意本⽂不提供⼀条龙式的使⽤⽅法，只是将使⽤过程中的⼀些实现思路进⾏总结，供以参考。

react项⽬中导⼊ueditor，会存在各种不正交的问题，需要注意。

引⼊⾸先在ueditor官⽹下载最新安装包，然后在项⽬⼊⼝的html中导⼊（导⼊⽅式不⼀，可以采⽤import的⽅式，需要⾃⾏度娘。

但是⽆论哪种引⼊⽅式，只要想⾃定义功能，不正交问题就难以避免QAQ）。

不管三七⼆⼗⼀先跑起来再说。

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>ueditor demo</title></head><body><script type="text/javascript" src="path/ueditor.config.js"></script><script type="text/javascript" src="path/ueditor.all.js"></script>······</body></html>在React项⽬中使⽤ueditor要注意1. 导⼊的路径，笔者使⽤的是项⽬经webpack打包之后的相对路径。

2. 导⼊顺序，配置⽂件要先于源码。

3. 笔者这种引⼊⽅式存在缓存问题，所以修改ueditor.all.js后需要及时清理缓存，测试新的代码。

ueditor 用法

ueditor 用法UEditor是一个基于JavaScript的所见即所得的富文本编辑器，可以方便地集成到网页中。

以下是UEditor的用法：1. 引入UEditor的文件：在网页中引入UEditor的核心文件和配置文件。

html<script type="text/javascript" src="ueditor.config.js"></script><script type="text/javascript" src="ueditor.all.min.js"></script>2. 创建一个用于显示编辑器的div元素：html<div id="editor"></div>3. 初始化UEditor实例：javascriptvar ue = UE.getEditor('editor');这将创建一个UEditor实例，并将其绑定到id为"editor"的div元素上。

4. 获取编辑器内容：javascriptvar content = ue.getContent();使用`getContent()`方法可以获取编辑器中的HTML内容。

5. 设置编辑器内容：javascriptue.setContent('这是新的内容');使用`setContent()`方法可以设置编辑器的内容为指定的HTML。

除了上述基本用法外，UEditor还支持各种自定义配置和方法，如设置工具栏、上传图片、自定义菜单等。

详细使用方法和配置可以参考UEditor的官方文档。

ueditor1.4.3jsp utf-8版配置使用教程

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

2.下载首页地址：/website/index.html，点击下载，可以根据需要下载php、aps、jsp、.net版本。

由于1.4版本和1.3版本内容变更较大，本例中使用了最新版本1.4.3.1 jsp utf-8 版本进行测试。

3.配置下载ueditor后，放入系统的js库中，由于本例的相同功能的ewebeitor 放在webroot下，本例中也直接放入的webroot下，结构图如下：首先配置通用配置的控制器路径，文件名为：ueditor.config.js。

此文件配置需要对应下载的版本，即jsp版对应修改：serverUrl: URL + "jsp/controller.jsp"修改了通用配置后，还需要修改对应的上传文件、图片等路径，我们需要根据我们配置的版本去设置对应目录的内容，jsp版本如下：实际配置如下图：下面还有对应图片、视频的配置，与图片配置类似。

4.问题4.1jar问题需要的jar都已在ueditor中包含，直接拷贝至项目的lib中并加入classpath中即可。

1.4.3版本需要commons-io-2.4.jar支持。

所以在buildpath中需要将该包放置靠前。

4.2拦截器问题对于使用了Struts2或配置了其他拦截器的，需要将该请求放行如Struts2一般配置为：对于此类会拦截jsp的请求的配置，可以根据项目需要，1.改为*.action,*.do之类的请求匹配2.加入自己的拦截器，如本例所配置的com.linewell.core.filter.ExtendStrutsPrepareFilter中，不解的可以参照：/krysml/article/details/90065335.示例本例中上述配置好之后，可以实现图片编辑等内容页面代码示例如下：6.自定义：对于需要更多特性的定义，可以参照ueditor官网需要将图片插入数据库的，可以将ueditor-1.1.2.jar进行反编译，修改对于需要完全自定义的，可以直接抛弃ueditor-1.1.2.jar的引用，直接使用自定义的方法进行功能设定，返回对应的json数据即可。

ueditor百度编辑器的赋值方法

ueditor百度编辑器的赋值⽅法⽰例： /website/onlinedemo.html引⽤代码： window.UMEDITOR_HOME_URL = $CONFIG['domain'] + "/res/local/js/ueditor/"; //注意就是这⾥！window.UEDITOR_CONFIG.imageUrl = $CONFIG['domain'] + '/goodspic?type=2';window.UEDITOR_CONFIG.savePath= ['upload'];window.UEDITOR_CONFIG.imagePath = $CONFIG['domain'] + '/res/local/uploads/';UE.getEditor('addArea')UE.getEditor('areaBottom')⽰例代码var domUtils = UE.dom.domUtils;var ServerUrl = '/server/ueditor/';var options = {//图⽚上传配置区serverUrl:ServerUrl+"controller.php",imageUrl:ServerUrl+"imageUp.php" //图⽚上传提交地址,imagePath:ServerUrl //图⽚修正地址，引⽤了fixedImagePath,如有特殊需求，可⾃⾏配置//涂鸦图⽚配置区,scrawlUrl:ServerUrl+"scrawlUp.php" //涂鸦上传地址,scrawlPath:ServerUrl+"" //图⽚修正地址，同imagePath//附件上传配置区,fileUrl:ServerUrl+"fileUp.php" //附件上传提交地址,filePath:ServerUrl //附件修正地址，同imagePath,catchRemoteImageEnable: false// ,catcherUrl:ServerUrl +"getRemoteImage.php" //处理远程图⽚抓取的地址// ,catcherPath:ServerUrl //图⽚修正地址，同imagePath,imageManagerUrl:ServerUrl + "imageManager.php" //图⽚在线管理的处理地址,imageManagerPath:ServerUrl //图⽚修正地址，同imagePath,snapscreenHost: location.hostname //屏幕截图的server端⽂件所在的⽹站地址或者ip，请不要加http://,snapscreenServerUrl: ServerUrl +"imageUp.php" //屏幕截图的server端保存程序，UEditor的范例代码为“ServerUrl +"server/upload/snapImgUp.php"” ,snapscreenPath: ServerUrl,snapscreenServerPort: location.port //屏幕截图的server端端⼝,wordImageUrl:ServerUrl + "imageUp.php" //word转存提交地址,wordImagePath:ServerUrl //,getMovieUrl:ServerUrl+"getMovie.php" //视频数据获取地址,videoUrl:ServerUrl+"fileUp.php" //附件上传提交地址,videoPath:ServerUrl, //附件修正地址，同imagePathlang:/^zh/.test(nguage || navigator.browserLanguage || erLanguage) ? 'zh-cn' : 'en',langPath:UEDITOR_HOME_URL + "lang/",disabledTableInTable: false,webAppKey:"9HrmGf2ul4mlyK8ktO2Ziayd",initialFrameWidth:860,initialFrameHeight:400,focus:true,shortcutMenu:["fontfamily", "fontsize", "bold", "italic", "underline", "forecolor", "backcolor", "insertorderedlist", "insertunorderedlist"]};function setLanguage(obj) {var value = obj.value,opt = {lang:value};UE.utils.extend(opt, options, true);UE.delEditor("editor");//清空语⾔if (!UE._bak_I18N) {UE._bak_I18N = UE.I18N;}UE.I18N = {};UE.I18N[ng] = UE._bak_I18N[ ng ];UE.getEditor('editor', opt);}function isFocus(e){alert(UE.getEditor('editor').isFocus());UE.dom.domUtils.preventDefault(e)}function setblur(e){UE.getEditor('editor').blur();UE.dom.domUtils.preventDefault(e)}function insertHtml() {var value = prompt('插⼊html代码', '');UE.getEditor('editor').execCommand('insertHtml', value)}function createEditor() {enableBtn();UE.getEditor('editor', {initialFrameWidth:"100%"})}function getAllHtml() {alert(UE.getEditor('editor').getAllHtml())}function getContent() {var arr = [];arr.push("使⽤editor.getContent()⽅法可以获得编辑器的内容");arr.push("内容为：");arr.push(UE.getEditor('editor').getContent());alert(arr.join("\n"));}function getPlainTxt() {var arr = [];arr.push("使⽤editor.getPlainTxt()⽅法可以获得编辑器的带格式的纯⽂本内容");arr.push("内容为：");arr.push(UE.getEditor('editor').getPlainTxt());alert(arr.join('\n'))}function setContent(isAppendTo) {var arr = [];arr.push("使⽤editor.setContent('欢迎使⽤ueditor')⽅法可以设置编辑器的内容");UE.getEditor('editor').setContent('欢迎使⽤ueditor', isAppendTo);alert(arr.join("\n"));}function setDisabled() {UE.getEditor('editor').setDisabled('fullscreen');disableBtn("enable");}function setEnabled() {UE.getEditor('editor').setEnabled();enableBtn();}function getText() {//当你点击按钮时编辑区域已经失去了焦点，如果直接⽤getText将不会得到内容，所以要在选回来，然后取得内容 var range = UE.getEditor('editor').selection.getRange();range.select();var txt = UE.getEditor('editor').selection.getText();alert(txt)}function getContentTxt() {var arr = [];arr.push("使⽤editor.getContentTxt()⽅法可以获得编辑器的纯⽂本内容");arr.push("编辑器的纯⽂本内容为：");arr.push(UE.getEditor('editor').getContentTxt());alert(arr.join("\n"));}function hasContent() {var arr = [];arr.push("使⽤editor.hasContents()⽅法判断编辑器⾥是否有内容");arr.push("判断结果为：");arr.push(UE.getEditor('editor').hasContents());alert(arr.join("\n"));}function setFocus() {UE.getEditor('editor').focus();}function deleteEditor() {disableBtn();UE.getEditor('editor').destroy();}function disableBtn(str) {var div = document.getElementById('btns');var btns = domUtils.getElementsByTagName(div, "button");for (var i = 0, btn; btn = btns[i++];) {if (btn.id == str) {domUtils.removeAttributes(btn, ["disabled"]);} else {btn.setAttribute("disabled", "true");}}}function enableBtn() {var div = document.getElementById('btns');var btns = domUtils.getElementsByTagName(div, "button"); for (var i = 0, btn; btn = btns[i++];) {domUtils.removeAttributes(btn, ["disabled"]);}}function getLocalData () {alert(UE.getEditor('editor').execCommand( "getlocaldata" )); }function clearLocalData () {UE.getEditor('editor').execCommand( "clearlocaldata" );alert("已清空草稿箱")}window.onkeydown = function (e){if (!ue.isFocus()) {var keyCode = e.keyCode || e.which;if (keyCode == 8) {e.preventDefault();}}};。

如何将UEditor部署到PHP程序上

UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。

开源基于BSD协议，所有源代码在协议允许范围内可自由修改和使用。

最近在开发程序的时候需要集成一个富文本编辑器，UEditor的UI及UE比CKEditor、KindEditor要好出不少。

所以简单地对UEditor研究了一下，记录于此。

一、下载UEditor编辑器UEditor官方网站：/在下载频道可以下载到最新版本的UEditorUEditor的下载方式分为两种，完整下载与定制下载，完整下载提供UTF-8与GBK两种编码的版本，定制下载目前只有UTF-8编码，推荐使用定制下载，按需求定制，如果程序不是UTF-8编码，可以使用EditPlus等工具将压缩包里所有的HTML及JS文件转码，记得同时修改HTML文件中的charset=utf-8。

二、精简UEditor编辑器完整版的相关文档与示例页面较多，可以自行研究一下，下面为定制版中可以精简的文件。

index.html是所定制的UEditor编辑器的示例文件，删除之。

editor.js与editor.min.js内容相同，editor.min.js是editor.js的压缩版，使用时加载editor.min.js 即可，所以editor.js也可以删除。

三、将UEditor部署到PHP程序上1.将UEditor的所有文件放在PHP程序的目录中，这里我把文件放在/ueditor目录下。

2.在网页中引入UEditor文件<script type="text/javascript" src="ueditor/editor_config.js"></script><script type="text/javascript" src="ueditor/editor.min.js"></script>3.在textarea标签下初始化UEditor<script type="text/javascript">var editor = new UE.ui.Editor();textarea:'name'; //与textarea的name值保持一致editor.render('name');</script>四、配置UEditor编辑器editor_config.js是UEditor的配置文件，首先对路径进行配置。

跟我学百度UEditor在线文本编辑器及应用实例——在J2EE Web应用系统中如何配置UEditor在线文本编辑器

1.1跟我学百度UEditor在线文本编辑器及应用实例——在J2EE Web应用系统中如何配置UEditor在线文本编辑器1.1.1UEditor在线文本编辑器的浏览器前端配置相关的属性选项1、修改UEditor在线文本编辑器配置的两种方式（1）第一种方法是通过重新定义ueditor.config.js配置文件中的如下的属性选项window.UEDITOR_HOME_URL的值在引用editor_config.js文件之前，在JavaScript程序代码中需要重新设置ueditor.config.js 配置文件中的window.UEDITOR_HOME_URL变量的值为“编辑器资源文件根路径”，如下为代码示例：<script type="text/javascript">window.UEDITOR_HOME_URL = "./baiduUEditor/";</script>一般都采用网站根目录的相对路径，也就是以斜杠开头的形如"/myProject/ueditor/"这样的路径。

（2）第二种方法是在对UEditor在线文本编辑器进行对象实例化的时传入相关的属性选项的配置参数，如下为代码示例：var ue = UE.getEditor('ueditorTextAreaID', {toolbars: [['fullscreen', 'source', 'undo', 'redo', 'bold']],autoHeightEnabled: true,autoFloatEnabled: true});2、在引用UEditor在线文本编辑器的页面中重新定义window.UEDITOR_HOME_URL （1）采用相对目录路径的示例<script type="text/javascript">window.UEDITOR_HOME_URL = "./baiduUEditor/";</script><script type="text/javascript" src="./baiduUEditor/ueditor.config.js"></script><script type="text/javascript" src="./baiduUEditor/ueditor.all.min.js"></script><script type="text/javascript" charset="utf-8"src="./baiduUEditor/lang/zh-cn/zh-cn.js"></script> 注意UEDITOR_HOME_URL、config、all这三个顺序不能改变。

ueditor使用方法

ueditor使用方法一、概述ueditor是一个基于JavaScript的富文本编辑器，可以用于网页中的文本编辑、内容排版等功能。

本文将介绍ueditor的使用方法，包括安装、配置和常用功能的操作。

二、安装1. 下载ueditor的压缩包，解压到项目的静态资源目录下。

2. 在HTML页面中引入ueditor的核心文件和配置文件，如：```<script type="text/javascript" src="ueditor/ueditor.config.js"></script><script type="text/javascript" src="ueditor/ueditor.all.min.js"></script>```3. 创建一个textarea元素，用于ueditor的实例化：```<textarea id="editor" name="content" style="width:100%;height:300px;"></textarea>```4. 在JavaScript中实例化ueditor编辑器：```var editor = UE.getEditor('editor');```三、配置1. ueditor的配置可以通过修改ueditor.config.js文件来实现。

2. 可以根据实际需求，调整编辑器的工具栏按钮、菜单项、字体、颜色等样式。

3. 配置文件中还可以设置上传图片、视频等媒体文件的服务器地址和路径。

4. 可以通过配置文件中的事件监听函数，实现自定义的操作和处理逻辑。

四、常用功能1. 文本编辑：ueditor提供了常见的文本编辑功能，如加粗、斜体、下划线、删除线等。

百度UEditor编辑器!合入PHP网站!

一、富文本内容交互1、编辑器内容初始化（即往编辑器中设置富文本）场景一：写新文章，编辑器中预置提示、问候等内容。

在editor_config.js文件中找到initialContent参数，设置其值为需要的提示或者问候语即可，如initialContent:’欢迎使用UEditor!’。

场景二：编辑旧文章，从数据库中取出富文本放置到编辑器中。

显然，编辑文章时需要从后台数据库中取出大段富文本，如果仍然采用场景一中的方式去设置初始值的话，必然会带来诸如引号匹配被截断等问题，因此需要采用另外一种方式去设置，此处采用了script标签作为编辑器容器对象，并设置了其类型是纯文本，从而在避免了标签内部JS代码执行的同时解决了部分同学在使用传统的textarea标签作为容器所带来的一次额外转码问题。

2、提交编辑器内容至后端场景一：在编辑器所在的Form中存在提交按钮，提交动作由点击此按钮完成。

该场景适用于最普通的场合，没有太大问题需要注意，仅三点说明：1) 默认情况下提交到后台的表单名称是“editorValue”，在editor_config.js中可以配置，参数名为textarea。

2) 可以在容器标签（即script标签）上设置name属性，以覆盖editor_config.js中的场景二：编辑器所在的Form中不存在提交按钮，提交动作由外部事件触发。

该场景适用于站点前端交互较多的场合，需要注意的事项主要是在触发form提交动作之前如果使用的是jquery validation可以参考如下代码此处editor是编辑器实例对象。

场景三：编辑器不在任何Form中，提交动作由外部事件触发。

该场景使用不多，但特殊时候可能需要。

UEditor也提供了对应的处理方案，基本逻辑跟场景二一样，只是在执行同步操作的时候需要传入提交form的id，如editor.sync(myFormID)即可。

其他同场景二。

二、图片上传交互1、传统图片上传传统图片上传涉及到的前后端交互主要涉及“上传提交路径”以及“图片保存路径”两个参数，后台保存路径以任何形式（绝对或者相对）、在任何页面展示跟前台无关。

ueditor使用指南

ueditor使用指南
UEditor是一个基于JavaScript的所见即所得富文本web编辑器，它具有丰富的功能和灵活的定制选项，可以满足各种网页编辑
需求。

下面我将从安装、基本功能、高级功能和定制化等多个角度
来向你介绍UEditor的使用指南。

首先，安装UEditor非常简单。

你只需要下载UEditor的源文件，然后在你的网页中引入UEditor的js和css文件即可开始使用。

UEditor还提供了丰富的配置选项，你可以根据自己的需求进行定
制化配置。

UEditor的基本功能包括文字编辑、插入图片、插入链接、插
入表格、插入视频等，这些功能都可以通过简单的操作实现。

除此
之外，UEditor还支持撤销、重做、全屏编辑、源码编辑等常见的
编辑器功能。

在高级功能方面，UEditor提供了丰富的API接口，可以让开
发者根据自己的需求进行扩展和定制。

比如，你可以通过API来实
现自定义的插入功能、自定义的编辑器菜单等。

此外，UEditor还
支持图片上传、文件上传等功能，开发者可以通过配置后端接口实
现图片和文件的上传功能。

最后，UEditor还支持丰富的定制化选项，你可以通过配置文
件来定制编辑器的工具栏、菜单、插件等，以及编辑器的样式和皮肤。

这样可以让UEditor更好地融入到你的网站中，满足你的个性
化需求。

总的来说，UEditor是一个功能丰富、灵活定制的web编辑器，通过本指南的介绍，你可以更好地了解UEditor的基本使用方法和
高级功能，希望对你有所帮助。

百度编辑器Ueditor增加字体的修改方法

百度编辑器Ueditor增加字体的修改⽅法Ueditor本⾝⾃带11种字体使⽤过程中这11种字体往往不能满⾜我们的需求，现在我要添加“仿宋”和“仿宋GB2312”两种字体过程如下：1、找到⽂件 ueditor/lang/zh-cn/zh-cn.js ，找到其中的fontfamily节点，添加“仿宋”和“仿宋GB2312”'fontfamily':{'songti': '宋体','SimSun': '仿宋','FangSong_GB2312': '仿宋_GB2312','kaiti':'楷体','heiti':'⿊体','lishu':'⾪书','yahei':'微软雅⿊','andaleMono':'andale mono','arial': 'arial','arialBlack':'arial black','comicSansMs':'comic sans ms','impact':'impact','timesNewRoman':'times new roman'},2、找到⽂件ueditor\ueditor.config.js⽂件（⽹上也看到⼀说是ueditor\editor_config.js⽂件，可能版本问题），找到其中被注释掉的fontfamily节点，去掉该节点的注释，添加“仿宋”和“仿宋GB2312”//fontfamily//字体设置 label留空⽀持多语⾔⾃动切换，若配置，则以配置值为准,'fontfamily':[{ label: '', name: 'songti', val: '宋体,SimSun' },{ label: '', name: 'SimSun', val: '仿宋,SimSun' },{ label:'',name:'FangSong_GB2312',val:'仿宋_GB2312 ,FangSong_GB2312'},{ label:'',name:'kaiti',val:'楷体,楷体_GB2312, SimKai'},{ label:'',name:'yahei',val:'微软雅⿊,Microsoft YaHei'},{ label:'',name:'heiti',val:'⿊体, SimHei'},{ label:'',name:'lishu',val:'⾪书, SimLi'},{ label:'',name:'andaleMono',val:'andale mono'},{ label:'',name:'arial',val:'arial, helvetica,sans-serif'},{ label:'',name:'arialBlack',val:'arial black,avant garde'},{ label:'',name:'comicSansMs',val:'comic sans ms'},{ label:'',name:'impact',val:'impact,chicago'},{ label:'',name:'timesNewRoman',val:'times new roman'}]//fontsize//字号//,'fontsize':[10, 11, 12, 14, 16, 18, 20, 24, 36]添加好的效果图：可以看到，仿宋和仿宋GB2312被成功添加上去了最后，附上部分中⽂字体的英⽂名，⽅便添加字体华⽂细⿊：STHeiti Light [STXihei]华⽂⿊体：STHeiti华⽂楷体：STKaiti华⽂宋体：STSong华⽂仿宋：STFangsong俪⿊ Pro：LiHei Pro Medium俪宋 Pro：LiSong Pro Light标楷体：BiauKai苹果俪中⿊：Apple LiGothic Medium苹果俪细宋：Apple LiSung Light新细明体：PMingLiU细明体：MingLiU标楷体：DFKai-SB⿊体：SimHei宋体：SimSun新宋体：NSimSun仿宋：FangSong楷体：KaiTi仿宋_GB2312：FangSong_GB2312楷体_GB2312：KaiTi_GB2312微软正⿊体：Microsoft JhengHei微软雅⿊体：Microsoft YaHei⾪书：LiSu幼圆：YouYuan华⽂细⿊：STXihei华⽂楷体：STKaiti华⽂宋体：STSong华⽂中宋：STZhongsong华⽂仿宋：STFangsong⽅正舒体：FZShuTi⽅正姚体：FZYaoti华⽂彩云：STCaiyun华⽂琥珀：STHupo华⽂⾪书：STLiti华⽂⾏楷：STXingkai华⽂新魏：STXinwei。

百度编辑器ueditor内容编辑自动套P标签，及p标签替换

百度编辑器ueditor内容编辑⾃动套P标签，及p标签替换如图，红框为回车键和shift+回车：===>>ueditor.all.js中:1:搜索修改成false：allowDivTransToP: false再搜索并修改以下：//编辑器不能为空内容if (domUtils.isEmptyNode(me.body)) {me.body.innerHTML = '<div>' + (browser.ie ? '' : '<br/>') + '</div>';}2://给⽂本或者inline节点套p标签if (me.options.enterTag == 'p') {var child = this.body.firstChild, tmpNode;if (!child || child.nodeType == 1 &&(dtd.$cdata[child.tagName] || isCdataDiv(child) ||domUtils.isCustomeNode(child))&& child === stChild) {this.body.innerHTML = '<div>' + (browser.ie ? ' ' : '<br/>') + '</div>' + this.body.innerHTML;} else {var p = me.document.createElement('div');while (child) {while (child && (child.nodeType == 3 || child.nodeType == 1 && dtd.p[child.tagName] && !dtd.$cdata[child.tagName])) {tmpNode = child.nextSibling;p.appendChild(child);child = tmpNode;}if (p.firstChild) {if (!child) {me.body.appendChild(p);break;} else {child.parentNode.insertBefore(p, child);p = me.document.createElement('div');}}child = child.nextSibling;}}}以上类似的有好⼏处，将p 改为 div3：上代码框中 if (me.options.enterTag == 'p') 这个P根据以下开关来⾛enterTag: 'p',//改后为回车换⾏增加br，不改为换⾏增加div4：//进⼊编辑器的li要套p标签，我不需要套P，注释掉吧//进⼊编辑器的li要套p标签/*这⾥开始注释掉 me.addInputRule(function(root){utils.each(root.getNodesByTagName('li'),function(li){var tmpP = UE.uNode.createElement('p');for(var i= 0,ci;ci=li.children[i];){if(ci.type == 'text' || dtd.p[ci.tagName]){5：以下找到并注释//注释掉，这个是⾃动给ul增加⼀个内置的样式，如<ul class=" list-paddingleft-2">node.className = utils.trim(node.className.replace(/list-paddingleft-\w+/,'')) + ' list-paddingleft-' + type; //往下隔⼀⾏的这个注释掉，这个是⾃动去除粘贴进去的代码的li的style样式，为何清除我的样式？li.style.cssText && (li.style.cssText = '');到此就完成了。

Ueditor1.4.3 jsp utf-8 版配置

最近做项目要用到在线编辑器。

（也就是现在编写博客用的东东）。

经一番折腾发现百度编辑器Ueditor 真心好用，配置也方便。

废话不多，j进入正题：首先，在Ueditor首页下载编辑器。

我用的是开发板 1.4.3jsp版本utf-8版。

解压后可以看到如下目录：myeclipse下新建项目，在项目的WebRoot下新建文件夹ueditor。

将ueditor1_4_3-utf8-jsp目录下的文件全部复制到ueditor目录下，当然，/jsp/lib下的jar得放到项目WEB-INF/下的lib文件夹下。

出现错误：Errors occurred during the build.Errors running builder 'JavaScript Validator' on project 'a'.7 这是Myeclipse的bug。

可以在通过：右键项目->Properties->Builders->将Javascripte Validator前的复选框去掉 ->OK 解决。

然后下面是参照Ueditor官方文档给出的例子写的测试页：在这<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>ueditor demo</title><script type="text/javascript"src="ueditor/ueditor.config.js"></script><script type="text/javascript"src="ueditor/ueditor.all.js"></script><link rel="stylesheet" type="text/css"href="udeditor/themes/default/css" /></head><body><script type="text/javascript">var ue = UE.getEditor('container');</script><textarea id="container" name="content">这里写你的初始化内容</textarea></body></html>就这么简单，编辑器出现了。

ueditor 用法

ueditor 用法【原创版】目录1.Ueditor 简介2.Ueditor 的基本使用方法3.Ueditor 的进阶使用方法4.Ueditor 的注意事项正文一、Ueditor 简介Ueditor 是由百度推出的一款开源的 HTML 可视化编辑器，其基于jQuery 框架开发，具有体积小、功能强大、操作简单、高度定制化等特点，被广泛应用于各种网站和应用中的文本编辑功能。

二、Ueditor 的基本使用方法1.引入 Ueditor 的 CSS 和 JS 文件：在网页中引入 Ueditor 的CSS 文件（ueditor.css）和 JS 文件（ueditor.all.js），以及 jQuery 库文件（jquery.min.js）。

2.初始化 Ueditor：在 HTML 文件中创建一个文本域（textarea），并为其添加一个唯一的 ID，然后在 JS 代码中使用 Ueditor 的 API 初始化编辑器。

3.配置 Ueditor：通过设置 Ueditor 的配置项，可以定制编辑器的样式、功能等。

三、Ueditor 的进阶使用方法1.添加自定义按钮：通过创建自定义按钮，可以实现更多的编辑功能，如插入图片、表格等。

2.实现图片上传：通过编写后端接口，实现图片上传功能，并在编辑器中添加相应的按钮，方便用户插入图片。

3.实现实时预览：通过编写后端接口，实现实时预览功能，让用户在编辑过程中实时查看到页面效果。

四、Ueditor 的注意事项1.确保引入的文件顺序正确：应先引入 jQuery 库，然后是 Ueditor 的 CSS 和 JS 文件。

2.配置项要放在初始化 Ueditor 之后：否则可能会导致配置项无法生效。

3.使用过程中要注意兼容性：部分浏览器可能存在兼容性问题，需要进行相应的调整。

总的来说，Ueditor 是一款功能强大且易于使用的 HTML 可视化编辑器，通过掌握其基本使用方法和进阶使用方法，可以为我们的网站和应用提供更好的文本编辑体验。

百度UEditor编辑器使用教程与使用方法（图文）

百度UEditor编辑器使⽤教程与使⽤⽅法（图⽂）我们在做⽹站的时候，⽹站后台系统⼀般都会⽤到web编辑器，今天笔者就给⼤家推荐⼀款百度UEditor编辑器。

关于这款百度UEditor编辑器官⽹上也有简单的教程，不过看着⽐较费劲，今天笔者就跟⼤家分享⼀下百度UEditor编辑器使⽤教程与使⽤⽅法，希望对⼤家有所帮助。

第⼀：百度UEditor编辑器的官⽅下载地址第⼆：百度UEditor编辑器的功能版本选择当我们进⼊百度UEditor编辑器官⽹点击下载选项后，我们发现⼀共有两个版本供我们选择，⼀个是UBuilder,⼀个是开发版，通过下⾯注释的红⾊⼩字我们可以了解到UBuilder和开发版的区别。

⼀般情况下我们选择UBuilder版本即可。

跟我们以往下载软件的⽅式不同，UEditor采⽤选择性下载。

⾸先是可见功能的选择，共有基本，插⼊，格式化，表格四⼤组，每组下⾯都有若⼲功能按钮，我们可以根据⾃⼰的需求来进⾏选择，如果双击四⼤组则表⽰全选该组按钮。

如果对选择的按钮不满意还可以点击清空选择，有⼀点要提⽰的是如果点击清空选择会清楚掉你原先做过的所有选择。

接着就是隐藏功能，语⾔，服务端版本的选择，隐藏功能默认的是全选，如⾮必要还是不要更改为好。

语⾔选项共分为了中⽂和英⽂两种，默认的是只下载中⽂语⾔包，如果你有需要⽤到英⽂的话可以把英⽂包也加上。

服务端版本⽬前提供了三种，分别为PHP，.NET，JSP，选择完毕后我们就可以点击下载资源包了。

第三：百度UEditor编辑器的配置⽅法技巧1、从官⽹上下载完整源码包，解压到任意⽬录，解压后的源码⽬录结构如下所⽰：_examples：编辑器完整版的⽰例页⾯dialogs：弹出对话框对应的资源和JS⽂件themes：样式图⽚和样式⽂件 php/jsp/.net：涉及到服务器端操作的后台⽂件，根据你选择的不同后台版本，这⾥也会不同，这⾥我们选择phpthird-party：第三⽅插件(包括代码⾼亮，源码编辑等组件）editor_all.js：_src⽬录下所有⽂件的打包⽂件（⽤于发布版本）editor_api.js: API接⼝配置⽂件（开发版本）editor_all_min.js：editor_all.js⽂件的压缩版，建议在正式部署时才采⽤editor_config.js：编辑器的配置⽂件，建议和编辑器实例化页⾯置于同⼀⽬录2、编辑器的实例化页⾯，导⼊编辑器需要的三个⼊⼝⽂件，⽰例代码如下：<script type="text/javascript" charset="utf-8" src="../umeditor.config.js"></script><script type="text/javascript" charset="utf-8" src="editor_api.js"></script><script type="text/javascript" src="../lang/zh-cn/zh-cn.js"></script>3、然后在编辑器的实例化页⾯中创建编辑器实例及其DOM容器，⽰例代码如下：<textarea name="后台取值的key" id="myEditor">这⾥写你的初始化内容</textarea><script type="text/javascript">var editor = new UE.ui.Editor();editor.render("myEditor");//1.2.4以后可以使⽤⼀下代码实例化编辑器//UE.getEditor('myEditor')</script>4、在editor_config.js中查找URL变量配置编辑器在你项⽬中的路径。

百度ueditor富文本--图片保存路径的配置以及上传到远程服务器

百度ueditor富⽂本--图⽚保存路径的配置以及上传到远程服务器我们在上篇⽂章中学习了上传图⽚的配置:百度ueditor富⽂本--配置图⽚上传在⽂章的最后讲到 ueditor 默认设置的保存图⽚的路径是相对路径，项⽬相关的。

保存的图⽚会放在tomcat的webapp⽬录下的项⽬⽂件夹中。

F:\tomcat7\webapps\ROOT这样的配置会导致重启 tomcat后保存的图⽚丢失。

解决⽅法⼀修改图⽚保存路径在tomcat的webapp中项⽬之外修改了config.json中的imagePathFormat参数重新设置图⽚保存路径，⽐如："imagePathFormat": "/../temp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以⾃定义保存路径和⽂件名格式 */我们这⾥在原路径上加了/../temp。

意思是项⽬路径ROOT⾥的的上⼀级路径，也就是路径设置为项⽬之外，webapp中。

如图:F:\tomcat7\webapps\temp\ueditor\jsp\upload\image\20170825需要注意的是:⼀、图⽚保存路径在项⽬之外最好先新建好⽂件夹，不然第⼀次上传图⽚时创建⽬录速度会⽐较慢，会导致⾸张图⽚回调找不到图⽚404。

图⽚保存的路径最好在tomcat的webapp⽂件夹中，这样我们才能访问到图⽚。

如果图⽚不在Webapp⽬录下的，需要做做映射才能访问图⽚，回调显⽰图⽚才能成功。

UEditor后端保存图⽚到⽬标位置之后，返回前端⼀个url。

前端根据url，去取图⽚，取不到。

如果想把图⽚存储到⾮Webapp等硬盘⽬录，⽐如C:/img，需要⼿动修改controller.jsp的rootPath[java] view plain copy print?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");8. response.setHeader("Content-Type" , "text/html");9.10. //String rootPath = application.getRealPath( "/" );11. String rootPath = "c:/img";12. System.out.print(rootPath);13. out.write( new ActionEnter( request, rootPath ).exec() );14.15. %>图⽚保存在项⽬的外⾯，⽐如C:/img，前端请求不可能直接访问到，需要做映射。

Ueditor配置介绍

UEditor除了具有轻量、可定制等优点外，还始终将优化编辑操作、提升用户体验摆在了很重要的位置。

在这一点上，除了对编辑器功能、性能、实现细节等不断地改进和追求创新之外，众多灵活而人性化的自定义配置也充分地体现了这个特点，通过修改配置项的值，用户几乎可以完全地改变编辑器的外观和行为。

从配置本身的优先级来看，UEditor的配置可以分为系统默认配置和用户自定义配置两种类型。

系统默认配置是指editor_config.js中的所有配置，而用户自定义配置则是指用户在实例化编辑器的时候传入的JSON格式的配置。

用户自定义配置的优先级高于系统默认配置，若两者同名，则覆盖系统默认配置。

若未提供对应的用户自定义配置，则采用系统默认配置。

一般情况下，推荐用户在实例化的时候使用自定义配置来代替修改系统默认配置。

从配置对编辑器的作用来看，UEditor的配置又可以分为界面配置和功能配置两种类型。

界面配置主要集中在工具栏配置和初始化配置上；功能配置由于相对较多，下文将筛选一些同学们容易迷惑的配置项来进行讲解，而其他简单的则只要参考具体配置项对应的注释即可。

界面配置1、工具栏配置默认配置项中包含了编辑器的所有按钮，需要改变时，只要在初始化的时候传入对应参数即可。

示例代码如下：var editor = new baidu.editor.ui.Editor({toolbars:[['Paragraph','RowSpacing','FontFamily','FontSize']]});editor.render("myEditor");这个时候的编辑就只有四个工具按钮了。

关于工具栏的更多高级配置，比如改变布局结构，双栏和单栏混排等等2、初始化内容实例化的时候可以使用<textarea id="editor">初始内容</textarea>来为编辑器赋初始值。

UEditor配置,上传图片和附件及其他使用方法

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

这简直是Web开发富文本框输入的一大神器！最低来说，使用百度的富文本编辑器，无论是本地化还是相关操作学习文档，都比国外的FCKEdit神马的要好的多！首先是下载地址：/website/ipanel/panel.html下载时可以下载完整包，或者功能定制化下载；如果网站对富文本编辑器需求比较明确，尽量使用定制化下载，经测试，如果下载完整包，每次页面请求有800K内容，定制化下载后简单优化一下，页面可以缩小到600K甚至更小…。

如果页面访问量不大，对编辑器需求也不太明确，建议下载完整包罗，需要的功能通过配置后下载配置文件，以后只需在网站上更新UEditor的配置文件就可以完成功能更新了！基础配置UEditor除了具有功能强大、可定制等优点外，还始终将优化编辑操作、提升用户体验摆在了很重要的位置。

在这一点上，除了对编辑器功能、性能、实现细节等不断地改进和追求创新之外，众多灵活而个性化的自定义配置也充分体现了这个特点。

通过修改配置，用户几乎可以完全地改变编辑器的外观和行为。

从配置本身的优先级来看，UEditor的配置可以分为系统默认配置和用户自定义配置两种类型。

系统默认配置分散在各个对应的核心或者插件文件之中，对用户不可见。

当用户注释掉自定义配置时起作用。

用户自定义配置包括两种类型，一种位于editor_config.js 文件之中，优先级高于系统默认配置；另一种位于实例化编辑器时传入的参数中，优先级最高。

默认情况下，UEditor在editor_congfig.js注释掉了所有可以省略的配置项，采用系统默认配置，若取消注释，则以该配置项为准；未注释的配置项要求用户必需按照项目实际这里以.net环境和Visual Studio开发工具为例，看看UEditor的配置；在解决方案中新建目标文件夹用于放置UEditor的所有文件内容，我放在目标文件夹（Scripts）下使用VS时添加现有项太麻烦？有一个快捷办法，将UEditor解压缩后的整个文件夹复制到目标文件夹（Scripts）中，在VS的项目管理器上点击显示所有文件按钮，解决方案资源管理器的目标文件夹下可以找到UEditor的文件夹了，但是文件夹显示是隐藏状态，右键点击文件夹，选择包括在项目中，VS自动将UEditor下的文件夹和文件全部加载到解决方案资源管理器中。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

百度Ueditor配置步骤
一、官网上下载完整源码包，解压到任意目录，解压后的源码目录结构如下所示：
_examples：编辑器完整版的示例页面
dialogs：弹出对话框对应的资源和JS文件
themes：样式图片和样式文件
php/jsp/.net：涉及到服务器端操作的后台文件，根据你选择的不同后台版本，这里也会不同，这里应该是jsp,php,.net
third-party：第三方插件(包括代码高亮，源码编辑等组件）
editor_all.js：_src目录下所有文件的打包文件
editor_all_min.js：editor_all.js文件的压缩版，建议在正式部署时才采用
editor_config.js：编辑器的配置文件，建议和编辑器实例化页面置于同一目录
二、部署UEditor到实际项目（UETest）中的步骤:
第一步：在项目的任一文件夹中建立一个用于存放UEditor相关资源和文件的目录，此处在项目根目录下建立，起名为ueditor。

第二步：拷贝源码包中的dialogs 、themes 、third-party 、editor_all.js 和editor_config.js 到ueditor 文夹中。

其中，除了ueditor 目录之外的其余文件均为具体项目文件，此处所列仅供示例。

第三步：为简单起见，此处将以根目录下的index.aspx 页面作为编辑器的实例化页面，用来展示UEditor 的完整版效果。

在index.aspx 文件中，首先导入编辑器需要的三个入口文件，示例代码如下：
1 2 3 <title>编辑器完整版实例</title>
<script type="text/javascript" src="ueditor/editor_config.js"></script> <script type="text/javascript" src="ueditor/editor_all.js"></script>
第四步：然后在index.aspx 文件中创建编辑器实例及其DOM 容器。

具体代码示例如下： 1
2
3
4
5
6
7
<textarea name="后台取值的key" id="myEditor">这里写你的初始化内容</textarea> //下面是实例化 <script type="text/javascript"> var editor = new UE.ui.Editor(); editor.render("myEditor"); //1.2.4以后可以使用一下代码实例化编辑器 //UE.getEditor('myEditor') </script>
最后一步：在/UETest/ueditor/ editor_config.js 中查找URL 变量配置编辑器在你项目中的路径。

1
2 //强烈推荐以这种方式进行绝对路径配置 URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";
新增编辑器容器拖动缩放功能,配置项为:scaleEnabled 、minFrameWidth 、minFrameHeight
控制大小 congig.js 文件中
//,initialFrameWidth:1000 //初始化编辑器宽度,默认1000
//,initialFrameHeight:320 //初始化编辑器高度,默认320。

百度Ueditor配置步骤

百度ueditor富文本编辑器实现上传文件、图片、视频到ftp服务器并在页面端回显

React中使用UEditor百度富文本的方法

ueditor 用法

ueditor1.4.3jsp utf-8版配置使用教程

ueditor百度编辑器的赋值方法

如何将UEditor部署到PHP程序上

跟我学百度UEditor在线文本编辑器及应用实例——在J2EE Web应用系统中如何配置UEditor在线文本编辑器

ueditor使用方法

百度UEditor编辑器!合入PHP网站!

ueditor使用指南

百度编辑器Ueditor增加字体的修改方法

百度编辑器ueditor内容编辑自动套P标签，及p标签替换

Ueditor1.4.3 jsp utf-8 版配置

ueditor 用法

最新版UEDITOR使用教程

百度UEditor编辑器使用教程与使用方法（图文）

百度ueditor富文本--图片保存路径的配置以及上传到远程服务器

Ueditor配置介绍

UEditor配置,上传图片和附件及其他使用方法