`;
document.body.appendChild(panel);
// 创建切换按钮
const toggleBtn = document.createElement('button');
toggleBtn.id = 'wechat-editor-toggle-btn';
toggleBtn.innerHTML = '📝';
document.body.appendChild(toggleBtn);
}
// 绑定事件
bindEvents() {
// 切换面板显示
document.getElementById('wechat-editor-toggle-btn').addEventListener('click', () => {
const panel = document.getElementById('wechat-editor-panel');
panel.style.display = panel.style.display === 'none' ? 'flex' : 'none';
});
// 关闭面板
document.getElementById('wechat-editor-close-btn').addEventListener('click', () => {
document.getElementById('wechat-editor-panel').style.display = 'none';
});
// 文本域输入事件
document.getElementById('wechat-editor-textarea').addEventListener('input', () => {
this.updatePreview();
});
// 工具栏按钮事件
document.getElementById('wechat-editor-toolbar').addEventListener('click', (e) => {
if (e.target.classList.contains('wechat-editor-tool-btn')) {
const action = e.target.dataset.action;
this.handleToolbarAction(action);
}
});
// 复制按钮事件
document.getElementById('wechat-editor-copy-btn').addEventListener('click', () => {
this.copyToWeChat();
});
// 重置按钮事件
document.getElementById('wechat-editor-reset-btn').addEventListener('click', () => {
this.resetEditor();
});
}
// 处理工具栏动作
handleToolbarAction(action) {
const textarea = document.getElementById('wechat-editor-textarea');
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const selectedText = textarea.value.substring(start, end);
let newText = '';
let newCursorPos = start;
switch(action) {
case 'heading':
newText = `# ${selectedText || '标题'}`;
newCursorPos = start + 2;
break;
case 'bold':
newText = `**${selectedText || '粗体文本'}**`;
newCursorPos = start + 2;
break;
case 'italic':
newText = `*${selectedText || '斜体文本'}*`;
newCursorPos = start + 1;
break;
case 'link':
newText = `[${selectedText || '链接文本'}](http://example.com)`;
newCursorPos = start + selectedText.length + 3;
break;
case 'code':
newText = `\`${selectedText || '代码'}\``;
newCursorPos = start + 1;
break;
case 'quote':
newText = `> ${selectedText || '引用内容'}`;
newCursorPos = start + 2;
break;
case 'ul':
newText = `- ${selectedText || '列表项'}`;
newCursorPos = start + 2;
break;
case 'ol':
newText = `1. ${selectedText || '列表项'}`;
newCursorPos = start + 3;
break;
}
textarea.value = textarea.value.substring(0, start) + newText + textarea.value.substring(end);
textarea.focus();
textarea.setSelectionRange(newCursorPos, newCursorPos + newText.length - (action === 'heading' ? 2 : action === 'bold' ? 4 : action === 'italic' ? 2 : action === 'code' ? 2 : action === 'quote' ? 2 : action === 'ul' ? 2 : action === 'ol' ? 3 : 0));
this.updatePreview();
}
// 更新预览
updatePreview() {
const content = document.getElementById('wechat-editor-textarea').value;
const preview = document.getElementById('wechat-editor-preview-content');
preview.innerHTML = this.markdownToHTML(content);
}
// Markdown转HTML
markdownToHTML(markdown) {
// 简单的Markdown解析器
let html = markdown;
// 代码块
html = html.replace(/```([\s\S]*?)```/g, '