一键转载公众号文章到自己的网站

　　一键转载公众号文章到自己的网站

　　上周在知识星球中看到有人在为转载公众号文章到自己的网站这件事而苦恼（他的网站流量还不错）。正好最近我在研究富文本编辑器这块，我就思考并尝试解决这个问题。最终我做出来的工具是这样的。输入公众号文章地址，就可获取文章富文本内容。然后通过手动复制完成文章在自己网站发布。

　　开始

　　只有你想不到，没有你做不到。这句话确实很有道理！

　　程序员的第一思维不是创造而是拿来主义。谷歌搜索后，锁定到一篇“CSDN的博客转移到静态博客网站”博文，我的思路思路就是基于这篇文章来的。这篇博文的地址：

　　100%的模仿是最好的学习方式。通读博文3遍，编译运行源码，并通过debug阅读代码，我基本掌握了他的思路。

　　动手能力。梳理我的思路，借鉴别人的代码，完成我自己的代码实现。

　　实战难点

　　抓取公众号文章内容体的html元素（#img-content）

　　下载文章中的图片，替换原始图片链接（为什么要下载图片？是因为其他地方引用公众号的图片会显示“未经允许不可引用”）

　　技术栈

　　微服务Spring Boot

　　富文本编辑器ckeditor

　　Html解析和操作工具Jsoup

　　Jquery

　　代码实现

　　前台代码

　　 html源码转化为富文本 抓取的文章地址:     获取文章内容   源码切换 var editor1 = CKEDITOR.replace('editor1', { extraAllowedContent: 'div', height: 460 }); editor1.on('instanceReady', function() { this.dataProcessor.writer.selfClosingEnd = '>'; var dtd = CKEDITOR.dtd; for (var e in CKEDITOR.tools.extend({}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent)) { this.dataProcessor.writer.setRules(e, { indent: true, breakBeforeOpen: true, breakAfterOpen: true, breakBeforeClose: true, breakAfterClose: true }); } $("a.cke_button_on").css("display:none"); this.setMode('source'); }); $().ready(function(){ $("#showHtml").click(function(){ $("#cke_33").click(); }); $("#getContentBtn").click(function(){ var srcUrl = $("#input1").val(); $.ajax({ type:'post', url: '/html/rich_text', data: srcUrl, contentType: "application/json", dataType:"json", error : function() { alert('smx失败 '); }, success: function(result){ console.log(result); $("#cke_1_contents textarea").val(result.data); $("#cke_33").click(); } }); }); });

　　后台pom文件内容

　　 org.jsoup jsoup 1.11.2 org.apache.httpcomponents httpclient 4.5.4 org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-test test org.springframework.boot spring-boot-starter-logging junit junit 4.12 org.apache.commons commons-lang3 3.8.1

　　后台业务代码

　　 @PostMapping("html/rich_text") @ResponseBody public Map html2RichText(@RequestBody String jsonStr){ Map result = new HashMap(); result.put("code", 200); String srcUrl = jsonStr; if(StringUtils.hasText(srcUrl)){ Document document= CorePaser.getDocument(srcUrl); //例如文章：https://mp.weixin.qq.com/s/GoIZdwt5gJje-ZWMBUoBPw StringBuilder stringBuilder = new StringBuilder(); List elementList = document.select("#img-content"); stringBuilder.append(elementList.toString()); CorePaser corePaser = new CorePaser(filePath, filePathStart); if(!CollectionUtils.isEmpty(elementList)){ elementList.forEach(e-> corePaser.downloadImg(e)); } //替换jsoup自动src改成data-src属性 String articleContent = stringBuilder.toString(); Map keyValueMap = FileUtil.keyValueMap; for(String url: keyValueMap.keySet()){ articleContent = StringUtils.replace(articleContent,url, keyValueMap.get(url)); } articleContent = articleContent.replace("data-src", "src"); result.put("data", articleContent); } return result; }

　　下载网络图片到服务器

　　 public class FileUtil { private static String imgFix = ".jpg"; public static Map keyValueMap = new HashMap(); public static String getPicture(String url, String filePath, String filePathStart) { String fileName = UUID.randomUUID().toString().replace("-",""); File imgFileDir = new File(filePath); if(!imgFileDir.exists()){ imgFileDir.mkdirs(); } String fullFilePath = filePath + fileName + imgFix ; if (!url.equals("")) { URL ur; BufferedInputStream in; ByteArrayOutputStream outStream; try { ur = new URL(url); in = new BufferedInputStream(ur.openStream()); outStream = new ByteArrayOutputStream(); byte[] buf = new byte[1024]; int length = 0; while ((length = in.read(buf, 0, buf.length)) != -1) { outStream.write(buf, 0, length); } byte[] bytes = outStream.toByteArray(); File fileOut = new File(fullFilePath); FileOutputStream op = new FileOutputStream(fileOut); op.write(bytes); op.close(); in.close(); outStream.close(); } catch (Exception e) { e.printStackTrace(); } keyValueMap.put(url, filePathStart + fileName + imgFix); } System.out.println("result data-src:" + filePathStart + fileName + imgFix); return filePathStart + fileName + imgFix; } }

　　项目代码结果图如下：

　　线工具地址

　　支持网站：

　　在线工具地址：

　　源码地址：

　　结语

　　之前总是听说销售们讲：越努力越幸运！其实这句话适用于任何行业。两个月前公众号排版让我很头疼，上个月就发现了很多排版工具；上个月通道同事说富文本编辑器，在简书上就发现了好多文章讲开源文本编辑器；上周就碰到了知识星球有人提问转载文章的这个需求，然后我就将排版与富文本编辑器联系起来，貌似一切事情都是有联系似的，层层递进。

　　再发散一下，机会是留给有准备的人的！认知高实践能力低是好高骛远。实践能力高认知能力低叫踏实肯干。我们要做一个实践和认知两条腿前行的人。

　　分享只是一种习惯，和你交朋友才是我的真实目的！

　　你点的每个在看，我都认真当成了喜欢！