renciy/code-box
1
0
Fork 0
mirror of https://github.com/027xiguapi/code-box.git synced 2026-09-25 08:38:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

微信公众号、51cto、博客园 增加打印按钮

Browse Source
This commit is contained in:
fzk
2025-01-06 14:39:14 +08:00
parent e17c785f96
commit 694ebc6b4f
6 changed files with 129 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
component/customDomSelector/index.tsx
-1
View File
@@ -19,7 +19,6 @@ export default function CustomDomSelector() {
const isSelect = useRef(false)
const downloadType = useRef("")
const [content, setContent] = useContent()
const [validTime] = useStorage("app-validTime", "1730390400")
const selectorRef = useRef<HTMLElement | null>(null)
const tooltipRef = useRef<HTMLElement | null>(null)
contents/51cto.tsx
+28 -13
View File
@@ -13,8 +13,8 @@ import { useStorage } from "@plasmohq/storage/hook"
import { addCss, i18n, saveHtml, saveMarkdown } from "~tools"
import useCssCodeHook from "~utils/cssCodeHook"
import { savePdf } from "~utils/downloadPdf"
import { useContent } from "~utils/editMarkdownHook"
import { Print } from "~utils/print"
import Turndown from "~utils/turndown"
export const config: PlasmoCSConfig = {
@@ -41,7 +41,7 @@ export const getStyle: PlasmoGetStyle = () => {
cursor: pointer;
align-items: center;
color: #1e80ff;
width: 60px;
width: 90px;
background: #fff;
border-radius: 5px;
justify-content: space-between;
@@ -54,7 +54,7 @@ export const getStyle: PlasmoGetStyle = () => {
}
const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
const [showTag, setShowTag] = useStorage<boolean>("51cto-showTag")
const [showTag, setShowTag] = useStorage<boolean>("51cto-showTag", true)
const [cssCode, runCss] = useCssCodeHook("51cto")
const [copyCode] = useStorage<boolean>("51cto-copyCode")
const [closeLoginModal] = useStorage<boolean>("51cto-closeLoginModal")
@@ -75,7 +75,7 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
res.send({ isShow: true })
}
if (req.name == "51cto-editMarkdown") {
handleEdit()
editMarkdown()
}
if (req.name == "51cto-downloadMarkdown") {
downloadMarkdown()
@@ -84,8 +84,7 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
downloadHtml()
}
if (req.name == "51cto-downloadPdf") {
var article = document.querySelector<HTMLElement>("article")
savePdf(article, articleTitle)
downloadPdf()
}
})
@@ -236,26 +235,41 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
addCss(css)
}
function downloadPdf() {
var article = document.querySelector<HTMLElement>("article .article-detail")
if (article) {
Print.print(article, { title: articleTitle })
.then(() => console.log("Printing complete"))
.catch((error) => console.error("Printing failed:", error))
}
}
function downloadMarkdown() {
const html = document.querySelector("article")
const html = document.querySelector<HTMLElement>("article .article-detail")
const markdown = turndownService.turndown(html)
saveMarkdown(markdown, articleTitle)
}
function downloadHtml() {
const dom = document.querySelector("article")
const dom = document.querySelector<HTMLElement>("article .article-detail")
saveHtml(dom, articleTitle)
}
function handleEdit() {
const dom = document.querySelector("article")
function editMarkdown() {
const dom = document.querySelector<HTMLElement>("article .article-detail")
setContent(dom)
}
function handleEdit() {
editMarkdown()
}
function handleDownload() {
const html = document.querySelector("article")
const markdown = turndownService.turndown(html)
saveMarkdown(markdown, articleTitle)
downloadMarkdown()
}
function handlePrint() {
downloadPdf()
}
function closeTag() {
@@ -266,6 +280,7 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
<div className="codebox-tagBtn">
<div onClick={handleEdit}>{i18n("edit")}</div>
<div onClick={handleDownload}>{i18n("download")}</div>
<div onClick={handlePrint}>{i18n("print")}</div>
</div>
) : (
<></>
contents/cnblogs.tsx
+79 -11
View File
@@ -1,14 +1,20 @@
import type { PlasmoCSConfig } from "plasmo"
import { useEffect, useRef } from "react"
import type {
PlasmoCSConfig,
PlasmoCSUIProps,
PlasmoGetOverlayAnchor,
PlasmoGetShadowHostId,
PlasmoGetStyle
} from "plasmo"
import { useEffect, useRef, type FC } from "react"
import { v4 as uuidv4 } from "uuid"
import { useMessage } from "@plasmohq/messaging/hook"
import { useStorage } from "@plasmohq/storage/hook"
import { saveHtml, saveMarkdown } from "~tools"
import { i18n, saveHtml, saveMarkdown } from "~tools"
import useCssCodeHook from "~utils/cssCodeHook"
import { savePdf } from "~utils/downloadPdf"
import { useContent } from "~utils/editMarkdownHook"
import { Print } from "~utils/print"
import Turndown from "~utils/turndown"
export const config: PlasmoCSConfig = {
@@ -21,7 +27,35 @@ const articleTitle = document
.querySelector<HTMLElement>("head title")
.innerText.trim()
export default function cnblogs() {
const HOST_ID = "codebox-cnblogs"
export const getShadowHostId: PlasmoGetShadowHostId = () => HOST_ID
export const getOverlayAnchor: PlasmoGetOverlayAnchor = async () =>
document.querySelector("#post_detail .postTitle")
export const getStyle: PlasmoGetStyle = () => {
const style = document.createElement("style")
style.textContent = `
.codebox-tagBtn {
height: 28px;
display: flex;
cursor: pointer;
align-items: center;
color: #1e80ff;
width: 90px;
background: #fff;
border-radius: 5px;
justify-content: space-between;
padding: 0 8px;
margin-top: -20px;
font-size: 14px;
}
`
return style
}
const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
const [showTag, setShowTag] = useStorage<boolean>("cnblogs-showTag", true)
const [cssCode, runCss] = useCssCodeHook("cnblogs")
const [copyCode] = useStorage<boolean>("cnblogs-copyCode")
const [history, setHistory] = useStorage<any[]>("codebox-history")
@@ -47,8 +81,7 @@ export default function cnblogs() {
downloadHtml()
}
if (req.name == "cnblogs-downloadPdf") {
var article = document.querySelector<HTMLElement>("article")
savePdf(article, articleTitle)
downloadPdf()
}
})
@@ -126,21 +159,56 @@ export default function cnblogs() {
})
}
function downloadPdf() {
var article = document.querySelector<HTMLElement>("#post_detail .post")
if (article) {
Print.print(article, { title: articleTitle })
.then(() => console.log("Printing complete"))
.catch((error) => console.error("Printing failed:", error))
}
}
function editMarkdown() {
const dom = document.querySelector("#post_detail")
const dom = document.querySelector<HTMLElement>("#post_detail")
setContent(dom)
}
function downloadMarkdown() {
const html = document.querySelector("#post_detail")
const html = document.querySelector<HTMLElement>("#post_detail")
const markdown = turndownService.turndown(html)
saveMarkdown(markdown, articleTitle)
}
function downloadHtml() {
const dom = document.querySelector("#post_detail")
const dom = document.querySelector("#post_detail .post")
saveHtml(dom, articleTitle)
}
return <div style={{ display: "none" }}></div>
function handleEdit() {
editMarkdown()
}
function handleDownload() {
downloadMarkdown()
}
function handlePrint() {
downloadPdf()
}
function closeTag() {
setShowTag(false)
}
return showTag ? (
<div className="codebox-tagBtn">
<div onClick={handleEdit}>{i18n("edit")}</div>
<div onClick={handleDownload}>{i18n("download")}</div>
<div onClick={handlePrint}>{i18n("print")}</div>
</div>
) : (
<></>
)
}
export default PlasmoOverlay
contents/weixin.tsx
+18 -5
View File
@@ -14,8 +14,8 @@ import { useStorage } from "@plasmohq/storage/dist/hook"
import { i18n, saveHtml, saveMarkdown } from "~tools"
import useCssCodeHook from "~utils/cssCodeHook"
import { savePdf } from "~utils/downloadPdf"
import { useContent } from "~utils/editMarkdownHook"
import { Print } from "~utils/print"
import Turndown from "~utils/turndown"
export const config: PlasmoCSConfig = {
@@ -42,7 +42,7 @@ export const getStyle: PlasmoGetStyle = () => {
cursor: pointer;
align-items: center;
color: #1e80ff;
width: 66px;
width: 90px;
background: transparent;
border-radius: 5px;
justify-content: space-between;
@@ -55,7 +55,7 @@ export const getStyle: PlasmoGetStyle = () => {
}
const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
const [showTag, setShowTag] = useStorage<boolean>("weixin-showTag")
const [showTag, setShowTag] = useStorage<boolean>("weixin-showTag", true)
const [cssCode, runCss] = useCssCodeHook("weixin")
const [history, setHistory] = useStorage<any[]>("codebox-history")
const [content, setContent] = useContent()
@@ -74,8 +74,7 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
downloadHtml()
}
if (req.name == "weixin-downloadPdf") {
var article = document.querySelector<HTMLElement>("#img-content")
savePdf(article, articleTitle)
downloadPdf()
}
if (req.name == "weixin-downloadImages") {
await downloadImages(req.body?.onProgress)
@@ -140,6 +139,15 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
saveAs(content, `${title}-images.zip`)
}
function downloadPdf() {
var article = document.querySelector<HTMLElement>("#img-content")
if (article) {
Print.print(article, { title: articleTitle })
.then(() => console.log("Printing complete"))
.catch((error) => console.error("Printing failed:", error))
}
}
function editMarkdown() {
const dom = document.querySelector("#img-content")
setContent(dom)
@@ -166,6 +174,10 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
saveMarkdown(markdown, articleTitle)
}
function handlePrint() {
downloadPdf()
}
function closeTag() {
setShowTag(false)
}
@@ -174,6 +186,7 @@ const PlasmoOverlay: FC<PlasmoCSUIProps> = ({ anchor }) => {
<div className="codebox-tagBtn">
<div onClick={handleEdit}>{i18n("edit")}</div>
<div onClick={handleDownload}>{i18n("download")}</div>
<div onClick={handlePrint}>{i18n("print")}</div>
</div>
) : (
<></>
locales/zh_CN/messages.json
+3
View File
@@ -137,6 +137,9 @@
"download": {
"message": "下载"
},
"print": {
"message": "打印"
},
"editMarkdown": {
"message": "编辑 Markdown"
},
package.json
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "code-box",
"displayName": "__MSG_extensionName__",
"version": "0.9.26",
"version": "0.10.0",
"description": "__MSG_extensionDescription__",
"author": "027xiguapi. <458813868@qq.com>",
"scripts": {