小程序rich-text组件,解析html——厦门小程序开发,泉州小程序开发,漳州小程序开发

  1. 新闻资讯
  2. 技术百科
公司新闻 案例分享 技术百科 行业动态

小程序rich-text组件——html解析

来源:奇站网络 浏览量:2687 发布日期: 2018-03-08

基于java开发小程序接口,后台使用ueditor编辑图文内容。
小程序如何显示富文本内容呢?

一、直接传入html

nodes 属性推荐使用 Array 类型,由于组件会将 String 类型转换为 Array 类型,因而性能会有所下降

直接将html内容传入是可以,但是无论从性能还是显示样式来说都会有问题,所以不推荐这样做。

二、wxParse

网上现在较多的解决方法都是在小程序里引入wxParse插件来解决。
考虑到引入额外的插件会使得程序变大,所以就没有详细研究,有兴趣的可以自行百度。

三、解析成json

  1. public class RichTextParse {
  2. public static List<Object> parse(String body) throws DocumentException {
  3. List<Object> nodes = new ArrayList<Object>();
  4. Document doc = null;
  5. doc = DocumentHelper.parseText("<xml>" + body + "</xml>"); // 将字符串转为XML
  6. Element rootElt = doc.getRootElement(); // 获取根节点
  7. List<Element> list = rootElt.elements();// 获取根节点下所有节点
  8. for (Element element : list) { // 遍历节点
  9. RichTextNode node = new RichTextNode();
  10. node.setName(element.getName());
  11. // attrs
  12. for (Iterator it = element.attributeIterator(); it.hasNext();) {
  13. Attribute attr = (Attribute) it.next();
  14. node.getAttrs().put(attr.getName(), attr.getText());
  15. }
  16. // has children
  17. if (!element.isTextOnly()) {
  18. loopElement(node, element);
  19. } else {
  20. RichTextNodeText nodeText = new RichTextNodeText();
  21. nodeText.setType("text");
  22. nodeText.setText(element.getText());
  23. node.getChildren().add(nodeText);
  24. }
  25. // add to nodes
  26. nodes.add(node);
  27. }
  28. return nodes;
  29. }
  30. private static void loopElement(RichTextNode nodeParent, Element elementParent) {
  31. List<Element> eles = elementParent.elements();
  32. for (Element element : eles) {
  33. RichTextNode node = new RichTextNode();
  34. node.setName(element.getName());
  35. // attrs
  36. for (Iterator it = element.attributeIterator(); it.hasNext();) {
  37. Attribute attr = (Attribute) it.next();
  38. node.getAttrs().put(attr.getName(), attr.getText());
  39. }
  40. //
  41. switch (element.getName()) {
  42. case "img":
  43. node.getAttrs().put("style", "max-width:100%;height:auto;");
  44. break;
  45. default:
  46. break;
  47. }
  48. // has children
  49. if (!element.isTextOnly()) {
  50. loopElement(node, element);
  51. } else {
  52. RichTextNodeText nodeText = new RichTextNodeText();
  53. nodeText.setType("text");
  54. nodeText.setText(element.getText());
  55. node.getChildren().add(nodeText);
  56. }
  57. // add to parent node
  58. nodeParent.getChildren().add(node);
  59. }
  60. }
  61. }
  1. public class RichTextNode {
  2. private String name;
  3. private HashMap<String, String> attrs;
  4. private List<Object> children;
  5. public RichTextNode() {
  6. super();
  7. this.attrs = new HashMap<String, String>();
  8. this.children = new ArrayList<Object>();
  9. }
  10. public String getName() {
  11. return name;
  12. }
  13. public void setName(String name) {
  14. this.name = name;
  15. }
  16. public HashMap<String, String> getAttrs() {
  17. return attrs;
  18. }
  19. public void setAttrs(HashMap<String, String> attrs) {
  20. this.attrs = attrs;
  21. }
  22. public List<Object> getChildren() {
  23. return children;
  24. }
  25. public void setChildren(List<Object> children) {
  26. this.children = children;
  27. }
  28. }
  1. public class RichTextNodeText {
  2. private String type;
  3. private String text;
  4. public String getType() {
  5. return type;
  6. }
  7. public void setType(String type) {
  8. this.type = type;
  9. }
  10. public String getText() {
  11. return text;
  12. }
  13. public void setText(String text) {
  14. this.text = text;
  15. }
  16. }

这里测试了简单的图文编辑没有问题(html层级只有2层),暂未测试更复杂的多层嵌套的html(例如直接复制网页内容粘贴过来)。

后续发现将html当成简单xml来解析只能处理简单的内容,最后改成jsoup来解析
http://www.qizhan100.com/article_90.html

标签:

厦门奇站网络科技有限公司

电话:13313868605

QQ:3413772931

地址:厦门集美区软件园三期

网站地图


                    扫一扫加我咨询