UEditor集成Markdown编辑功能方案

微wx笑 2025-03-01【前端开发】12 0 0关键字： UEditor Markdown

分步解决方案：1. 推荐免费开源Markdown库推荐使用 markdown-it（MIT协议）官网：https://github.com/markdown-it/markdown-it特点：轻量级（15KB）、扩展性强、支持CommonMark规范、中文

以下是为您提供的分步解决方案：GpE无知

1. 推荐免费开源Markdown库

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

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

2. Markdown转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 onclick="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添加自定义按钮

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

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：GpE无知

#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结构：GpE无知

<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 onclick="insertMarkdown()">确定</button>
    <button onclick="closeMDDialog()">关闭</button>
  </div>
</div>

弹窗控制逻辑：GpE无知

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();
}