HTML富文本编辑器Quill的使用_随笔

两种主题

toolbar的自定义：

quill取消了getHtml()的API，getContents()返回的是Delta对象，一种JSON数组，getText()返回文本域里对应字符串。

因平台需将用户编辑的格式传回后台生成邮件的正文，而邮件的正文是Html格式，通过查issue找到获取Html的方法： quill.container.firstChild.innerHTML

1.</?font[^><]*>这个只却掉font标签的, 保留除font以外的所有标签, 如<img><p>等等. 同样的你需要去掉其他标签, 只需要将里面的font换你要去掉的；

2.</?[^/?(img)|(p)][^><]*>这个保留(这里我写的保留了img, p这两个标签)你指定的标签,其他的(包括font)全去掉, 如果你还有其他的标签想保留, 直接在里面加一个 |(xxx)；

3.</?[a-zA-Z]+[^><]*>这个表达式可以去掉所有HTML的标签；

4.JAVA代码可以这样写:

public static String delTagsFContent(String content){

String patternTag = "</?[a-zA-Z]+[^><]*>"

String patternBlank = "(^\\s*)|(\\s*$)"

return content.replaceAll(patternTag, "").replaceAll(patternBlank, "")

}

清除所有默认样式的css代码：

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code，

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

初始化代码（清除CSS代码）：

ul,li{ padding:0margin:0list-style:none}

解析清除ul li样式代码：

相等于分别对ul和li设置padding:0margin:0list-style:none；

padding:0 —— 设置内补白（对象内间距）为0

margin:0 —— 设置对象外间距为0

list-style:none —— 去除自带无序圆点

HTML/javascript

引用外部文件中的js脚本,

页面内引用：

在一些HTML控件的事件属性中使用（一般事件为onxxx，如onmouseover,onclick,onchange）

<body onload="alert('loaded')"><input type="text" name="username" onclick="alert(this.value)" />在一些HTML控件的非事件属性中使用（注意：一定要加javascript:）

<a href="javascript:void(0)" onclick="alert(this.innerText)">my blog:http://blog.csdn.net/kimsoft</a>

欢迎分享，转载请注明来源：内存溢出

HTML富文本编辑器Quill的使用