您的位置：文档网› PHPCMS V9使用UEditor富文本编辑器方法

PHPCMS V9使用UEditor富文本编辑器方法

PHPCMS V9使用UEditor富文本编辑器方法
一、下载最新版的编辑器源代码
二、放在/statics/js/目录下面；
三、修改/phpcms/libs/classes/下的form.class文件：
if(!defined('EDITOR_INIT')){
$str='<script type="text/javascript" src="'.JS_PATH.'ckeditor/ckeditor.js"></script>';
define('EDITOR_INIT',1);
}
修改为：
if(!defined('EDITOR_INIT')){
$str='<script type="text/javascript" src="'.JS_PATH.'ueditor/ueditor.config.js"></script>';
$str.='<script type="text/javascript"src="'.JS_PATH.'ueditor/ueditor.all.js"></script>';
$str.='<link rel="stylesheet"href="'.JS_PATH.'ueditor/themes/default/ueditor.css"/>';
define('EDITOR_INIT',1);
}
$str.="<script type=\"text/javascript\">\r\n";
$str.="var editor=new baidu.editor.ui.Editor();editor.render('$textareaid');";
$str.='</script>';
四、修改/statics/js/ueditor/下的ueditor_config文件中的路径
*window.UEDITOR_HOME_URL="/xxxx/xxxx/";
提出注释项，修改为：
window.UEDITOR_HOME_URL="/statics/js/ueditor/";。

合集下载

富文本编辑器CKeditor配置使用+上传图片

富文本编辑器CKeditor配置使用+上传图片

富⽂本编辑器CKeditor配置使⽤+上传图⽚参考⽂献：，⽼版本可以参考有点问题发现可⾏有⼀定参考价值富⽂本编辑器 CKeditor 配置使⽤+上传图⽚下载后默认放在⽹站根⽬录下 ckeditor⽂件夹中⼀、使⽤⽅法：1、在页⾯<head>中引⼊ckeditor核⼼⽂件ckeditor.js<script type="text/javascript" src="ckeditor/ckeditor.js"></script>2、在使⽤编辑器的地⽅插⼊HTML控件<textarea><textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>如果是环境，也可⽤服务器端控件<TextBox><asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"></asp:TextBox>注意在控件中加上 class="ckeditor" 。

3、将相应的控件替换成编辑器代码<script type="text/javascript">CKEDITOR.replace('TextArea1');//如果是在环境下⽤的服务器端控件<TextBox>CKEDITOR.replace('tbContent');//如果<TextBox>控件在母版页中，要这样写CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$") %>');</script>4、配置编辑器ckeditor的配置都集中在 ckeditor/config.js ⽂件中，下⾯是⼀些常⽤的配置参数：// 界⾯语⾔，默认为 'en'nguage = 'zh-cn';// 设置宽⾼config.width = 400;config.height = 400;// 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'config.skin = 'v2';// 背景颜⾊config.uiColor = '#FFF';// ⼯具栏（基础'Basic'、全能'Full'、⾃定义）plugins/toolbar/plugin.jsconfig.toolbar = 'Basic';config.toolbar = 'Full';这将配合：config.toolbar_Full = [['Source','-','Save','NewPage','Preview','-','Templates'],['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],'/',['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],['Link','Unlink','Anchor'],['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],'/',['Styles','Format','Font','FontSize'],['TextColor','BGColor']];//⼯具栏是否可以被收缩config.toolbarCanCollapse = true;//⼯具栏的位置config.toolbarLocation = 'top';//可选：bottom//⼯具栏默认是否展开config.toolbarStartupExpanded = true;// 取消 “拖拽以改变尺⼨”功能 plugins/resize/plugin.jsconfig.resize_enabled = false;//改变⼤⼩的最⼤⾼度config.resize_maxHeight = 3000;//改变⼤⼩的最⼤宽度config.resize_maxWidth = 3000;//改变⼤⼩的最⼩⾼度config.resize_minHeight = 250;//改变⼤⼩的最⼩宽度config.resize_minWidth = 750;// 当提交包含有此编辑器的表单时，是否⾃动更新元素内的数据config.autoUpdateElement = true;// 设置是使⽤绝对⽬录还是相对⽬录，为空为相对⽬录config.baseHref = ''// 编辑器的z-index值config.baseFloatZIndex = 10000;//设置快捷键config.keystrokes = [[ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ], //获取焦点[ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], //元素焦点[ CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], //⽂本菜单[ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], //撤销[ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //重做[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ], //[ CKEDITOR.CTRL + 76 /*L*/, 'link' ], //链接[ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], //粗体[ CKEDITOR.CTRL + 73 /*I*/, 'italic' ], //斜体[ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], //下划线[ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]]//设置快捷键可能与浏览器快捷键冲突 plugins/keystrokes/plugin.js.config.blockedKeystrokes = [CKEDITOR.CTRL + 66 /*B*/,CKEDITOR.CTRL + 73 /*I*/,CKEDITOR.CTRL + 85 /*U*/]//设置编辑内元素的背景⾊的取值 plugins/colorbutton/plugin.js.config.colorButton_backStyle = {element : 'span',styles : { 'background-color' : '#(color)' }}//设置前景⾊的取值 plugins/colorbutton/plugin.jsconfig.colorButton_colors = '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,A9A9A9,FFA07A,FFA500,FFFF00,0 //是否在选择颜⾊时显⽰“其它颜⾊”选项 plugins/colorbutton/plugin.jsconfig.colorButton_enableMore = false//区块的前景⾊默认值设置 plugins/colorbutton/plugin.jsconfig.colorButton_foreStyle = {element : 'span',styles : { 'color' : '#(color)' }};//所需要添加的CSS⽂件在此添加可使⽤相对路径和⽹站的绝对路径config.contentsCss = './contents.css';//⽂字⽅向config.contentsLangDirection = 'rtl'; //从左到右//CKeditor的配置⽂件若不想配置留空即可CKEDITOR.replace( 'myfiled', { customConfig : './config.js' } );//界⾯编辑框的背景⾊ plugins/dialog/plugin.jsconfig.dialog_backgroundCoverColor = '#fffefd'; //可设置参考config.dialog_backgroundCoverColor = 'white' //默认//背景的不透明度数值应该在：0.0～1.0 之间 plugins/dialog/plugin.jsconfig.dialog_backgroundCoverOpacity = 0.5//移动或者改变元素时边框的吸附距离单位：像素 plugins/dialog/plugin.jsconfig.dialog_magnetDistance = 20;//是否拒绝本地拼写检查和提⽰默认为拒绝⽬前仅firefox和safari⽀持 plugins/wysiwygarea/plugin.js.config.disableNativeSpellChecker = true//进⾏表格编辑功能如：添加⾏或列⽬前仅firefox⽀持 plugins/wysiwygarea/plugin.jsconfig.disableNativeTableHandles = true; //默认为不开启//是否开启图⽚和表格的改变⼤⼩的功能 config.disableObjectResizing = true;config.disableObjectResizing = false//默认为开启//设置HTML⽂档类型config.docType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd%22' ;//是否对编辑区域进⾏渲染 plugins/editingblock/plugin.jsconfig.editingBlock = true;//编辑器中回车产⽣的标签config.enterMode = CKEDITOR.ENTER_P; //可选：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV//是否使⽤HTML实体进⾏输出 plugins/entities/plugin.jsconfig.entities = true;//定义更多的实体 plugins/entities/plugin.jsconfig.entities_additional = '#39'; //其中#代替了&//是否转换⼀些难以显⽰的字符为相应的HTML字符 plugins/entities/plugin.jsconfig.entities_greek = true;//是否转换⼀些拉丁字符为HTML plugins/entities/plugin.jsconfig.entities_latin = true;//是否转换⼀些特殊字符为ASCII字符如"This is Chinese: 汉语."转换为"This is Chinese: 汉语." plugins/entities/plugin.jsconfig.entities_processNumerical = false;//添加新组件config.extraPlugins = 'myplugin'; //⾮默认仅⽰例//使⽤搜索时的⾼亮⾊ plugins/find/plugin.jsconfig.find_highlight = {element : 'span',styles : { 'background-color' : '#ff0', 'color' : '#00f' }};//默认的字体名 plugins/font/plugin.jsconfig.font_defaultLabel = 'Arial';//字体编辑时的字符集可以添加常⽤的中⽂字符：宋体、楷体、⿊体等 plugins/font/plugin.jsconfig.font_names = 'Arial;Times New Roman;Verdana';//⽂字的默认式样 plugins/font/plugin.jsconfig.font_style = {element : 'span',styles : { 'font-family' : '#(family)' },overrides : [ { element : 'font', attributes : { 'face' : null } } ]};//字体默认⼤⼩ plugins/font/plugin.jsconfig.fontSize_defaultLabel = '12px';//字体编辑时可选的字体⼤⼩ plugins/font/plugin.jsconfig.fontSize_sizes ='8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px'//设置字体⼤⼩时使⽤的式样 plugins/font/plugin.jsconfig.fontSize_style = {element : 'span',styles : { 'font-size' : '#(size)' },overrides : [ { element : 'font', attributes : { 'size' : null } } ]};//是否强制复制来的内容去除格式 plugins/pastetext/plugin.jsconfig.forcePasteAsPlainText =false//不去除//是否强制⽤“&”来代替“&amp;”plugins/htmldataprocessor/plugin.jsconfig.forceSimpleAmpersand = false;//对address标签进⾏格式化 plugins/format/plugin.jsconfig.format_address = { element : 'address', attributes : { class : 'styledAddress' } };//对DIV标签⾃动进⾏格式化 plugins/format/plugin.jsconfig.format_div = { element : 'div', attributes : { class : 'normalDiv' } };//对H1标签⾃动进⾏格式化 plugins/format/plugin.jsconfig.format_h1 = { element : 'h1', attributes : { class : 'contentTitle1' } };//对H2标签⾃动进⾏格式化 plugins/format/plugin.jsconfig.format_h2 = { element : 'h2', attributes : { class : 'contentTitle2' } };//对H3标签⾃动进⾏格式化 plugins/format/plugin.jsconfig.format_h1 = { element : 'h3', attributes : { class : 'contentTitle3' } };//对H4标签⾃动进⾏格式化 plugins/format/plugin.jsconfig.format_h1 = { element : 'h4', attributes : { class : 'contentTitle4' } };//对H5标签⾃动进⾏格式化 plugins/format/plugin.jsconfig.format_h1 = { element : 'h5', attributes : { class : 'contentTitle5' } };//对H6标签⾃动进⾏格式化 plugins/format/plugin.jsconfig.format_h1 = { element : 'h6', attributes : { class : 'contentTitle6' } };//对P标签⾃动进⾏格式化 plugins/format/plugin.jsconfig.format_p = { element : 'p', attributes : { class : 'normalPara' } };//对PRE标签⾃动进⾏格式化 plugins/format/plugin.jsconfig.format_pre = { element : 'pre', attributes : { class : 'code' } };//⽤分号分隔的标签名字在⼯具栏上显⽰ plugins/format/plugin.jsconfig.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';//是否使⽤完整的html编辑模式如使⽤，其源码将包含：<html><body></body></html>等标签config.fullPage = false;//是否忽略段落中的空字符若不忽略则字符将以“”表⽰ plugins/wysiwygarea/plugin.jsconfig.ignoreEmptyParagraph = true;//在清除图⽚属性框中的链接属性时是否同时清除两边的<a>标签 plugins/image/plugin.jsconfig.image_removeLinkByEmptyURL = true;//⼀组⽤逗号分隔的标签名称，显⽰在左下⾓的层次嵌套中 plugins/menu/plugin.js.config.menu_groups ='clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea';//显⽰⼦菜单时的延迟，单位：ms plugins/menu/plugin.jsconfig.menu_subMenuDelay = 400;//当执⾏“新建”命令时，编辑器中的内容 plugins/newpage/plugin.jsconfig.newpage_html = '';//当从word⾥复制⽂字进来时，是否进⾏⽂字的格式化去除 plugins/pastefromword/plugin.jsconfig.pasteFromWordIgnoreFontFace = true; //默认为忽略格式//是否使⽤<h1><h2>等标签修饰或者代替从word⽂档中粘贴过来的内容 plugins/pastefromword/plugin.jsconfig.pasteFromWordKeepsStructure = false;//从word中粘贴内容时是否移除格式 plugins/pastefromword/plugin.jsconfig.pasteFromWordRemoveStyle = false;//对应后台语⾔的类型来对输出的HTML内容进⾏格式化，默认为空config.protectedSource.push( /<"?["s"S]*?"?>/g ); // PHP Codeconfig.protectedSource.push( //g ); // ASP Codeconfig.protectedSource.push( /(]+>["s|"S]*?<"/asp:[^">]+>)|(]+"/>)/gi ); // Code//当输⼊：shift+Enter时插⼊的标签config.shiftEnterMode = CKEDITOR.ENTER_P; //可选：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV//可选的表情替代字符 plugins/smiley/plugin.js.config.smiley_descriptions = [':)', ':(', ';)', ':D', ':/', ':P','', '', '', '', '', '','', ';(', '', '', '', '','', ':kiss', '' ];//对应的表情图⽚ plugins/smiley/plugin.jsconfig.smiley_images = ['regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif','embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif','broken_heart.gif','kiss.gif','envelope.gif'];//表情的地址 plugins/smiley/plugin.jsconfig.smiley_path = 'plugins/smiley/images/';//页⾯载⼊时，编辑框是否⽴即获得焦点 plugins/editingblock/plugin.js plugins/editingblock/plugin.js.config.startupFocus = false;//载⼊时，以何种⽅式编辑源码和所见即所得 "source"和"wysiwyg" plugins/editingblock/plugin.js.config.startupMode ='wysiwyg';//载⼊时，是否显⽰框体的边框 plugins/showblocks/plugin.jsconfig.startupOutlineBlocks = false;//是否载⼊样式⽂件 plugins/stylescombo/plugin.js.config.stylesCombo_stylesSet = 'default';//以下为可选config.stylesCombo_stylesSet = 'mystyles';config.stylesCombo_stylesSet = 'mystyles:/editorstyles/styles.js';config.stylesCombo_stylesSet = 'mystyles:/editorstyles/styles.js';//起始的索引值config.tabIndex = 0;//当⽤户键⼊TAB时，编辑器⾛过的空格数，(&nbsp;) 当值为0时，焦点将移出编辑框 plugins/tab/plugin.jsconfig.tabSpaces = 0;//默认使⽤的模板 plugins/templates/plugin.js.config.templates = 'default';//⽤逗号分隔的模板⽂件plugins/templates/plugin.js.config.templates_files = [ 'plugins/templates/templates/default.js' ]//当使⽤模板时，“编辑内容将被替换”框是否选中 plugins/templates/plugin.jsconfig.templates_replaceContent = true;//主题config.theme = 'default';//撤销的记录步数 plugins/undo/plugin.jsconfig.undoStackSize =20;// 在 CKEditor 中集成 CKFinder，注意 ckfinder 的路径选择要正确。

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

百度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;/*** 配置项主体。

ueditor laravel 例子

ueditor laravel 例子

UEditor 是一个基于 JavaScript 的富文本编辑器，可以方便地集成到 Web 应用程序中。

在 Laravel 中使用 UEditor 的示例如下：1.安装 UEditor：o下载 UEditor 的最新版本。

o将UEditor 的文件解压缩到Laravel 项目的某个目录中，例如 public/ueditor。

2.配置 UEditor：o在 Laravel 项目中创建一个配置文件，例如 config/ueditor.php，用于存储 UEditor 的配置信息。

o在配置文件中定义 UEditor 的配置项，例如上传目录、文件大小限制等。

以下是一个示例配置：php复制代码<?phpreturn ['uploadDir' => 'ueditor', // 上传文件保存目录'rootPath' => '/public', // 根路径，相对于 public 目录'maxSize' => 1024 * 1024 * 30, // 文件大小限制，单位为字节// 其他配置项...];3.在 Laravel 中使用 UEditor：o在需要使用 UEditor 的页面中引入 UEditor 的相关文件，例如：复制代码html`<script src="/ueditor/ueditor.config.js"></script><script src="/ueditor/ueditor.all.min.js"></script>`o在页面中创建一个用于编辑内容的<textarea>元素，例如：复制代码html`<textarea id="editor"></textarea>`o在页面中初始化 UEditor，例如：复制代码javascript`var editor = UE.getEditor('editor');`4.处理上传文件：o当用户选择上传文件后，UEditor 会将文件上传到服务器的指定目录中。

富文本用法

富文本用法

富文本用法全文共四篇示例，供读者参考第一篇示例：富文本是一种常用的文本编辑格式，它允许用户在文本中插入图片、链接、样式和排版等丰富的内容。

在互联网应用、办公软件、博客编辑等场景中，常常会使用富文本来美化文档、增加内容的吸引力。

在本文中，我们将介绍一些关于富文本的基本用法，帮助读者更方便地使用富文本来编辑文档。

我们来看一下富文本的基本介绍。

富文本（Rich Text）是指一种带格式的文本，它可以包含文字、图片、链接等丰富的内容。

与纯文本相比，富文本更具有表现力，可以更好地展示作者的创意和想法。

富文本编辑器是一种用来编辑富文本的工具，常用的富文本编辑器包括Microsoft Word、谷歌Docs、WPS等。

富文本编辑器提供了丰富的功能，使得用户可以方便地编辑文档。

最常用的功能包括字体、字号、颜色、加粗、斜体、下划线等文本样式的设置；插入图片、链接、表格、列表、代码块等内容；调整段落格式如缩进、对齐、间距等；批注和标注等。

在使用富文本编辑器时，用户可以通过操作按钮或快捷键来实现这些功能。

除了基本的文本编辑功能，富文本还支持一些高级的排版效果。

用户可以在文档中插入多媒体内容，如视频、音频、Flash等；可以设置文档的版式，包括页边距、页眉页脚、分栏等；可以添加水印、图形、背景等装饰效果。

这些高级的排版效果可以使文档更加生动、吸引人。

富文本还支持一些特殊的文本处理功能。

用户可以在文档中插入公式、数学符号，进行数学计算和科学论证；可以插入代码块，进行编程和程序设计；可以插入表格，进行数据统计和分析等。

这些特殊的文本处理功能使得富文本在学术、技术、科研等领域具有广泛的应用价值。

除了上述功能之外，富文本还可以与其他应用程序进行集成，实现更多的编辑和处理功能。

富文本可以与云存储、邮件应用、社交媒体等进行连接，实现文档的分享、协作、发布等；可以与数据可视化、人工智能等技术结合，实现文档的分析、预测、自动化处理等；可以与电子签名、加密技术等结合，确保文档的安全和信任。

UI之富文本编辑器使用详解（杰瑞教育原创）

UI之富文本编辑器使用详解（杰瑞教育原创）
见即所得的富文本编辑器，具有轻量、可定制、注重用户体验的特点。
在这里要注意，config.js文件应该在前。
窗体顶端
<="" action="<%=request.getContextPath() %>/main/contractServlet.action" p="">
通过请求servlet在servlet中调用业务方法将保存在数据库中的合同模板信息加载后保存在request中并通过转发到合同编辑页面在页面中将数据取出并在初始化ueditor时赋值
UI之富文本编辑器使用详解（杰瑞教育原创）
UI之富文本编Biblioteka 器-UEditor在做Web应用时，经常会进行富文本编辑，常用的富文本编辑器有很多，比如CuteEditor、CKEditor、NicEditor、KindEditor、UEditor等等。
method="post">
窗体底端

小程序使用editor富文本编辑器填坑指南

小程序使用editor富文本编辑器填坑指南

⼩程序使⽤editor富⽂本编辑器填坑指南
最近在做⼩程序上的富⽂本编辑器功能，发现⼏个隐藏点：
2. ⾄于怎么集成，在 ready 后有时候能看到⼀个 webviewId，所以推测是通过 webview 集成的
关于⼯具栏
1. ⼯具栏是和 editor 组件分开的，可以任意定制
2. 理论上 quill ⾥⾯的⼯具栏，⼩程序都⽀持
关于 iOS 页⾯上推问题
官⽅中⽂⽂档中包含对应解决⽅案，思路为：
根据 editor 键盘弹起，动态调整 editor 的⾼度，由于 iOS 会上推页⾯，所以在上推完成（可以通过键盘⾼度变化的 duration 拿到时间）时直接滚动页⾯到顶部: wx.pageScrollTo({ scrollTop: 0 })
最终的效果是页⾯会先上推，后会弹，光标可以始终保持可见。

（可能会有抖动，⽬前没有发现更好的解决办法）
关于页⾯底部如果有 Fixed 元素问题
聚焦时会把底部的 Fixed 元素顶起，这个属于兼容性问题，在某些安卓机如：华为 P30，⼩⽶9 中均有出现
由于笔者的需求需要根据底部元素动态计算 editor 的⾼度，所以可以如下解决：底部元素换为流式布局，⽤隐藏的 Fixed 元素⽤来计算⾼度。

当然前提是页⾯只有⼀屏不需要滚动。

关于 P30 有时⽆法弹出键盘的问题
经测试发现聚焦 editor 出现此问题概率较⼤，怀疑是包裹 editor 的 webview 聚焦出现问题，调试了好久发现在聚焦之前往 editor 插⼊⼀段空⽩⽂本：insertText({ text: '' }) 或者 editorCtx.blur() 可以解决
以上为笔者最近使⽤ editor 组件遇到的问题，欢迎交流~。

avueueditor的使用

avueueditor的使用今天，我们来一起了解一下使用avueueditor的操作步骤。

首先，avueueditor是一款方便易用的富文本编辑器，可以帮助我们创建美观、专业的内容。

下面，我们来看看如何使用它。

步骤一：下载安装我们可以在avueueditor的官网上下载最新版的编辑器。

下载完成之后，我们需要解压文件并上传到网站服务器上。

步骤二：引用编辑器接着，我们需要在网页中引用编辑器。

我们可以在需要引用编辑器的页面中，添加下面的代码：```<script type="text/javascript" src="avue.js"></script><script type="text/javascript" src="avue.min.js"></script><link rel="stylesheet" href="avue.css"><link rel="stylesheet" href="avue.min.css">```步骤三：创建编辑器现在，我们可以创建一个简单的编辑器。

下面是一个基本的HTML 代码，可以帮助我们快速创建一个编辑器：```<div id="myEditor"><p>这是编辑器的初始内容。

</p></div>```步骤四：配置编辑器接下来，我们需要对编辑器进行配置。

我们可以在JavaScript 中设置编辑器的配置选项。

```var options = {height: 500,editorClass: 'myEditor',onInit: function () {console.log('初始化编辑器');},onChange: function (content) {console.log('修改后的内容：', content);}};var editor = new AvueEditor('#myEditor', options);```我们可以设置编辑器的高度、CSS类、初始化函数和内容更改函数等选项。

富文本编辑器ckeditor使用手册

富文本编辑器ckeditor使用手册一.环境配置1 在web.xml配置servlet<servlet><servlet-name>multiform</servlet-name><servlet-class>com.newtouch.upload.servlet.MultiFormServlet</servlet-class><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>multiform</servlet-name><url-pattern>/multiform</url-pattern></servlet-mapping>2 将插件ckeditor及upload文件夹（用于图片上传功能）添加至工程中。

二. 如何在项目中使用ckeditor？将标签textarea中的isRich属性设置为true即可textarea替换成ckeditor。

三.在textarea标签中有哪几个属性设置与ckeditor有关？分别有哪些作用？toolbarType：提供了三种工具栏的布局，分别是full，normal，basic。

customToolBar：如果在开发中有特殊的需求导致提供的三种默认的工具栏布局无法满足项目需求，开发者可以自定义工具栏中的选项，以及其排列。

开发者可以将所需要的工具栏以逗号为分隔符进行排列。

目前共提供12类工具栏。

（1）source：包含source按钮。

（2）system：系统类按钮，包括保存，新建，预览。

（3）templates：包含模板按钮，可以利用所提供的模板进行文字图片的编辑。

（4）textOperation：包括一些文本操作的按钮，例如剪切，复制，粘贴等。

html中引用ueditor富文本

html中引用ueditor富文本一、简介Ueditor是一款功能强大的富文本编辑器，它提供了丰富的编辑功能和样式，可以帮助用户创建出高质量的网页内容。

在HTML中引用Ueditor富文本，可以让用户在网页上直接编辑内容，而无需使用其他工具。

二、安装与引用要引用Ueditor富文本，需要先在HTML页面中安装并引入Ueditor的脚本文件和样式文件。

以下是一个基本的引用示例：```html<!DOCTYPEhtml><html><head><title>引用Ueditor富文本</title><linkrel="stylesheet"href="ueditor.css"type="text/css"/> </head><body><divid="content"style="margin:50px;"><!--在此处放置编辑区域--></div><scriptsrc="ueditor.all.min.js"></script><script>//初始化编辑器varue=UE.getEditor('content');</script></body></html>```在上述示例中，我们引入了Ueditor的CSS样式文件和JavaScript脚本文件。

然后，在HTML页面中定义了一个名为“content”的div元素，作为编辑区域的容器。

最后，通过JavaScript代码初始化编辑器，将其附加到该div元素上。

三、编辑功能Ueditor富文本提供了丰富的编辑功能，包括：*文本格式：支持不同的文本格式，如粗体、斜体、下划线等。

如何将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的配置文件，首先对路径进行配置。

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