最新公告
  • 欢迎您光临码巴巴,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • fhbootvfm-oa,fhadmin项目中,百度ueditor 富文本使用

    项目说明:

    在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;  //减少代码改动量最加的一行代码,目的取到副本的值,才可以进行提交
          },

     

    富文本index.html改造方法
    /**
     * 向富文本赋值
     * @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调用后台富文本表进行回显
      })
    改造后:需要再业务页面ajax调用回显成功函数中调用如下方法进行实时赋值:查看setUeContent方式的实现和调用
    //根据主键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介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    一个高级程序员模板开发平台
    问问管理员?

    发表评论

    • 22会员总数(位)
    • 60资源总数(个)
    • 3本周发布(个)
    • 0 今日发布(个)
    • 974稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    升级SVIP尊享更多特权立即升级