分享文章:一键转载公众号文章到自己的网站
优采云 发布时间: 2022-11-17 00:17分享文章:一键转载公众号文章到自己的网站
上周在知识星球,看到有人发愁把公众号文章转发到自己的网站(他的网站流量还不错)。正好最近在研究富文本编辑器,于是思考并尝试解决这个问题。最后我做的工具是这样的。输入公众号文章地址,即可获取文章富文本内容。然后文章通过手动复制网站自己发布。
开始
只有你想不到,没有你做不到的。这句话确实很有道理!
程序员首先想到的不是创造而是使用主义。google了一下,发现了一篇博文《CSDN博客转静态博客网站》。我的想法是基于这个文章。本博文地址:
100%的模仿是最好的学习方式。看了3遍博文,编译运行源码,调试看代码,基本掌握了他的思路。
动手能力。整理一下自己的思路,借鉴别人的代码,完成自己的代码实现。
实战难点
抓取公众号内容正文的html元素(#img-content)文章
下载文章中的图片并替换原图链接(为什么要下载图片?因为在其他地方引用公众号的图片会显示“未经许可无法引用”)
技术栈
微服务 Spring Boot
富文本编辑器ckeditor
html解析和操作工具Jsoup
查询
代码
前台代码
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; } }
项目代码结果图如下:
线工具地址
支持网站:
在线工具地址:
来源地址:
结语
以前总听业务员说:越努力越幸运!其实这句话适用于任何行业。两个月前公众号的排版让我很头疼,上个月找了很多排版工具;上个月频道里的同事讲富文本编辑器,在简书文章讲开源文本编辑的时候发现了很多 上周遇到知识星球有人需要转载文章,然后我把排版和富文本编辑器连接起来了。似乎一切都是相互联系的,渐进的。
再次发散,机会是留给有准备的人的!认知高,实践能力低,野心太大。实践能力高,认知能力低,意味着努力。我们要做一个有实践有认知的两条腿走路的人。
分享只是一种习惯,和你交朋友才是我真正的目的!
您订购的所有商品都在观看,我非常喜欢!
最新版本:「一键保存微信文章」回归安卓端
《一键保存微信文章》返回安卓端
原创大象
印象笔记
yxbj100
这里有超过 2 亿人喜爱的 Evernote!帮助个人和团队保存高价值信息、组织知识、有效协作;手机、电脑、平板,多终端一键同步!让印象笔记成为你的“第二大脑”,随时随地保存灵感,生活有序,工作高效!
发表于
收录 在集合中
Android端文章微信公众号文章有Clipping®新路径!
你最喜欢的“一键保存微信文章”:使用安卓最新版微信发布的“更多打开方式”功能,选择印象笔记小程序,永久保存微信文章!
脚步:
1、点击公众号文章右上角的三点“···”,滑动至底栏最右侧,选择“更多打开方式”;
2. 选择“保存到印象笔记”以保存文章。
观看视频,操作过程更直观
❗️如果在“更多打开方式”中没有找到“保存到印象笔记”,可以长按下方小程序代码进入“印象笔记”微信小程序,然后按照以上步骤重试。(*请确保安卓微信已更新至最新版本)
▲ 印象笔记小程序
还可以使用“印象笔记小程序”的“剪辑文章”功能,粘贴文章链接快速保存内容,iOS和Android均支持!
此外,你还可以使用“印象笔记小程序”创建新笔记,快速记录灵感,保存好友分享的笔记,或一键将微信聊天文件批量保存至印象笔记。这么多实用功能你还没有上手吗?
扫描下方小程序代码,使用“印象笔记小程序”,立即采集你喜欢的文章吧!
▲ 印象笔记小程序