基于codeMirror的实时在线编辑器

最新推荐文章于 2024-07-05 07:20:56 发布

DJL123DJL

最新推荐文章于 2024-07-05 07:20:56 发布

阅读量1.4k

点赞数

分类专栏： js/jquery 文章标签： codemirror 编辑器 DIY实时在线编辑

本文链接：https://blog.csdn.net/DJL123DJL/article/details/47414395

版权

本文介绍了如何基于CodeMirror实现一个实时在线编辑器，涵盖了工程的目录结构，包括css和js文件夹。文章提到，codeMirror的demo文件夹提供了丰富的功能实例，如代码折叠等，适合进一步扩展功能。作者鼓励读者评论交流，共享学习经验。

摘要由CSDN通过智能技术生成

首先在官网下载http://codemirror.net/doc/manual.html，解压后会看到如下目录：

<img src="https://img-blog.csdn.net/20150811115020899?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

</pre><pre name="code" class="html">接下来直接贴出代码，代码中会讲的很清楚：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>基于codeMirror实时在线编辑器</title>
	<link rel="stylesheet" type="text/css" href="css/codemirror.css">
	<!--theme皮肤的设置-->
    <link rel="stylesheet" type="text/css" href="css/ambiance.css"/>
	<script type="text/javascript" src="js/codemirror.js"></script>
	<script type="text/javascript" src="js/sublime.js"></script>	
	<!--mode js风格,css javascript html 关键字高亮-->
	<script type="text/javascript" src="js/javascript.js"></script>
	<script src="js/css.js"></script> 
	<script src="js/xml.js"></script> 
	<script src="js/htmlmixed.js"></script> 
	<style type="text/css">
		#htmlEdit{width: 400px;height: 400px;display: inline-blo