如何在 Bootstrap Modal 中应用 CodeMirror

在 Web 开发中，我们经常会需要使用到文本编辑器，而 CodeMirror 是一种非常流行的 JavaScript 文本编辑器库。Bootstrap Modal 是一个常用的模态框弹窗组件。本文将介绍如何在 Bootstrap Modal 中应用 CodeMirror，让你轻松在模态框弹窗中实现代码编辑功能。

准备工作

在开始之前，你需要在你的项目中加入 Bootstrap 和 CodeMirror 的相关文件。你可以手动下载这些文件，也可以使用 CDN 引入这些文件。

<!-- 引入 Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">

<!-- 引入 CodeMirror CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.62.2/codemirror.min.css">

<!-- 引入 CodeMirror JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.62.2/codemirror.min.js"></script>

<!-- 引入 CodeMirror 模式 -->
<script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.62.2/mode/javascript/javascript.min.js"></script>

<!-- 引入 jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 引入 Bootstrap JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>

创建模态框弹窗

接下来，我们需要创建一个 Bootstrap Modal 弹窗。以下是一个简单的例子。

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  打开模态框
</button>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">编辑 JavaScript 代码</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <textarea id="code"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

调用 CodeMirror

在模态框弹出后，我们需要初始化 CodeMirror。以下是一个简单的例子。

$(document).ready(function() {
  
  // 获取模态框对象
  var modal = $('#myModal');
  
  // 获取 CodeMirror 对象
  var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
    mode: 'javascript', // 设置模式为 JavaScript
    lineNumbers: true // 显示行号
  });
  
  // 在模态框显示时初始化 CodeMirror
  modal.on('show.bs.modal', function() {
    editor.refresh();
  });
  
  // 在保存按钮被点击时获取输入框的值
  modal.find('.btn-primary').on('click', function() {
    var value = editor.getValue();
    // 进行保存操作
    console.log(value);
  });
  
});

以上就是在 Bootstrap Modal 中应用 CodeMirror 的全部步骤。

总结

CodeMirror 是一个非常强大的 JavaScript 文本编辑器库，能够轻松实现代码高亮、智能缩进等功能。在 Bootstrap Modal 中应用 CodeMirror，可以方便地实现代码编辑功能。希望本文能对你有所帮助。