UEditor集成Markdown编辑功能方案

news/2025/3/1 17:32:45/

分步解决方案：

1. 推荐免费开源Markdown库

推荐使用 markdown-it（MIT协议）

官网：https://github.com/markdown-it/markdown-it
特点：轻量级（15KB）、扩展性强、支持CommonMark规范、中文文档丰富

2. Markdown转HTML使用示例

html

<!DOCTYPE html>
<html>
<body>
<!-- 引入库 -->
<script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script><textarea id="mdInput" style="width:400px;height:200px;">
## 标题
- 列表项
**加粗文本**
</textarea>
<button οnclick="convert()">转换</button>
<div id="output"></div><script>
function convert() {const md = window.markdownit();const result = md.render(document.getElementById('mdInput').value);document.getElementById('output').innerHTML = result;
}
</script>
</body>
</html>

3. UEditor添加自定义按钮

在编辑器初始化代码中添加：

javascript

UE.registerUI('mdbtn', function(editor) {const btn = new UE.UI.Button({name: 'markdown',title: '插入Markdown',cssRules: 'background-position: -380px 0;',onclick: function() {// 这里触发弹窗显示showMDDialog(editor); }});return btn;
}, 0 /* 按钮位置 */);

4. 弹窗实现方案

在页面添加样式和DOM：

css

#mdModal {display: none;position: fixed;top: 50%; left: 50%;transform: translate(-50%,-50%);background: white;padding: 20px;box-shadow: 0 0 10px rgba(0,0,0,0.3);z-index: 10000;
}
#mdOverlay {position: fixed;top:0; left:0;width:100%; height:100%;background: rgba(0,0,0,0.5);z-index: 9999;
}

添加弹窗HTML结构：

html

<div id="mdOverlay" style="display:none;"></div>
<div id="mdModal"><textarea id="mdContent" style="width:500px;height:300px;"></textarea><div style="margin-top:10px;"><button οnclick="insertMarkdown()">确定</button><button οnclick="closeMDDialog()">关闭</button></div>
</div>

弹窗控制逻辑：

javascript

let currentEditor = null;function showMDDialog(editor) {currentEditor = editor;document.getElementById('mdModal').style.display = 'block';document.getElementById('mdOverlay').style.display = 'block';
}function closeMDDialog() {document.getElementById('mdModal').style.display = 'none';document.getElementById('mdOverlay').style.display = 'none';
}function insertMarkdown() {const md = window.markdownit();const html = md.render(document.getElementById('mdContent').value);currentEditor.execCommand('insertHtml', html);closeMDDialog();
}