新增其他网站复制按钮

This commit is contained in:
DLLCNX 2023-08-03 21:29:12 +08:00
parent 05d0e6b339
commit 0238d8fa8f
3 changed files with 120 additions and 8 deletions

View File

@ -1,3 +1,14 @@
<!--
* @Author: DLLCNX
* @Date: 2023-07-29 22:04:08
* @LastEditors: DLLCNX
* @LastEditTime: 2023-08-03 18:07:52
* @FilePath: /md/public/index.html
* @Description:
*
* DLLCNX dllcnx@foxmail.com
* Copyright (c) 2023 by DLLCNX, All Rights Reserved.
-->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
@ -29,6 +40,7 @@
href="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/wechatsync/article-syncjs@latest/dist/styles.css" href="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/wechatsync/article-syncjs@latest/dist/styles.css"
/> />
<script src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/prettify/r298/prettify.min.js"></script> <script src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/prettify/r298/prettify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
</head> </head>
<body> <body>

View File

@ -1 +1,23 @@
# sdfdsf # 示例文章xxx
## 一、标题
### 1.1 一级标题
## 二、段落
## 三、字体
## 四、欢迎访问
<center>
<img src="https://dllcnx.com:18889/images/dllcnx/gzh/search_01.jpg" style="width: 100px;">
</center>

View File

@ -137,7 +137,7 @@
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<el-dropdown> <!-- <el-dropdown>
<span class="el-dropdown-link"> <span class="el-dropdown-link">
帮助<i class="el-icon-arrow-down el-icon--right"></i> 帮助<i class="el-icon-arrow-down el-icon--right"></i>
</span> </span>
@ -146,14 +146,26 @@
关于 关于
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown> -->
</div> </div>
<el-button plain size="medium" :type="btnType" @click="copy"> <el-button plain size="medium" :type="btnType" @click="copy">
复制 复制到公众号
</el-button> </el-button>
<!-- <el-button plain size="medium" :type="btnType" @click="prePost"> <el-dropdown @command="handleClick" id="copyButton" trigger="click">
发布 <el-button plain size="medium" :type="btnType">
</el-button> --> 复制到其它<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-for="item in commands"
v-bind:key="item.key"
:command="item.key"
>
{{ item.title }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<post-info-dialog <post-info-dialog
:form="form" :form="form"
@ -185,6 +197,28 @@ export default {
name: `editor-header`, name: `editor-header`,
data() { data() {
return { return {
commands: [
{
key: `juejin`,
title: `复制到掘金`,
url: `https://juejin.cn`,
},
{
key: `segmentfault`,
title: `复制到思否`,
url: `https://segmentfault.com`,
},
{
key: `CSDN`,
title: `复制到CSDN`,
url: `https://www.csdn.net`,
},
{
key: `jianshu`,
title: `复制到简书`,
url: `https://www.jianshu.com`,
},
],
config, config,
citeStatus: false, citeStatus: false,
isMacCodeBlock: true, isMacCodeBlock: true,
@ -341,6 +375,7 @@ export default {
const clipboardDiv = document.getElementById(`output`) const clipboardDiv = document.getElementById(`output`)
clipboardDiv.innerHTML = mergeCss(clipboardDiv.innerHTML) clipboardDiv.innerHTML = mergeCss(clipboardDiv.innerHTML)
debugger
if (this.isMacCodeBlock) { if (this.isMacCodeBlock) {
clipboardDiv.innerHTML = clipboardDiv.innerHTML.replaceAll( clipboardDiv.innerHTML = clipboardDiv.innerHTML.replaceAll(
/(<code class="prettyprint[^>]*)(style=")/g, /(<code class="prettyprint[^>]*)(style=")/g,
@ -360,15 +395,31 @@ export default {
// //
this.$notify({ this.$notify({
showClose: true, showClose: true,
message: `已复制渲染后的文章到剪贴板,可直接到公众号后台粘贴`, message: `已复制渲染后的文章到剪贴板,2秒后打开公众号后台,可直接到公众号后台粘贴`,
offset: 80, offset: 80,
duration: 1600, duration: 1600,
type: `success`, type: `success`,
}) })
this.$emit(`refresh`) this.$emit(`refresh`)
this.$emit(`endCopy`) this.$emit(`endCopy`)
setTimeout(() => {
window.open(`https://mp.weixin.qq.com`, `_blank`)
}, 2000)
}, 350) }, 350)
}, },
copyMd(url) {
//
this.$notify({
showClose: true,
message: `已复制渲染后的文章到剪贴板,2秒后将跳转至对应网站`,
offset: 80,
duration: 1600,
type: `success`,
})
setTimeout(() => {
url && window.open(url, `_blank`)
}, 2000)
},
// CSS // CSS
async customStyle() { async customStyle() {
this.$emit(`showCssEditor`) this.$emit(`showCssEditor`)
@ -410,6 +461,16 @@ export default {
this.showResetConfirm = false this.showResetConfirm = false
this.editor.focus() this.editor.focus()
}, },
handleClick(e) {
let url = this.commands.filter((item) => item.key === e)[0].url
switch (e) {
case `wechat`:
this.copy(url)
break
default:
this.copyMd(url)
}
},
...mapActions(useStore, [ ...mapActions(useStore, [
`setCurrentColor`, `setCurrentColor`,
`setCiteStatus`, `setCiteStatus`,
@ -420,6 +481,7 @@ export default {
`setCurrentCodeTheme`, `setCurrentCodeTheme`,
`setWxRendererOptions`, `setWxRendererOptions`,
`setIsMacCodeBlock`, `setIsMacCodeBlock`,
`getDoc`,
]), ]),
}, },
mounted() { mounted() {
@ -432,7 +494,9 @@ export default {
const fileInput = this.$refs.fileInput const fileInput = this.$refs.fileInput
fileInput.onchange = () => { fileInput.onchange = () => {
debugger
const file = fileInput.files[0] const file = fileInput.files[0]
debugger
if (file == null) { if (file == null) {
return return
} }
@ -442,6 +506,20 @@ export default {
this.$emit(`import-md`, read.result) this.$emit(`import-md`, read.result)
} }
} }
var clipboard = new ClipboardJS(`#copyButton`, {
text: () => {
return this.editor.getValue()
},
})
clipboard.on(`success`, (e) => {
console.log(`复制成功`)
})
clipboard.on(`error`, (e) => {
console.log(`复制失败`)
})
}, },
} }
</script> </script>