富文本

富文本

复制内容去掉样式

config配置

    //粘贴只保留标签，去除标签所有属性
        ,retainOnlyLabelPasted: true
    ,pasteplain:true  //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
    //纯文本粘贴模式下的过滤规则
    ,'filterTxtRules' : function(){
    	function transP(node){
    	      node.tagName = 'p';
    	      node.setStyle();
    	}
        return {
        	//直接删除及其字节点内容
            '-' : 'script style object iframe embed input select',
            'p': {$:{}},
            'br':{$:{}},
            'div':{$:{}},
            'li':{$:{}},
            'caption':{$:{}},
            'th':{$:{}},
            'tr':{$:{}},
            'h1':{$:{}},'h2':{$:{}},'h3':{$:{}},'h4':{$:{}},'h5':{$:{}},'h6':{$:{}},
            'td':function(node){
                //没有内容的td直接删掉
                var txt = !!node.innerText();
                if(txt){
                    node.parentNode.insertAfter(UE.uNode.createText('    '),node);
                }
                node.parentNode.removeChild(node,node.innerText())
            }
        }
    }()

富文本图片上传

在config.js设置图片上传路径

var URL2 = URL.substr(0,URL.length - 16);//项目路径 
//为编辑器实例添加一个路径，这个不能被注释
UMEDITOR_HOME_URL : URL

//图片上传配置区
    ,imageUrl:URL2 +"system/ueditor/img"              //图片上传提交地址
        ,imagePath:URL2                     //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
            ,imageFieldName:"upfile"                   //图片数据的key,若此处修改，需要在后台对应文件修改对应参数

写一个接受的控制层

@JMRouterMapping(url = UploadController.url)
public class UploadController extends Controller {

	public static final String url = "/system/ueditor";

	/**
	 * 
	 * @date 2019年7月31日 下午7:10:11
	 * @author JaysonLee
	 * @Description: 富文本编辑器上传图片
	 * @reqMethod post
	 * @paramter
	 * @pDescription	
	 *
	 */
	public void img() {
		String fileUrl = JMUploadKit.fileUpload(this,"upfile","ueditor");
		JMResult.success(this, fileUrl,"上传成功");
	}

}

在\umeditor\dialogs\image下的image.js

//修改返回参的获取

//var r = this.contentWindow.document.body.innerHTML;
//修改为
var r = this.contentWindow.document.body.innerText; 

坑点

1、富文本编辑后，保存没有样式效果

问题：在富文本框编辑文字的字号、下划线等，保存提交数据，样式被过滤

分析：通过输出参数，可以看见前端上传参数是包括样式的，而后端getPara（）得到的参数值是没有样式的，查看getPara（）得知，里面有个html的白名单，所以样式被过滤了。

解决：通过getModel（）得到的参数值没有被过滤，可使用这种方式；另一种方式修改白名单。

2、wps与Microsoft Word复制内容到富文本，样式不一致

问题：在wps与Microsoft Word复制内容到富文本，保存时wps样式发生变化，导致出现个别字大小不一致

分析：复制的内容在富文本里，通过查看元素发现，wps与Microsoft Word使用不同的html，并且保存wps复制的内容时，某些地方缺少分号“;”，最终导致出现个别字大小不一致

解决：由于不清楚在保存时富文本怎么对样式操作，所以这个问题在后端处理，后端接收到富文本的值时，对值进行字符串替换处理

model.getContent().replaceAll("pxfont-family", "px;font-family")