javascript - 用codemirror制作PHP preview editor

php中文网

发布时间：2016-06-06 20:33:53

1437人浏览过

来源于php中文网

原创

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

Action:

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

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

Cogram

使用AI帮你做会议笔记，跟踪行动项目

下载

万分感谢!

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

立即学习“PHP免费学习笔记（深入）”；

HTML editor with preview:
javascript - 用codemirror制作PHP preview editor

PHP editor with preview:
javascript - 用codemirror制作PHP preview editor

回复内容：

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

Action:

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

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

万分感谢!

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

立即学习“PHP免费学习笔记（深入）”；

HTML editor with preview:
javascript - 用codemirror制作PHP preview editor

PHP editor with preview:
javascript - 用codemirror制作PHP preview editor

你要的也许是 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到服务端运行，当然要设置好安全问题。

php做exe能调用python脚本吗_跨语言交互实现方法【指南】

phpstudy和xampp哪个好用_本地部署选phpstudy还是xampp对比【解答】

php读取gpio状态怎么弄_php获取树莓派gpio引脚电平【方法】

php文件怎么变mp4上传_php视频文件上传到平台方法【操作】

php485怎么实现断线重连_php485连接稳定性保障方案【方法】

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

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

下载

相关专题

excel制作动态图表教程

本专题整合了excel制作动态图表相关教程，阅读专题下面的文章了解更多详细教程。

2025.12.29

freeok看剧入口合集

本专题整合了freeok看剧入口网址，阅读下面的文章了解更多网址。

2025.12.29

俄罗斯搜索引擎Yandex最新官方入口网址

Yandex官方入口网址是https://yandex.com；用户可通过网页端直连或移动端浏览器直接访问，无需登录即可使用搜索、图片、新闻、地图等全部基础功能，并支持多语种检索与静态资源精准筛选。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

197

2025.12.29

python中def的用法大全

def关键字用于在Python中定义函数。其基本语法包括函数名、参数列表、文档字符串和返回值。使用def可以定义无参数、单参数、多参数、默认参数和可变参数的函数。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

2025.12.29

python改成中文版教程大全

Python界面可通过以下方法改为中文版：修改系统语言环境：更改系统语言为“中文（简体）”。使用 IDE 修改：在 PyCharm 等 IDE 中更改语言设置为“中文”。使用 IDLE 修改：在 IDLE 中修改语言为“Chinese”。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

2025.12.29

C++的Top K问题怎么解决

TopK问题可通过优先队列、partial_sort和nth_element解决：优先队列维护大小为K的堆，适合流式数据；partial_sort对前K个元素排序，适用于需有序结果且K较小的场景；nth_element基于快速选择，平均时间复杂度O(n)，效率最高但不保证前K内部有序。本专题为大家提供相关的文章、下载、课程内容，供大家免费下载体验。

2025.12.29