微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

网页上的Javascript编辑器和代码格式化_javascript技巧

php中文网
发布： 2016-05-16 18:28:51
原创
1693人浏览过

为什么不用textarea呢？

1 没有高亮

2 tab键无法使用。——按tab键会切换到下个控件

3 没有代码格式化。——因为习惯了Eclipse的环境，可以使用ctrl+shift+F来代码进行格式化。

当然，我还没强大到自己实现的程度，而且用脚趾头都能想到肯定有人实现了，就看找不找得着。

经过了艰难的搜索，终于在SourceForge上找到一个叫EditArea的项目，感觉挺好。http://sourceforge.net/projects/editarea/

它的sample也很清楚

在网页上用以下方法构造


复制代码 代码如下:




便可以在页面中出现代码的编辑框

 

启科网络PHP商城系统
启科网络PHP商城系统

启科网络商城系统由启科网络技术开发团队完全自主开发，使用国内最流行高效的PHP程序语言，并用小巧的MySql作为数据库服务器，并且使用Smarty引擎来分离网站程序与前端设计代码，让建立的网站可以自由制作个性化的页面。 系统使用标签作为数据调用格式，网站前台开发人员只要简单学习系统标签功能和使用方法，将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用，即可建设出美观、个性的网站。

启科网络PHP商城系统 0
查看详情 启科网络PHP商城系统

能够解决第一个和第二个问题，但是还能解决。

因此我又找啊找，找到这个网站：http://jsbeautifier.org/。这个网站做了一个js的格式化工具，甚至可以格式化经过某个混淆器混淆的js代码。

于是我根据上面项目中的插件规范，将这两个东东整合了起来。看上面图中的按钮，按下以后，就变成了

看，高亮和格式化都有了。

 

需要下载的可以从这里下载（已经包含代码格式化的插件了）：editarea_0_8_2.zip

样例见exemples\example.html

格式化的插件实现在edit_area\plugins\beautifier\beautifier.js

相关标签：
javascript

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：下载网站打开页面后间隔多少时间才显示下载链接地址的代码_javascript技巧 下一篇：javascript table排序 这个更简单了，不用改变现在的表格结构_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript解构赋值技巧_javascript变量声明 解构赋值可简洁提取对象或数组数据，提升代码可读性。①对象解构按属性名提取，支持重命名与默认值；②数组解构按位置提取，可跳过元素或用扩展符捕获剩余项；③函数参数中直接解构传参；④嵌套结构需保持层级一致，建议结合默认值防错。合理使用能精简逻辑，尤其适用于处理复杂数据结构。
2025-12-03 20:15:07
234
JavaScript事件委托机制_javascript事件处理 事件委托利用事件冒泡机制，在父元素绑定监听器来处理子元素事件。通过在父级监听事件并检查event.target，可识别实际触发元素并执行对应操作，避免为每个子元素重复绑定。例如为ul绑定点击事件，判断e.target是否为li来统一处理列表项点击，即使后续动态添加的li也能生效。该技术减少内存占用、提升性能，适用于列表、菜单等大量或动态子元素场景。需注意并非所有事件都冒泡（可用focusin/focusout替代），应精准判断目标元素，并在必要时调用e.stopPropagation()阻止冒泡
2025-12-03 20:14:56
329
JavaScript测试驱动开发_javascript质量保证 测试驱动开发（TDD）是一种先写测试用例再实现功能的开发方法，核心流程为“红-绿-重构”：首先编写一个失败的测试（红），然后编写最简代码使其通过（绿），最后优化代码结构并保持测试通过（重构）。在JavaScript项目中，TDD通过Jest、Mocha+Chai、Vitest或Cypress等工具实现，广泛应用于函数、组件和模块的单元测试与集成测试。例如，在实现折扣计算或表单验证功能前，先编写测试验证输入输出行为，确保代码正确性。结合持续集成（CI）、代码审查和高可读性测试描述，TDD提升代码可
2025-12-03 20:11:32
1068
掌握JavaScript模块化_javascript工程实践 JavaScript模块化通过拆分代码为独立单元提升可维护性与复用性，解决全局污染与依赖混乱问题；采用ES6模块语法实现作用域隔离、明确依赖，并支持懒加载；结合Webpack、Vite等工具处理不同环境下的模块解析与优化，需避免循环依赖并合理组织功能驱动的项目结构，持续演进以构建清晰可控的代码体系。
2025-12-03 20:10:03
870
JavaScript面向对象编程_javascript核心技术 JavaScript面向对象编程基于构造函数和原型，ES6引入class语法糖使写法更直观。1.构造函数用于初始化实例，prototype存储共享方法；2.class中的constructor初始化属性，其他方法挂载到原型；3.使用extends实现继承，super调用父类构造函数；4.static定义静态方法，#前缀声明私有字段；5.实例访问自身属性及原型链上的方法，私有字段仅类内可访问。
2025-12-03 20:10:02
750
JavaScriptSessionStorage_JavaScript客户端存储 SessionStorage是JavaScript提供的临时存储机制，用于在单个浏览器标签页会话期间保存数据，关闭标签页后自动清除。它遵循同源策略，存储容量为5-10MB，仅以字符串形式保存键值对，需用JSON转换复杂数据类型。主要操作包括setItem、getItem、removeItem和clear，适用于表单缓存、会话内偏好设置及页面间临时传值，但不支持跨标签页共享，隐私模式下可能受限，且不应存储敏感信息以防XSS攻击。合理使用可提升用户体验并减少服务器请求。
2025-12-03 20:09:41
476
JavaScript算法实现_JavaScript编程能力训练 掌握JavaScript算法需从基础题入手，理解逻辑并动手实践。重点包括字符串操作、数组遍历、回文判断、斐波那契数列；进阶掌握栈、队列、哈希表及递归应用；通过LeetCode、Codewars等平台每日练习，结合调试优化，提升效率与思维能力。
2025-12-03 20:09:08
418
JavaScript函数式编程_JavaScript现代开发模式 函数式编程通过纯函数、不可变数据和函数组合提升代码可读性与可维护性。1.纯函数确保输入输出一致且无副作用，便于测试；2.使用高阶函数如map、filter、reduce实现逻辑复用，结合compose进行函数组合；3.采用展开运算符、concat等方法保持数据不可变；4.在React中利用Hook封装状态与副作用，配合useMemo、useCallback优化性能；5.Redux的reducer遵循纯函数规范。函数式思想为现代JavaScript开发提供更清晰的组织方式。
2025-12-03 20:08:02
838
JavaScript模板引擎_javascript动态渲染 JavaScript模板引擎是将数据与HTML分离并动态生成页面内容的工具，支持变量、条件和循环，适用于列表渲染、组件构建等场景；常见库包括Handlebars、Mustache、Underscore/Lodash模板和EJS，各自适用于复杂逻辑或轻量项目；可通过正则实现简易原生模板替换，但复杂结构建议用成熟引擎；使用时需注意XSS防护、性能优化、模板可读性、浏览器兼容性及数据容错处理。
2025-12-03 20:07:02
307
JavaScript缓冲区_javascript内存操作 JavaScript通过ArrayBuffer实现二进制数据操作，需配合TypedArray或DataView使用；TypedArray提供带类型视图（如Uint8Array），支持高效读写；DataView支持字节序控制，适用于网络协议解析；广泛用于文件处理、WebSocket、Canvas、WebGL及加密等场景。
2025-12-03 20:03:25
981
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部