uediter灵活限制内容长度超长不可编辑与前端不统计空格后台html标签过滤器的操作

最近工作中遇到一个比较古老的需求，在jsp页面的uediter中对输入的信息进行长度限制。

这个uediter是内嵌在jsp页面的，同一个页面多个功能同时使用，现在要根据不同的功能限制不同的字数。

研究后了解到，控制字数范围的其实是在一个全局配置文件uediter.all.js中：

这个maximumWords:10000,参数

function setCount(editor,ui) {
                editor.setOpt({
                    wordCount:true,
                    maximumWords:10000,
                    wordCountMsg:editor.options.wordCountMsg || editor.getLang("wordCountMsg"),
                    wordOverFlowMsg:editor.options.wordOverFlowMsg || editor.getLang("wordOverFlowMsg")
                });
                var opt = editor.options,
                    max = opt.maximumWords,
                    msg = opt.wordCountMsg ,
                    errMsg = opt.wordOverFlowMsg,
                    countDom = ui.getDom('wordcount');
                if (!opt.wordCount) {
                    return;
                }
                var count = editor.getContentLength(true);
                if (count > max) {
                    // countDom.innerHTML = errMsg;
                    // editor.fireEvent("wordcountoverflow");
                    var content = editor.getContentTxt();
                    editor.setContent(content.substring(0,max));
                    editor.focus(true);
                } else {
                    countDom.innerHTML = msg.replace("{#leave}", max - count).replace("{#count}", count);
                }
            }

如果在这里改了，则会对全局有作用，如果需要定制化的设置，我这里的解决方案是在jsp页面初始化时通过页面对某个参数进行个性化设置，页面操作代码如下：

 ${requestScope.content}
                            <%if (ssDepcode.equals("1")){%>
				             
                                 <%}else {%>
                            
                            <%}%>

这里我有个业务判断，来给字数限制的maximumWords参数赋值，业务可以暂时忽略，只看这个页面对参数赋值方式即可，关键代码就是script标签中的这些：

 var editor = new UE.ui.Editor({initialFrameWidth:780,wordCount:true,maximumWords:200});
                                editor.render("content");

到这里页面编辑器的字数限制可以实现灵活限制了。

但是我又遇到一个问题，页面编辑器在达到字数上限后只会提示不会阻拦，提交仍然可以传递到后台，这样便有了两种解决方式：

1.后台校验判断（不推荐，繁琐，增加代码量）：

前端编辑器传递到后台的内容是一堆加了各种html标签的字符串，想要执行字段数量的控制，就需要过滤掉html标签，我这里倒是可以提供一个字符过滤器类，可以实现绝大部分的内容过滤，大家可以参考下：

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.safety.Whitelist;

/**
 * Created with IntelliJ IDEA.
 * html字符过滤
 */
public class JsoupUtil {
    /**
     * 使用自带的 basicWithImages 白名单
     * 允许的便签有 a,b,blockquote,br,cite,code,dd,dl,dt,em,i,li,ol,p,pre,q,small,span,strike,strong,sub,sup,u,ul,img
     * 以及 a 标签的 href,img 标签的 src,align,alt,height,width,title 属性
     */
    private static final Whitelist whitelist = Whitelist.relaxed();
    /** 配置过滤化参数, 不对代码进行格式化 */
    private static final Document.OutputSettings outputSettings = new Document.OutputSettings().prettyPrint(false);
    static {
        // 富文本编辑时一些样式是使用 style 来进行实现的
        // 比如红色字体 style="color:red;"
        // 所以需要给所有标签添加 style 属性
        whitelist.addAttributes(":all", "style");
        whitelist.addAttributes("a", "target");
    }
    public static String clean(String content) {
        return Jsoup.clean(content, "", whitelist, outputSettings);
    }
}

调用clean方法可以实现初步的过滤，但是实测后发现一些占位符是过滤不掉的比如 ，空格等，所以不是那么的干净，需要代码继续过滤或者在过滤条件中添加正则表达式来缩小过滤粒度，总之比较繁琐。

2.页面校验后限制输入：

具体的就是在全局的这个uediter.all.js变量中操作：

（1）在上述全局方法function setCount(editor,ui)中注释掉两行代码：

//countDom.innerHTML = errMsg;
// editor.fireEvent("wordcountoverflow");

fireEvent的wordcountoverflow大概是指在，wordcountoverflow字数超限时这个事件触发了fireEvent这个属性，但是这个属性并不是限制继续输入的，本人前端二把刀，目前理解到此，如有大神希望给展开讲讲。

（2）在注释的代码下添加如下代码：

var content = editor.getContentTxt();
editor.setContent(content.substring(0,max));
editor.focus(true);

这样可以实现对输入内容的字符限制了。

这里我面对的需求是统计除去空格的输入字数，所以这时的修改是不够的，还需要进一步添加校验，也很简单，在获取内容长度getContentLength: function (ingoneHtml, tagNames)这个方法中修改：

添加个喜闻乐见的去空格的方法，.trim()。

一切就绪去前台运行就实现效果了，但是在使用时注意修改的为js文件，修改后会因为缓存原因不生效，需要无缓存的刷新下。