devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

用JS写在线JavaScript编辑器 - 基于CodeMirror_js在线编辑器

作者：Cpp五条 | 2024-05-16 07:37:23

赞

踩

js在线编辑器

一、前情

        写前端组件时，写到“按钮”功能，其中有一个事件需要加入“JavaScript配置”，即要求客户可以根据自己的需要进行JS开发

       此时前端需要一个JS编辑器页面。

二、JS编辑器-CodeMirror

        通过几番查找，最终选定了CodeMirror。

        使用方法一：直接前端代码下载这个插件，引入直接使用；

        方法二：自己用官方给出的原代码，自己写一个html文件。

        这两个方法各有利弊，但是因为我干的项目属于大型项目，而这个又只是其中很小的一部分，所以我选择第二个，用官方给出的原代码文件。

1、官网：CodeMirror的官网：CodeMirror，可在上面直接下载代码

2、样例代码参考1：https://github.com/codemirror/dev

3、样例代码参考2：https://github.com/codemirror/codemirror5

（上述的两个样例代码可以下载下来参考一下）

样例代码参考1本地示意图：

三、从无到有CodeMirror

        具体的CodeMirror怎么从无到有（CodeMirror使用方法-面圈网），这个里面说的比较清楚，这里直接放一下最后对应的html代码，以及这个代码因为我是引入到iframe标签里的，所以最后这个html连带着里面引入的官网下载的CodeMirror文件夹，一起丢到了public/static的静态文件里，这个可能就对前端打包不太友好！！

如图：

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <link href="codemirror/lib/codemirror.css" rel="stylesheet" type="text/css">
  6.     <link href="codemirror/theme/monokai.css" rel="stylesheet" type="text/css">
  7.     <link href="codemirror/addon/display/fullscreen.css" rel="stylesheet" type="text/css">
  8.  
  9.     <!-- 引入CodeMirror核心文件 -->
  10.     <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.js"></script> -->
  11.     <script type="text/javascript" src="codemirror/lib/codemirror.js"></script>
  12.  
  13.     <!-- CodeMirror支持不同语言，根据需要引入JS文件 -->
  14.     <!-- 因为HTML混合语言依赖Javascript、XML、CSS语言支持，所以都要引入 -->
  15.     <script type="text/javascript" src="codemirror/mode/javascript/javascript.js"></script>
  16.     <script type="text/javascript" src="codemirror/mode/xml/xml.js"></script>
  17.     <script type="text/javascript" src="codemirror/mode/css/css.js"></script>
  18.     <script type="text/javascript" src="codemirror/mode/htmlmixed/htmlmixed.js"></script>
  19.  
  20.     <!-- 下面分别为显示行数、括号匹配和全屏插件 -->
  21.     <script type="text/javascript" src="codemirror/addon/selection/active-line.js"></script>
  22.     <script type="text/javascript" src="codemirror/addon/edit/matchbrackets.js"></script>
  23.     <script type="text/javascript" src="codemirror/addon/display/fullscreen.js"></script>
  24.  
  25.     <style>
  26.         /* 定义代码编辑区域样式 */
  27.         .code-editor {
  28.             width: 100%;
  29.             min-height: 300px;
  30.             border: 1px solid #ccc;
  31.             padding: 10px;
  32.             font-family: "Courier New", monospace;
  33.             font-size: 14px;
  34.         }
  35.     </style>
  36. </head>
  37.  
  38. <body>
  39.  
  40.     <form action="post.php" method="post">
  41.         <textarea id="code" name="code"></textarea>
  42.     </form>
  43.     <script>
  44.  
  45.         var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  46.             lineNumbers: true,     // 显示行数
  47.             indentUnit: 4,         // 缩进单位为4
  48.             styleActiveLine: true, // 当前行背景高亮
  49.             matchBrackets: true,   // 括号匹配
  50.             mode: "javascript",    // 设置编辑器语言为JavaScript
  51.             lineWrapping: true,    // 自动换行
  52.             theme: 'default',      // 使用default模版
  53.             // mode: 'htmlmixed',     // HMTL混合模式
  54.             // theme: 'monokai',      // 使用monokai模版
  55.         });
  56.  
  57.         // 添加示例代码
  58.         var exampleCode = `/**
  59.         * 尊敬的用户，你好：页面JS面板是高阶用法，一般不建议普通用户使用；
  60.         * 如需使用，请确定你具备研发背景，能够自我排查问题；
  61.         * 我们可以用JS面板来开发一些定制度高功能；
  62.         * 请将代码写在函数体内；
  63.         */`;
  64.  
  65.         editor.setOption("extraKeys", {
  66.             // Tab键换成4个空格
  67.             Tab: function(cm) {
  68.                 var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
  69.                 cm.replaceSelection(spaces);
  70.             },
  71.             // F11键切换全屏
  72.             "F11": function(cm) {
  73.                 cm.setOption("fullScreen", !cm.getOption("fullScreen"));
  74.             },
  75.             // Esc键退出全屏
  76.             "Esc": function(cm) {
  77.                 if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
  78.             }
  79.         });
  80.  
  81.  
  82.         editor.setValue(exampleCode); // 将示例代码添加到编辑器中
  83.  
  84.         // 监听代码变化事件
  85.         editor.on("change", function(cm) {
  86.             var code = cm.getValue();
  87.             // 在这里可以执行需要的操作，比如实时运行代码或保存到服务器等等
  88.             console.log('code:',code)
  89.         });
  90.  
  91.     </script>
  92. </body>
  93.  
  94. </html>

注意！！

        1、上面的代码中！！【引入CodeMirror核心文件】这里，我从官方下载下来的代码中，确实是没有“codemirror.js”文件，于是便去找了在线的，可以打开在线的网址（https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.js）然后把里面的代码复制出来，自己在对应的文件夹底下建一个这个文件，把代码粘贴进去就可以用了！

 这里是修改编辑器里面的样式的，如果想改具体样式不清楚的可以官网看一下，官网上啥都有：https://codemirror.net/5/doc/manual.html 

（或者：代码编辑器CodeMirror使用总结-配置理解说明，里面有样例示范）

四、做出来的效果

照着上面的做出来的，简易的在线JavaScript编辑器

最后，放一下这个大大自己试的API：https://www.cnblogs.com/oldphper/p/4065425.html 

五、父页面iframe取引入子页面html中的值（保存）

      因为是写了个弹窗，里面加入了<iframe id="myFrame" name="myFrame" width="100%" height="100%" src="/public/static/code.html"></iframe> ，html中有手动输入框，而整体保存方法是在外面的弹窗中，所以要点击外面的保存方法，去找html中的输入的值。

       子页面html的输入框：

        父页面iframe的保存方法：

  1. handleSave() {
  2.     var iframe = document.getElementById('myFrame') //获取iframe标签
  3.     // iframe: <iframe id="myFrame" name="myFrame" width="100%" height="100%" src="/public/static/code.html"></iframe>
  4.     var oBody = iframe.contentWindow.document.getElementById('code')
  5.     // oBody:  <textarea id="code" name="code" style="displat: none;"></textarea>
  6.     var oText = oBody.value
  7.     console.log(oText, 'codeValue')
  8.     // ......
  9. }

       （父页面iframe中还可以取别的值，这里放一下）

  1. var iframe = document.getElementById("myFrame");
  2. var iwindow = iframe.contentWindow;
  3. var idoc = iwindow.document;
  4. console.log("window",iwindow);//获取iframe的window对象
  5. console.log("document",idoc); //获取iframe的document
  6. console.log("html",idoc.documentElement);//获取iframe的html
  7. console.log("head",idoc.head); //获取head
  8. console.log("body",idoc.body); //获取body

六、子页面html取iframe页面的值（回显）

       父级iframe标签中写load方法，对应的vue应该写@load="loaded"，我用的svelte所以是on:load="{()=>loaded()}" 。

       父页面Iframe代码：

  1. <iframe
  2.         id="myFrame"
  3.         style="overflow: hidden;height:400px"
  4.         title="JS在线编辑器"
  5.         name="myFrame"
  6.         width="100%"
  7.         height="100%"
  8.         marginwidth="0"
  9.         marginheight="0"
  10.         frameborder="no"
  11.         border="0"
  12.         on:load="{() => handleIframeLoaded()}"
  13.         src="/public/static/code.html"></iframe>

       父页面Iframe load方法：

  1. function handleIframeLoaded() {
  2.     let iframeWin = ''
  3.     iframeWin = window.document.getElementById('myFrame').contentWindow
  4.     iframeWin.postMessage(row, '*')  // row是需要回显的数值
  5.     console.log('这是父页面中的函数弹出窗口哦！')
  6.   }

       子页面html：

  1. <script>
  2.         var exampleCode =`/**
  3.             * 尊敬的用户，你好：页面JS面板是高阶用法，一般不建议普通用户使用；
  4.             * 如需使用，请确定你具备研发背景，能够自我排查问题；
  5.             * 我们可以用JS面板来开发一些定制度高功能；
  6.             * 请将代码写在函数体内；
  7.             */`
  8.  
  9.         window.onload=function(){
  10.             console.log(window.parent);//父页面的window对象，iframe嵌入页面自带
  11.             console.log(window.parent.frames["myFrame"]);
  12.             console.log(window.parent.document.getElementById('myFrame'));//父页面iframe标签
  13.  
  14.             window.addEventListener('message', function (event) {
  15.                 let data = event.data.jsCode;
  16.                 exampleCode = data
  17.                 editor.setValue(exampleCode);
  18.                 // loaded = data.rate
  19.                 // $('.loadingType').text(data.content)
  20.             }, false);
  21.         };
  22.  
  23. </script>

        如图所示就是window.addEventListener(...){...}中取到的event内容，最后取里面的data即可：

 回显效果：

（父页面、子页面，互通其他方法：https://www.cnblogs.com/zhinian-/p/10591795.html）

七、JS编辑器中代码的执行

       经过上述的步骤，代码已经能够成功保存到后端，并回显到编辑器中再次编辑，那就剩下最后一步：编辑器中自己写的代码执行。

思路：1、在HTML页面中直接嵌入js代码；

           2、通过链接外部的JavaScript文件。

      第一种用法：在HTML页面中直接嵌入js代码：

      若要将 JavaScript代码直接嵌入 HTML页面中，我们需要告诉 JavaScript从哪里开始和结束。之间的代码行包含了 JavaScript。

      在HTML页面的任何位置都可以插入script标签。你也有可能会在上述代码就是在在HTML页面中直接嵌入js代码。

      第二种用法：通过链接外部的JavaScript文件。

      有时JavaScript代码过多的话，我们可以将代码单独放在JavaScript文件中然后链接起来。

我们链接外部JavaScript文件可以有以下步骤

      1、首先我们建立一个JavaScript文件，扩展名是.js

      2、然后将要编写的js代码写到Js文件中，并保存文件。

      3、使用script标签将JavaScript文件链接到HTML文件中

      （需要注意一点的是，在一个已经引入外部js文件的script标签中，不能在它的开始标签和结束标签中写Js命令了。）

      我们来看一个具体的示例：

      我们先建一个js文件sample.js，然后写入js代码

      document.write("This is a paragraph");

      最后使用script标签将JavaScript文件链接到HTML文件中。

这里我选用的方法是类似第一种：在 JavaScript 中动态创建并插入 script 标签

  1. function useJsCode(data) {
  2.     // console.log('JS编辑器-code', data.jsCode)
  3.     let code = data.jsCode
  4.     var script_ = document.createElement('script')
  5.     script_.type = 'text/javascript'
  6.     try {
  7.       //IE浏览器认为script是特殊元素,不能再访问子节点;报错;
  8.       script_.appendChild(document.createTextNode(code))
  9.     } catch (ex) {
  10.       script_.text = code
  11.     }
  12.     document.getElementsByTagName('head')[0].appendChild(script_)
  13.   }

修改JS代码编辑器中的内容为：

点击按钮，运行结果，控制台成功输出 “方法调用成功！”：

 

       注意：方法中的 “var script_ = document.createElement('script')” 一定不能是script，如果是var script则会出现script标签自动生成成功了，但是里面的方法却不执行的问题！！这个问题的原因当时也是找了好久，具体的解释可以参考（动态加载js不执行解决办法 - wling - 博客园 (cnblogs.com)）

       至此，基本上是一步一步的实现了从无到有“用JS搭建在线JS编辑器页面”的完整过程了，也是记录一下详细的过程步骤，中间遇到难题后也是参考了很多别的大大写的文章，特此感谢！

       如果后续这个的代码运行测试或者操作方面会出现什么特别问题的，也还会继续回来记录下来。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/577549
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号