全站通知：
Widget:Editbubbles
刷
历
编
跳到导航
跳到搜索
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可视化编辑器</title>
<style>
tbody {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.floatbar {
position: fixed;
left: 0;
bottom: 0;
width: 50px; /* 折叠状态宽度 */
background: white;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
z-index: 10000;
transition: width 0.3s ease;
overflow: hidden;
height: auto;
max-height: 100vh; /* 限制最大高度为视口高度 */
}
.floatbar.expanded {
width: 200px !important; /* 展开状态宽度 */
}
#toggle-button,
#editor-toggle-button {
background-color: #4CAF50;
color: white;
padding: 10px;
width: 100%;
border: none;
cursor: pointer;
text-align: left;
}
.toolbar {
padding: 10px;
display: none; /* 默认隐藏工具栏 */
}
.floatbar.expanded .toolbar {
display: block; /* 展开时显示工具栏 */
}
#editor {
border: 1px solid #ccc;
padding: 10px;
min-height: 200px;
max-height: 400px; /* 设置编辑器最大高度 */
outline: none;
margin: 10px;
display: none; /* 默认隐藏编辑器 */
overflow-y: auto; /* 添加垂直滚动条 */
}
select#template-select {
width: 100%;
margin: 10px 0;
padding: 5px;
}
</style>
</head>
<body>
<script>
// 定义多个模板
const templates = {
"文章模板": `模板:文章`,
"额外挑战模板": `模板:额外挑战`,
"武器图鉴模板": `模板:武器图鉴`,
};
// 插入模板到编辑器并复制到剪切板
function insertSelectedTemplate() {
const select = document.getElementById('template-select');
const selectedTemplateName = select.value;
const template = templates[selectedTemplateName];
const editor = document.getElementById('editor');
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
range.deleteContents();
const textNode = document.createTextNode(template);
range.insertNode(textNode);
}
editor.focus();
// 将模板内容复制到剪切板
copyToClipboard(template);
}
// 复制文本到剪切板
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
console.log('模板已复制到剪切板:', text);
}).catch(err => {
console.error('无法复制到剪切板:', err);
});
}
// 切换编辑框的显示状态
document.getElementById('editor-toggle-button').addEventListener('click', function () {
const editor = document.getElementById('editor');
const editorToggleButton = document.getElementById('editor-toggle-button');
if (editor.style.display === 'block' || editor.style.display === ) {
editor.style.display = 'none';
editorToggleButton.textContent = '显示';
} else {
editor.style.display = 'block';
editorToggleButton.textContent = '隐藏编辑框';
}
});
// 切换浮动栏的展开/折叠状态
document.getElementById('toggle-button').addEventListener('click', function () {
const floatbar = document.getElementById('floatbar');
const toolbarToggleButton = document.getElementById('toggle-button');
floatbar.classList.toggle('expanded');
toolbarToggleButton.textContent = floatbar.classList.contains('expanded') ? '隐藏工具栏' : '显示';
});
</script>
</body>
</html>
沪公网安备 31011002002714 号