codemirror 执行PHP,javascript - 用codemirror制作PHP preview editor

最新推荐文章于 2023-06-21 15:50:07 发布
最新推荐文章于 2023-06-21 15:50:07 发布
阅读量199 收藏
点赞数
文章标签： codemirror 执行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实现),该如何制作? 以上的步骤哪里有错?或还需要加入哪些步骤?

万分感谢!

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

HTML editor with preview:

bVlELj

PHP editor with preview:

bVlELM

回复内容：

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能得到热心高手的指点!

HTML editor with preview:

bVlELj

PHP editor with preview:

bVlELM

你要的也许是 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中文网，转载请注明出处，感谢您的尊重！

河星星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
codemirror demo.zip
12-27
​​自定义提示框内容
codemirror 执行PHP,CodeMirror 使用大全
weixin_32352621的博客
03-11 490
标签：CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件，为各种编程语言实现关键字，函数，变量等代码高亮显示，丰富的api和可扩展功能以及多个主题样式，能满足您各种项目的需求。CodeMirror支持大量语言的语法高亮，包括C、C++、C#、Java、Perl、PHP、JavaScript、Python、Lua、Go、Groovy、Ruby等，以及diff、...
codemirror 执行PHP,Codemirror编辑器直到点击后才加载内容
weixin_39781363的博客
03-11 341
Xml 1Xml 2.CodeMirror {border: 1px solid #eee;max-width: 100%;height: 400px;}$(document).ready(function() {var cmXml1;var cmXml2;cmXml1 = CodeMirror.fromTextArea(document.getElementById("txtXml1"), {m...
codeMirror代码格式化（官方demo）
06-14
codeMirror代码格式化工具,支持sql、C、Java等目前主流的编程语言
codemirror 执行PHP,php – CodeMirror有内容,但不会显示,直到按键
weixin_30015835的博客
03-11 298
我正在构建一个嵌入在我的webapp中的CodeMirror实例.它的效果非常好 – 除了在用户输入新字符之前初始内容不会显示.所以它是所有的,但隐藏,直到用户强制更改.这不好.有什么办法可以强制重绘或刷新模拟一个字符进入的空间的浏览器.这是代码…jQuery(document).ready(function(){var textarea = document.getElementById('co...
code-mirror-sql-editor.rar
07-27
左侧提供数据库表字段树形结构，可拖拽到sql编辑框 ...执行与中断功能 自定义外部接口获取sql关键词、函数、表字段等，用于sql编辑时提示补全,键盘录入后自动提示，上下键选择，tab键或点击选中项自动补全 sql格式化
react-codemirror2：React的Codemirror集成组件
02-05
react-codemirror2 演示@ 安装npm install react-codemirror2 codemirror --save react-codemirror2带有和组件的概念。 UnControlled包含一个简单的包装程序，该包装程序主要由codemirror本身的内部工作提供code...
codemirror-6-getting-started:流行的代码编辑器库CodeMirror 6入门
05-10
CodeMirror 6：入门 这是新CodeMirror v6编辑器的基本功能和自定义选项的演示。 它伴随在DataCamp工程博客上的帖子。 用法 安装依赖项： $ yarn 启动捆绑器： $ yarn start 然后在浏览器中打开它： 执照 版权...
react-codemirror:React的CodeMirror组件。 @codemirror https
04-28
安装# Not dependent on uiw.npm install @uiw/react-codemirror --save用法import CodeMirror from '@uiw/react-codemirror' ;import 'codemirror/keymap/sublime' ;import 'codemirror/theme/monokai.css' ;const ...
ngx-codemirror：Angular的Codemirror包装器
02-05
ngx-codemirror 演示： : 依存关系 每个Angular版本均提供最新版本 @ ctrl / ngx-codemirror 角度的 1.3.10 6.x 7.x 2.2.1 8.x 3.1.3 9.x 当前 > = 10.x 对角分量包装延伸ngModel。 基于 用于： tsquery...
fioi-editor:基于CodeMirror的有状态PHP编辑器，可用于PEM任务
05-14
FIOI_editor 基于CodeMirror的状态PHP编辑器，可用于PEM任务。 安装 通过Bower安装javascript部分： bower install France-ioi/fioi-editor 以及通过composer.json与composer一起的php部分（可选），例如： { "repositories": [{ "type": "vcs", "url": "http://github.com/France-ioi/fioi-editor" }], "require": { "namshi/jose": "*", "France-ioi/fioi-editor": "*@dev" } } 有关简单的用例，请参见演示。 尝试演示 您必须使用tm\_platform ， tm\_sour
editor:一个简单的浏览器内PHP编辑器。 使用CodeMirror3，jQuery2，Bootstrap3创建
05-24
编辑 一个简单PHP浏览器内编辑器。 警告：该编辑器仅在本地使用！ 不要将其托管在公共服务器上！ 代码评估循环是不安全的！ 用法 在左侧的文本区域中输入PHP代码。 通过按“ F9”键或单击顶部导航栏中的“运行”按钮来评估PHP。 在右侧找到经过评估PHP。 特征 ActiveLine高亮显示 基于error_get_last（）的错误处理，错误消息显示在错误行上方 使用 PHP的eval（）用于代码评估 CodeMirror3作为Javascript编辑器 的jQuery2 Bootstrap3
mirrorsharp:MirrorSharp是代码编辑器基于Roslyn和CodeMirror构建
05-01
概述 MirrorSharp是基于Roslyn和构建的代码编辑器<textarea> 。 特征 代码完成 签名帮助 快速修复 诊断程序 快速资讯 用法 您将需要以下内容： 服务器上的MirrorSharp.AspNetCore （如果是.NET Framework，则为MirrorSharp.Owin） mirrorsharp.js —提供用户界面的客户端库 服务器 MirrorSharp.AspNetCore Install-Package MirrorSharp.AspNetCore 如果使用端点路由（仅适用于3.0+）： app . UseEndpoints ( endpoints => { // ... endpoints . MapMirrorSharp ( " /mirrorsharp " ); }); 如果不使用端点路由： app . MapM
CodeMirror js代码加亮使用总结
10-20
一个基于JavaScript的代码编辑器，CodeMirror支持大量语言的语法高亮,也包括css,html,js等的高亮显示。此外，CodeMirror还支持代码自动完成、搜索/替换、HTML预览、行号、选择/搜索结果高亮、可视化tab、代码自动格式等
codemirror
w1374401940的博客
10-22 446
<!doctype html> <title>CodeMirror: Theme Demo</title> <meta charset="utf-8"/> <link rel="stylesheet" href="https://cdn.staticfile.org/codemirror/5.58.1/codemirror.css"> <link rel="stylesheet" href="https://cdn.staticfile.
codemirror 简单使用
u013466380的博客
04-02 1830
代码压缩包地址 https://github.com/codemirror/codemirror1. 网页引用&lt;script src="js/codemirror.js"&gt;&lt;/script&gt;2. 网页引用&lt;script src="js/clike.js"&gt;&lt;/script&gt;（mode属性需要的js文件）3. 初始化编辑框生成var myTextare...
代码高亮插件Codemirror使用方法及下载
06-12 394
代码高亮插件Codemirror使用方法及下载 代码高亮插件Codemirror使用方法及下载 - 老男孩的日志 - 网易博客代码高亮插件Codemirror使用方法及下载 2013-10-31 16:51:29|分类： 默认分类 |标签： |举报...
CodeMirror 多功能在线代码编辑器
ejinxian的专栏
08-21 521
CodeMirror 是一款允许在浏览器中使用的多功能文本编辑器，专用于编辑代码，并附带超过 100 种语言模式和各种插件，可实现高级的代码编辑功能，包括代码高亮显示、功能扩展以及多个主题样式 CodeMirror 是一款“Online Source Editor”，基于Javascript，短小精悍，实时在线代码高亮显示，他不是某个富文本编辑器的附属产品，他是许多大名鼎鼎的在线代码编辑器的基础库 CodeMirror的作者是一个十分向往自由的人。但他的CodeMirror绝对不简单，看看下面.
js：codemirror实现在线代码编辑器代码高亮显示
彭世瑜的博客
06-21 2009
通过自定义配置，可以实现如下效果完整代码。
codemirror-editor-vue3 codemirror
最新发布
09-14
CodeMirror是一个用于在网页中创建和编辑代码的JavaScript库。它提供了丰富的功能和灵活的配置选项，可以适用于各种编程语言。CodeMirror的官方文档可以在中找到。在参考文档中，可以找到有关如何配置CodeMirror编辑器的信息。 在Vue 3中使用CodeMirror编辑器，可以通过安装codemirror-editor-vue3包来实现。该包是一个Vue 3的封装组件，可以方便地在Vue项目中使用CodeMirror编辑器。你可以在中找到该项目的详细信息和使用说明。 使用codemirror-editor-vue3的步骤如下： 1. 在Vue项目中安装codemirror-editor-vue3包。 2. 在需要使用CodeMirror编辑器的组件中引入codemirror-editor-vue3组件。 3. 在该组件的模板中使用codemirror-editor-vue3组件，并设置相应的props和事件处理函数。 4. 在组件的script部分，可以通过import语句引入需要使用的编程语言的js文件，例如如果需要使用Python语言，可以引入"codemirror/mode/python/python.js"。 5. 在CodeMirror编辑器的配置选项中，设置mode为相应的编程语言模式，例如对于Python语言，可以设置mode为"text/x-python"。 6. 根据项目需要，可以设置其他的CodeMirror编辑器配置选项，如主题、自动补全等。 请注意，使用codemirror-editor-vue3之前，确保已经安装了Vue 3和CodeMirror库，并按照官方文档进行了配置和使用。 参考资料： CodeMirror官方文档：https://codemirror.net/5/mode/index.html codemirror-editor-vue3项目信息和使用说明
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值