使用boostrap modal和ACE实现的一个简单模态框代码编辑器

最新推荐文章于 2018-09-03 16:35:39 发布

lym152898

最新推荐文章于 2018-09-03 16:35:39 发布

阅读量1.2k

点赞数

分类专栏： node-js

本文链接：https://blog.csdn.net/lym152898/article/details/81261428

版权

node-js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Bootstrap 实例 - 模态框（Modal）插件</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ext-language_tools.js"></script>
  <style type="text/css">
    body {
      font: 10.5pt arial;
      color: #4d4d4d;
      line-height: 150%;
    }

    editor {
      background-color: #f5f5f5;
    }

    #editor {
      width: auto;
      height: 500px;
    }
  </style>
</head>

<body>
  <textarea id="test" onclick="showModal('test')">
  </textarea>
  <div class="input-editor">
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">代码编辑器</h4>
          </div>
          <div id="editor"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary btn-lg btn-block center-block" onclick="submitCode()">
              提交更改
            </button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal -->
    </div>
    <script>
      let inputId = ''
      var editor = ace.edit("editor")
      editor.setFontSize(18)
      editor.setTheme("ace/theme/github")
      editor.session.setMode("ace/mode/javascript")
      ace.require("ace/ext/language_tools")
      //自动换行,设置为off关闭
      editor.setOption("wrap", "free")
      editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
      })
      function submitCode() {
        $(`#${inputId}`).val(editor.getValue())
        $('#myModal').modal('hide')
      }
      function showModal(id){
        inputId = id
        $('#myModal').modal('show')
      }
    </script>
  </div>

</body>

</html>