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>

       <button id="toggle-button">显示</button>
       <button id="editor-toggle-button">显示</button>

           <select id="template-select" onchange="insertSelectedTemplate()">
               <option value="额外挑战模板">额外挑战模板</option>
               <option value="武器图鉴模板">武器图鉴模板</option>
               <option value="文章模板">文章模板</option>
               <option value="剧情一览">剧情一览</option>
           </select>

           在这里输入和编辑内容...

   <script>
       // 定义多个模板
       const templates = {

"剧情一览": `

2. -1 2. -2 2. -3 2. -4 2. -5 2. -6 2. -7 2. -8 2. -9 进程1 进程2 进程3 进程4 进程5 进程6 进程7 进程8

`, "文章模板": `

^编 ^刷 ^历

首页 > Widget:Editbubbles

如果是第一次来，按"Ctrl+D"可以收藏随时查看更新~觉得WIKI好玩的话，请推荐给朋友哦～(◕ω＜)☆
按右上角“WIKI功能→编辑”即可修改页面内容。

作者信息

作者	发布时间	最后更新	作者声明
	2025年02月05日	2025年02月05日	未经作者允许，请勿擅自修改，转载请注明出处并附带本页链接。
文章来源

文章内容

`,

           "额外挑战模板": `

`,

           "武器图鉴模板": `

^编 ^刷 ^历

首页 > 武器图鉴 > Widget:Editbubbles

如果是第一次来，按"Ctrl+D"可以收藏随时查看更新~觉得WIKI好玩的话，请推荐给朋友哦～(◕ω＜)☆
按右上角“WIKI功能→编辑”即可修改页面内容。

武器信息

友好邻里

类型	冲锋枪	元素	动能
弹容		射速
换弹速度		弹药类型
暴击伤害		配件	无文件:无.png
友好依据	攻击力提升14.4％/16.8％/19.2％/21.6％/24％
获取途径	新手赠送
介绍	阴极科技最早出品的冲锋枪，性能已经不及新一代，但价格低廉，经久耐用，依然很受欢迎

等级	基础攻击力	攻击力百分比	武器适配率
初始	22	5%	5%
80级	187	25%	25%

武器伤害曲线

冲锋枪伤害衰减曲线.png

`,

};

       // 插入模板到编辑器并复制到剪切板
       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>

Widget:Editbubbles

武器信息

武器伤害曲线

类型