showCodeDialog() {
this.removeDialog();
const dialog = this.createDialog({
title: '插入代码块',
fields: [
{ id: 'language', label: '编程语言', type: 'select',
options: ['', 'JavaScript', 'PHP', 'Python', 'Java', 'C++', 'C#', 'Ruby', 'Go', 'Rust', 'HTML', 'CSS', 'SQL', 'Bash', 'JSON', 'XML', 'Markdown'],
value: '' },
{ id: 'code', label: '代码内容', type: 'textarea',
placeholder: '请输入或粘贴代码...', value: '' }
],
onConfirm: (data) => {
if (!data.code || !data.code.trim()) {
this.showToast('请输入代码内容');
return;
}
const lang = data.language || '';
const code = data.code;
// ===== 构建代码块 HTML =====
let html = '<pre><code';
if (lang) {
// 添加语言类名,用于显示语言标签和样式
const langClass = lang.toLowerCase().replace(/[^a-zA-Z0-9-]/g, '');
html += ' class="language-' + langClass + '"';
}
html += '>' + this.escapeHtml(code) + '</code></pre>';
this.restoreSelection();
document.execCommand('insertHTML', false, html);
this.body.focus();
this.updateContent();
this.updatePlaceholder();
this.removeDialog();
}
});
}修改 orange.js 中的 showCodeDialog 方法
修改编辑器里面插入代码块的显示方式。