关于解决UEditor源码模式下提交保存样式 样式是乱的

标签：UEditor htmlString return 样式 element 源码 const 类名

 

         

 

 

 

问题1 这个项目的UEditor是用来编辑页面的  每个页面又有不同的模块  然而业务部门有时候是会直接从别的模块直接复制源代码然后在可视模式下直接修改以下a链接啥的 然后问题来了

因为是复制过来的 然后会导致 类名重复 导致样式错乱的问题

 

问题2 直接点击提交的话会产生很多莫名其妙的空格  例如以下这种 

 

 

 

 

 

然后发现导致这种的问题原因是在源码模式下提交的字符串是没经过压缩处理的 然后这些空白的地方会替换成空格 

先说 问题1 的处理方法 

直接在类名后面添加随机字符串 然后可以避免类名重复问题  为了避免多次复制造成类名过长 如果已经是添加过的 删除了重新添加

我们用的是Vue 在返回富文本内容之前先处理一次

 

 

 先是获取style标签里面的类

            getStyleClass (htmlString) {
                const classList = htmlString.match(/[^.]+(?={)/g) || [] //用正则获取类名
                let value = classList.map((item) => {
                    const index = item.indexOf(':')
                    if (index !== -1) return item.substring(0, index) //如果类名有伪类 去掉伪类
                    return item.trim()
                })
                return [...new Set(value)] // 去重 返回
            },

然后修改富文本中的类名

 setElementClass (htmlString, classList) {
                if (!classList.length) return htmlString
                classList.forEach(element => {
                    if (htmlString.includes(element)) {
                        // 匹配<style>里面的类
                        const styleRegex = new RegExp('\\.' + element.replace(/[:.]/g, '\\$&') + '(\\W)', 'g')
                        // 匹配 class里面的类名
                        const classRegex = new RegExp(`class="([^"]*)${element}([^"]*)"`, 'g')
                        const str = this.randomString(4)//随机字符串函数 
                         // 如果是类名已经经过一次处理的 删除_xxxx 重新生成 避免类名过长
                        if (element.indexOf('_') !== -1) element = element.substring(0, element.indexOf('_'))
                        htmlString = htmlString.replaceAll(classRegex, `class="$1${element}_${str}$2"`).replaceAll(styleRegex, `.${element}_${str}$1`)
                    }
                })
                return htmlString
            },

　　然后就解决了

然后 问题2 其实也简单 setElementClass返回值之前 先用正则处理一下空格再返回  主要是去UEditor源码找这段正则找的我头疼  

 

htmlString = htmlString.replace(new RegExp('[\\r\\t\\n ]*</?(\\w+)\\s*(?:[^>]*)>', 'g'), function (a, b) {
    return a.replace(/(^[\n\r\t ]*)|([\n\r\t ]*$)/g, '')
})

 

 

 

 然后问题基本解决了  其实UEditor问题真挺多的

突然想起来之前还遇到过的一个问题 也是源代码复制过来的 然后在可视区修改 比如修改a链接啥的 因为修改的时候会重新生成一个a链接 会把旧的a链接覆盖

解决方法 Link文件 的link.html 获取旧的class  并且在下面的 handleDialogOk 继承旧的属性

 

 

 

 

标签：UEditor,htmlString,return,样式,element,源码,const,类名
From： https://www.cnblogs.com/xiduoshi/p/17174509.html