热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

javascript-用codemirror制作PHPprevieweditor

Target:我想制作一个能带预览功能的PHPeditor(并能轻易插入一个页面).Action:搜索(googleorbaidu)没发现任何现成答案.搜索中发现了codemirror,我想应该ok.于是下载并解压codemirror(5.2version)到D盘,D:...

Target: 我想制作一个能带预览功能的PHP editor(并能轻易插入一个页面).

Action:

  1. 搜索(google or baidu)没发现任何现成答案.
  2. 搜索中发现了codemirror,我想应该ok.
  3. 于是下载并解压codemirror(5.2version)到D盘,D:\codemirror-5.2.
  4. 在D:\codemirror-5.2\demo,有很多demo,其中preview.html比较合适.
  5. 用Chrome打开preview.html,测试Javascript and HTML,均OK.
  6. 我就想要这种效果(preview.html),但是要PHP版本,所以我copy preview.html,并命名为phppreview.html,放在D:\codemirror-5.2\demo.
  7. 在notepad++打开phppreview.html,按如下步骤修改.
  8. Line 3, changed title to CodeMirror: PHP preview.
  9. After line 12, add a new line :>.
  10. Line 37 and 42,change "HTML5 preview" to "PHP preview".
  11. Line 72, change mode from "text/xml" to "application/x-httpd-php".
  12. 其他不作改变,在Chrome打开phppreview.html,测试PHP code,代码输出和代码高亮均不起作用!

Questions: 我想在一个页面插入一个PHP editor带预览功能(用codemirror实现),该如何制作? 以上的步骤哪里有错?或还需要加入哪些步骤?

万分感谢!

NOTE: 该问题已在stackoverflow提交但两周还未收到一条回复.望在segmentfault能得到热心高手的指点!

HTML editor with preview:

PHP editor with preview:

回复内容:

Target: 我想制作一个能带预览功能的PHP editor(并能轻易插入一个页面).

Action:

  1. 搜索(google or baidu)没发现任何现成答案.
  2. 搜索中发现了codemirror,我想应该ok.
  3. 于是下载并解压codemirror(5.2version)到D盘,D:\codemirror-5.2.
  4. 在D:\codemirror-5.2\demo,有很多demo,其中preview.html比较合适.
  5. 用Chrome打开preview.html,测试Javascript and HTML,均OK.
  6. 我就想要这种效果(preview.html),但是要PHP版本,所以我copy preview.html,并命名为phppreview.html,放在D:\codemirror-5.2\demo.
  7. 在notepad++打开phppreview.html,按如下步骤修改.
  8. Line 3, changed title to CodeMirror: PHP preview.
  9. After line 12, add a new line :>.
  10. Line 37 and 42,change "HTML5 preview" to "PHP preview".
  11. Line 72, change mode from "text/xml" to "application/x-httpd-php".
  12. 其他不作改变,在Chrome打开phppreview.html,测试PHP code,代码输出和代码高亮均不起作用!

Questions: 我想在一个页面插入一个PHP editor带预览功能(用codemirror实现),该如何制作? 以上的步骤哪里有错?或还需要加入哪些步骤?

万分感谢!

NOTE: 该问题已在stackoverflow提交但两周还未收到一条回复.望在segmentfault能得到热心高手的指点!

HTML editor with preview:

PHP editor with preview:

你要的也许是 http://3v4l.org/


至于自己做,codemirror只是一个editor,除了editor之外,你说的功能还必须有一个合适的沙盒环境来执行PHP代码,单靠editor肯定是无法执行php代码的
比如 https://github.com/fieryprophet/php-sandbox 看上去还算能用

你可以看看这个demo,希望能对你有用:
http://www.365mini.com/diy.php?f=jquery-on-demo

php是服务端语言,光靠客户端是无法预览的。可以做个按钮然后ajax到服务端运行,当然要设置好安全问题。

推荐阅读
  • Allegro总结:1.防焊层(SolderMask):又称绿油层,PCB非布线层,用于制成丝网印板,将不需要焊接的地方涂上防焊剂.在防焊层上预留的焊盘大小要比实际的焊盘大一些,其差值一般 ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 2016 linux发行版排行_灵越7590 安装 linux (manjarognome)
    RT之前做了一次灵越7590黑苹果炒作业的文章,希望能够分享给更多不想折腾的人。kawauso:教你如何给灵越7590黑苹果抄作业​zhuanlan.z ... [详细]
  • 本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ... [详细]
  • 如何压缩网站页面以减少页面加载时间
    本文介绍了影响网站打开时间的两个因素,即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法,并推荐了相应的压缩工具。此外,还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]
  • 本文由编程笔记#小编为大家整理,主要介绍了markdown[软件代理设置]相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 前言:关于跨域CORS1.没有跨域时,ajax默认是带cookie的2.跨域时,两种解决方案:1)服务器端在filter中配置详情:http:blog.csdn.netwzl002 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 推荐系统遇上深度学习(十七)详解推荐系统中的常用评测指标
    原创:石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人,希望在平日的工作学习中,挖掘数据的价值, ... [详细]
  • 本文介绍了Linux系统中正则表达式的基础知识,包括正则表达式的简介、字符分类、普通字符和元字符的区别,以及在学习过程中需要注意的事项。同时提醒读者要注意正则表达式与通配符的区别,并给出了使用正则表达式时的一些建议。本文适合初学者了解Linux系统中的正则表达式,并提供了学习的参考资料。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 本文由编程笔记小编整理,主要介绍了使用Junit和黄瓜进行自动化测试中步骤缺失的问题。文章首先介绍了使用cucumber和Junit创建Runner类的代码,然后详细说明了黄瓜功能中的步骤和Steps类的实现。本文对于需要使用Junit和黄瓜进行自动化测试的开发者具有一定的参考价值。摘要长度:187字。 ... [详细]
  • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • 本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ... [详细]
author-avatar
洛熙难耐_467
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有