javascript - 如何将 CodeMirror 合并到我的元素中?

标签 javascript html css codemirror

<分区>


想改进这个问题吗? 通过 editing this post 添加细节并澄清问题.

关闭 7 年前

我和我的 friend 正在一起开发一个元素,这个元素将包括一个在浏览器中的 html、javascript 和 css 编辑器。我意识到在浏览器编辑器中编写代码的功能会很困难——这就是我决定为这个元素使用 CodeMirror 功能的原因。但是,我在将 CodeMirror 整合到这个元素中时遇到了一些麻烦。我已经下载了 CodeMirror,现在卡住了!请问有人能帮忙吗?

如有任何帮助,我们将不胜感激。

http://codemirror.net/

最佳答案

将以下内容保存到例如path/to/codemirror/test.html(在 codemirrors index.html 和 lib,mode 文件夹旁边),在任何合适的浏览器中打开它并为您的冒险尝试找到一个起点:

<html>
<script src="lib/codemirror.js"></script>
<link rel="stylesheet" href="lib/codemirror.css">
<script src="mode/javascript/javascript.js"></script>
<script src="mode/htmlmixed/htmlmixed.js"></script>
<script src="mode/xml/xml.js"><!-- needed for htmlmixed --></script>
<script src="mode/css/css.js"></script>
<form>
<fieldset>
<legend>HTML</legend>
<textarea id="htmlCode"><html><h1>E<span style="color:red">x</span>ample</h1></html></textarea>
</fieldset>
<fieldset>
<legend>CSS</legend>
<textarea id="cssCode">.foo { font-weight: bold; }</textarea>
</fieldset>
<fieldset>
<legend>JS</legend>
<textarea id="jsCode">function myScript(){return 100;}</textarea>
</fieldset>
</form>
<script>
window.onload = function () {
    CodeMirror.fromTextArea(document.getElementById('htmlCode'), {mode: 'htmlmixed'})
    CodeMirror.fromTextArea(document.getElementById('cssCode'), {mode: 'css'})
    CodeMirror.fromTextArea(document.getElementById('jsCode'), {mode: 'javascript', lineNumbers:true})
};
</script>
</html>

关于javascript - 如何将 CodeMirror 合并到我的元素中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31773765/

上一篇:html - 为数据库中的每一行创建面板并以不同方式设置列元素的样式

下一篇:javascript - jquery 移动 div 动画的副本

相关文章:

html - IE7 ul 中的奇怪间距

javascript - 显示与点击时生成的随机数对应的骰子元素

html - 如何确定谷歌字体的文件大小?

javascript - 使用 Javascript 访问剪贴板 - 没有 Flash?

javascript - 使用javascript根据当前颜色切换单元格颜色

javascript - 使用javascript将一个div链接到一个url

jquery - jQuery的滑动侧栏从右到左与调整大小的内容

javascript - DOM 对象 document.cookie 属性是如何构建的?

javascript - 为什么 .simulate ("mouseover") 在 Jest/Enzyme 测试中不起作用?

jquery - 跳到第二页(jQuery Mobile)