This commit is contained in:
杜恒 2021-02-07 17:32:06 +08:00
parent b1ea1cb6d2
commit b511fcd222
8 changed files with 210 additions and 165 deletions

File diff suppressed because one or more lines are too long

View File

@ -1309,8 +1309,7 @@
}
pre[class*='language-'] {
position: relative;
padding: 15px;
padding-top: 35px;
padding: 30px 15px 12px;
margin: 0 0 15px;
border-radius: var(--radius-inner);
&::after {
@ -1334,6 +1333,20 @@
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
z-index: 1;
}
.copy {
position: absolute;
top: 9px;
right: 15px;
z-index: 5;
color: #909399;
font-size: 14px;
transition: color 0.35s;
cursor: pointer;
user-select: none;
&:hover {
color: #c0c4cc;
}
}
}
img {
display: block;
@ -1688,6 +1701,10 @@
text-overflow: ellipsis;
}
}
&-copy {
cursor: pointer;
user-select: none;
}
}
&__agree {
display: flex;

View File

@ -47,6 +47,17 @@ document.addEventListener('DOMContentLoaded', () => {
/* 激活代码高亮 */
{
Prism.highlightAll();
$("pre[class*='language-']").each(function (index, item) {
let text = $(item).find("code[class*='language-']").text();
let span = $(`<span class="copy"><i class="fa fa-clone"></i></span>`);
new ClipboardJS(span[0], { text: () => text }).on('success', () => Qmsg.success('复制成功!'));
$(item).append(span);
});
}
/* 激活复制功能 */
{
new ClipboardJS('.joe_detail__article-copy').on('success', () => Qmsg.success('复制成功!'));
}
/* 激活图片预览功能 */
@ -137,9 +148,7 @@ document.addEventListener('DOMContentLoaded', () => {
/* 密码保护文章,输入密码访问 */
{
$('.joe_detail__article-protected').on('submit', function (e) {
});
$('.joe_detail__article-protected').on('submit', function (e) {});
}
});

View File

@ -114,5 +114,13 @@ function _parseContent($post, $login)
$content
);
}
/* 过滤复制粘贴功能 */
if (preg_match('/\{copy\s{0,}text=".{0,}"\s{0,}\}.{0,}\{\/copy\}/sSU', $content)) {
$content = preg_replace(
'/\{copy\s{0,}text="(.{0,})"\s{0,}\}(.{0,})\{\/copy\}/sSU',
'<span data-clipboard-text="$1" class="joe_detail__article-copy">$2</span>',
$content
);
}
echo $content;
}

View File

@ -16,6 +16,7 @@
<?php $this->need('public/include.php'); ?>
<!-- 友联页面需要用到的CSS及JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism-tomorrow.css">
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/plugin/prism/prism.js"></script>
<script src="<?php $this->options->themeUrl('assets/js/joe.post&page.js'); ?>"></script>
</head>

View File

@ -6,6 +6,7 @@
<!-- 独立页面需要用到CSS及JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism-tomorrow.css">
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.post.css'); ?>">
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/plugin/prism/prism.js"></script>
<script src="<?php $this->options->themeUrl('assets/js/joe.post&page.js'); ?>"></script>
</head>

View File

@ -6,6 +6,7 @@
<!-- 文章页需要用到的CSS及JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism-tomorrow.css">
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.post.css'); ?>">
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/HaoOuBa/Joe@master/plugin/prism/prism.js"></script>
<script src="<?php $this->options->themeUrl('assets/js/joe.post&page.js'); ?>"></script>
</head>

View File

@ -1,8 +1,8 @@
$(function () {
$('#wmd-editarea textarea').attr('placeholder', '请输入文章内容...(支持图片粘贴上传)')
$('#wmd-button-bar .wmd-edittab').remove()
$('#wmd-button-row .wmd-spacer').remove()
$('#wmd-button-row #wmd-code-button').remove()
$('#wmd-editarea textarea').attr('placeholder', '请输入文章内容...(支持图片粘贴上传)');
$('#wmd-button-bar .wmd-edittab').remove();
$('#wmd-button-row .wmd-spacer').remove();
$('#wmd-button-row #wmd-code-button').remove();
/* 增加自定义功能 */
const items = [
@ -90,72 +90,80 @@ $(function () {
title: '多彩按钮',
id: 'wmd-abtn-button',
svg: '<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M360 651c-74.1 0-134.3-60.3-134.3-134.3 0-74.1 60.3-134.3 134.3-134.3s134.3 60.3 134.3 134.3c0 74-60.2 134.3-134.3 134.3z m0-204.6c-38.8 0-70.3 31.5-70.3 70.3S321.2 587 360 587s70.3-31.5 70.3-70.3-31.5-70.3-70.3-70.3z" p-id="5116" fill="#9b9b9b"></path><path d="M666.9 778.9H360c-70 0-135.9-27.3-185.4-76.8S97.8 586.7 97.8 516.7s27.3-135.9 76.8-185.4S290 254.5 360 254.5h306.9c70 0 135.9 27.3 185.4 76.8s76.8 115.4 76.8 185.4-27.3 135.9-76.8 185.4-115.3 76.8-185.4 76.8zM360 318.5c-109.3 0-198.2 88.9-198.2 198.2S250.7 714.9 360 714.9h306.9c109.3 0 198.2-88.9 198.2-198.2s-88.9-198.2-198.2-198.2H360z" p-id="5117" fill="#9b9b9b"></path></svg>'
},
{
title: '点击复制',
id: 'wmd-copy-button',
svg: '<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M817.521 690.221h-50.921v-356.441c0-40.735-35.644-76.38-76.38-76.38h-356.441v-50.921h356.441c71.289 0 127.3 56.012 127.3 127.3v356.441z" p-id="2048" fill="#9b9b9b"></path><path d="M639.3 817.521h-356.441c-40.735 0-76.38-35.644-76.38-76.38v-356.441c0-40.735 35.644-76.38 76.38-76.38h356.441c40.735 0 76.38 35.644 76.38 76.38v356.441c0 40.735-35.644 76.38-76.38 76.38zM282.859 359.241c-15.277 0-25.461 10.185-25.461 25.46v356.441c0 15.277 10.185 25.461 25.461 25.461h356.441c15.277 0 25.46-10.185 25.46-25.461v-356.441c0-15.277-10.185-25.46-25.46-25.46h-356.441z" p-id="2049" fill="#9b9b9b"></path></svg>'
}
]
];
/* 用于设置插入到文章的短代码内容 */
function getInsertTextById(id) {
let str = ''
let str = '';
switch (id) {
case 'wmd-hide-button':
str = `\n\n{hide}${$('#text').selectionRange() ? $('#text').selectionRange() : '回复可见'}{/hide}\n\n`
break
str = `\n\n{hide}${$('#text').selectionRange() ? $('#text').selectionRange() : '回复可见'}{/hide}\n\n`;
break;
case 'wmd-mlist-button':
str = `\n\n{music-list id="网易云歌单ID" /}\n\n`
break
str = `\n\n{music-list id="网易云歌单ID" /}\n\n`;
break;
case 'wmd-music-button':
str = `\n\n{music id="网易云音乐ID" /}\n\n`
break
str = `\n\n{music id="网易云音乐ID" /}\n\n`;
break;
case 'wmd-bili-button':
str = `\n\n{bilibili bvid="哔哩哔哩的Bvid" /}\n\n`
break
str = `\n\n{bilibili bvid="哔哩哔哩的Bvid" /}\n\n`;
break;
case 'wmd-dplayer-button':
str = `\n\n{dplayer src="M3U8或MP4地址" /}\n\n`
break
str = `\n\n{dplayer src="M3U8或MP4地址" /}\n\n`;
break;
case 'wmd-html-button':
str = `\n\n!!!\n<span class="test">Hello Joe</span>\n<style>\n .test { color: #ff6800 }\n</style>\n!!!\n\n`
break
str = `\n\n!!!\n<span class="test">Hello Joe</span>\n<style>\n .test { color: #ff6800 }\n</style>\n!!!\n\n`;
break;
case 'wmd-title-button':
str = `\n\n# 一级标题\n## 二级标题\n### 三级标题\n#### 四级标题\n##### 五级标题\n###### 六级标题\n\n`
break
str = `\n\n# 一级标题\n## 二级标题\n### 三级标题\n#### 四级标题\n##### 五级标题\n###### 六级标题\n\n`;
break;
case 'wmd-table-button':
str = `\n\n| 左对齐 | 右对齐 | 居中对齐 |\n| :-----| ----: | :----: |\n| 单元格 | 单元格 | 单元格 |\n\n`
break
str = `\n\n| 左对齐 | 右对齐 | 居中对齐 |\n| :-----| ----: | :----: |\n| 单元格 | 单元格 | 单元格 |\n\n`;
break;
case 'wmd-delete-button':
str = `~~${$('#text').selectionRange() ? $('#text').selectionRange() : '删除线'}~~`
break
str = `~~${$('#text').selectionRange() ? $('#text').selectionRange() : '删除线'}~~`;
break;
case 'wmd-snippet-button':
str = `\n\n\`\`\`php\necho 'Hello Joe';\n\`\`\`\n\n`
break
str = `\n\n\`\`\`php\necho 'Hello Joe';\n\`\`\`\n\n`;
break;
case 'wmd-code-button':
str = ` \`${$('#text').selectionRange() ? $('#text').selectionRange() : '行内代码'}\` `
break
str = ` \`${$('#text').selectionRange() ? $('#text').selectionRange() : '行内代码'}\` `;
break;
case 'wmd-task-button':
str = `{x} 任务已完成\n{ } 任务未完成`
break
str = `{x} 任务已完成\n{ } 任务未完成`;
break;
case 'wmd-card-button':
str = `\n\n{card-default width="100%" label="卡片标题"}${$('#text').selectionRange() ? $('#text').selectionRange() : '卡片内容'}{/card-default}\n\n`
break
str = `\n\n{card-default width="100%" label="卡片标题"}${$('#text').selectionRange() ? $('#text').selectionRange() : '卡片内容'}{/card-default}\n\n`;
break;
case 'wmd-message-button':
str = `\n\n{message type="success|info|warning|error"}${$('#text').selectionRange() ? $('#text').selectionRange() : '提示内容'}{/message}\n\n`
break
str = `\n\n{message type="success|info|warning|error"}${$('#text').selectionRange() ? $('#text').selectionRange() : '提示内容'}{/message}\n\n`;
break;
case 'wmd-mtitle-button':
str = `\n\n{mtitle}${$('#text').selectionRange() ? $('#text').selectionRange() : '居中标题'}{/mtitle}\n\n`
break
str = `\n\n{mtitle}${$('#text').selectionRange() ? $('#text').selectionRange() : '居中标题'}{/mtitle}\n\n`;
break;
case 'wmd-anote-button':
str = `{anote icon="Font Awesome图标" href="跳转地址" type="secondary|success|warning|error|info"}${$('#text').selectionRange() ? $('#text').selectionRange() : '便条按钮'}{/anote}`
break
str = `{anote icon="Font Awesome图标" href="跳转地址" type="secondary|success|warning|error|info"}${$('#text').selectionRange() ? $('#text').selectionRange() : '便条按钮'}{/anote}`;
break;
case 'wmd-abtn-button':
str = `{abtn icon="Font Awesome图标" color="颜色值" href="跳转地址" radius="圆角半圆17.5px"}${$('#text').selectionRange() ? $('#text').selectionRange() : '多彩按钮'}{/abtn}`
break
str = `{abtn icon="Font Awesome图标" color="颜色值" href="跳转地址" radius="圆角半圆17.5px"}${$('#text').selectionRange() ? $('#text').selectionRange() : '多彩按钮'}{/abtn}`;
break;
case 'wmd-copy-button':
str = `{copy text="文本文本"}${$('#text').selectionRange() ? $('#text').selectionRange() : '点击复制'}{/copy}`;
break;
}
return str
return str;
}
/* 此处无需修改 */
items.forEach(_ => {
let item = $(`<li class="wmd-button" id="${_.id}" title="${_.title}">${_.svg}</li>`)
item.on('mousedown touchstart', () => $('#text').insertContent(getInsertTextById(_.id)))
$('#wmd-button-row').append(item)
})
})
let item = $(`<li class="wmd-button" id="${_.id}" title="${_.title}">${_.svg}</li>`);
item.on('mousedown touchstart', () => $('#text').insertContent(getInsertTextById(_.id)));
$('#wmd-button-row').append(item);
});
});