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

优采云 发布时间: 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均支持!

  此外,你还可以使用“印象笔记小程序”创建新笔记,快速记录灵感,保存好友分享的笔记,或一键将微信聊天文件批量保存至印象笔记。这么多实用功能你还没有上手吗?

  扫描下方小程序代码,使用“印象笔记小程序”,立即采集你喜欢的文章吧!

  ▲ 印象笔记小程序

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线