富文本在生成到文档的过程中,vue-quill-editor富文本的样式在文档中是不生效的,因为vue-quill-editor保存的时候只会带着class的样式名称,并不会带着样式保存,所以在生成文档的时候,还需要将内容进行转化,将样式更新。如:class=“ql-align-center” 需要更新成style=“text-align: center”,
下面只是我们系统用到的需要转化的样式,其他的样式根据自己的系统加入。
public class HtmlEditorStyle {
private static final Pattern CENTER = Pattern.compile("class=\"ql-align-center\"");//样式居中
private static final Pattern RIGHT = Pattern.compile("class=\"ql-align-right\"");//样式靠右
private static final Pattern JUSTIFY = Pattern.compile("class=\"ql-align-justify\"");//样式
private static final Pattern PRE = Pattern.compile("class=\"ql-syntax\"");//预格式化
private static final Pattern SMALL = Pattern.compile("class=\"ql-size-small\"");//10px
private static final Pattern LARGE = Pattern.compile("class=\"ql-size-large\"");//18px
private static final Pattern HUGE = Pattern.compile("class=\"ql-size-huge\"");//32px
/**
* 替换样式
*/
public static String replaceStyle(String html){
html = regexReplace(CENTER, "style=\"text-align: center\"", html);
html = regexReplace(RIGHT, "style=\"text-align: right\"", html);
html = regexReplace(JUSTIFY, "style=\"text-align: justify\"", html);
html = regexReplace(PRE, "style=\"tbackground-color: #23241f;color: #f8f8f2;overflow: visible\"", html);
html = regexReplace(SMALL, "style=\"font-size: 0.75em\"", html);
html = regexReplace(LARGE, "style=\"font-size: 1.5em\"", html);
html = regexReplace(HUGE, "style=\"font-size: 2.5em\"", html);
return html;
}
/**
* 替换标签并返回
* regex_pattern 正则表达式
* replacement要替换成什么字符
* s需要替换的字符
*/
private static String regexReplace(final Pattern regex_pattern, final String replacement, final String s) {
Matcher m = regex_pattern.matcher(s);
return m.replaceAll(replacement);
}
}