项目说明:
在fhadmin 项目中富文本的引入方式为使用iframe进行引用,整个的提交回显环节为:
1.打开新增页面(加载富文本index.html)
2.向富文本中输入文字添加图片等信息(鼠标失去焦点事件提交数据到富文本表中)
3.点击保存按钮(发送请求到富文本表中取值)
4.保存成功时清空富文本
问题说明:
1.在第2和3阶段时,即触发了点击事件,也触发了保存事件会造成富文本取不到值。
2.如果在添加时出现问题富文本内容不能及时清空,则错误回显。
3.fhadmin项目中富文本打包后不支持图片,视频等媒体文件上传。
解决方案:
1.在第2和3阶段时,即触发了点击事件,也触发了保存事件会造成富文本取不到值。
fhadmin 代码原本取值方式:
//获取富文本内容 getContent: function (TYPE){ $.ajax({ xhrFields: { withCredentials: true }, type: "POST", url: httpurl+'ueditor/getContent', data: {TYPE:TYPE,tm:new Date().getTime()}, //这个TYPE这里的值是 email dataType:'json', async: false, success: function(data){ if(data.result == 'success'){ if(this.TYPE == '1'){ //这个TYPE是 1或者2 vm.CONTENT = data.pd.CONTENT2; //纯文本的 }else{ vm.CONTENT = data.pd.CONTENT; //带标签的 } if('' == vm.CONTENT){ $("#ueFrame").tips({ side:3, msg:'请输入内容', bg:'#AE81FF', time:3 }); }else{ vm.CONNULL = true; } }else{ $("#ueFrame").tips({ side:3, msg:'请输入内容', bg:'#AE81FF', time:3 }); } } }); },
//获取富文本内容 getContent: function (domId){ vm.CONTENT = $("#" + domId)[0].contentWindow.getContent() ; //通过jquery 查找iframe对象,之后通[0]方式转化为javascript对象,通过contentWindow 调用富文本中方法 vm.CONNULL = true; //减少代码改动量最加的一行代码,目的取到副本的值,才可以进行提交 },
/** * 向富文本赋值 * @param content */ function setContent(content){ ue.setContent(content); } /** * ueditor有标签文本 * @returns {string} */ function getContent() { var arr = []; arr.push(UE.getEditor('editor').getContent()); return arr.join(""); }
2.如果在添加时出现问题富文本内容不能及时清空,则错误回显。
问题的根本原因还是在于富文本只回显富文本表的值,而不能进行实时赋值造成的,所以经过上面方法改造之后,回显也发生了变化。
原本赋值方式:ueditor 页面加载时,请求后台ueditor 表,进行回显代码如下:
//实例化编辑器 var ue = UE.getEditor('editor'); ue.ready(function() { var fheight = getUrlKey('fheight'); ue.setHeight(fheight+0); TYPE = getUrlKey('TYPE'); var lt = location+''; serverurl = lt.replace('plugins/ueditor/index.html?TYPE='+TYPE+'&fheight='+fheight,''); getHcContent(TYPE); //通过ajax调用后台富文本表进行回显 })
//根据主键ID获取数据 getData: function(){ //发送 post 请求 $.ajax({ xhrFields: { withCredentials: true }, type: "POST", url: httpurl+'pooboohappy/goEdit', data: {POOBOOHAPPY_ID:this.POOBOOHAPPY_ID,tm:new Date().getTime()}, dataType:"json", success: function(data){ if("success" == data.result){ vm.pd = data.pd; //参数map vm.TYPE = data.pd.TYPE; $("#CHECKNAME").val(data.pd.CHECKNAME); //vm.updateContent(data.pd.CONTENT); console.log($("#CONTENT")[0].contentWindow); vm.setUeContent("CONTENT",data.pd.CONTENT); }else if ("exception" == data.result){ $("#showform").show(); $("#jiazai").hide(); } } }).done().fail(function(){ swal("登录失效!", "请求服务器无响应,稍后再试", "warning"); $("#showform").show(); $("#jiazai").hide(); }); }, setUeContent(domId,content){ $("#" + domId)[0].contentWindow.setUeContent() },
3.fhadmin项目中富文本打包后不支持图片,视频等媒体文件上传。
原始因为富文本中上传和下载的url调用的jsp 而在springboot同是不支持直接访问jsp的
试了很多很多次将jsp改变成controller的方式进行解决,但因为项目兼容问题,不能够很好的解决问题,索性只能将项目的打成war包,通过tomcat解析之后就可以直接访问jsp页面了
具体的改造方式:https://blog.csdn.net/Dongzeqi/article/details/124314444
4.改造之后启动方式发生了改变,所以需要在本地(idea)重新部署
1.idea集成tomcat:https://blog.csdn.net/web18484626332/article/details/126720060
5.部署项目
1.在项目的根目录(pom.xml位置) 打开dos命令弹窗,输入命令maven clean package,即可在target目录下找到一个后缀名为.war的文件
2.上传文件到服务器中tomcat目录下webapp目录
3.切换到bin目录,执行命令start.up即可
1. 本站所有资源来源于用户上传和网络,如有侵权请及时联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"mababa.xin",如遇到无法解压的请联系管理员!
码巴巴-优质代码创造者 » fhbootvfm-oa,fhadmin项目中,百度ueditor 富文本使用
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 一个高级程序员模板开发平台