multiplex.html【示例针对html,复杂的标签嵌套问题】
html结构:对应的页面展示:
可以看出:嵌套的尖括号被正确的解析了,并且被渲染成了橙黄色【<<
和>>
】,在style
中定义。但是<
和>
还是原来的文本显示。
需要引入的文件:js代码:
mustache.html【mustache是一种前端的渲染模板,类似handlebars,此功能就是突出显示模板里的语法】
html结构:
对应的页面展示【可以看出和mustache相关的语法都被突出了颜色】:需要引入的文件:js代码:
panel.html【在编辑器的前后添加对应的面板,该面板可以删除。没想到实际的用处???】
先看示例的页面显示:
对应的html结构:页面引入的文件:js代码【代码没仔细看,同样是CodeMirror的API,不熟悉。】:
placeholder.html【给编辑输入区添加类似input输入框placeholder功能一样的功能】
页面展示【那段英文大致就是,当编辑区没有value,placeholder占位符就会显示,并且当源textarea有placeholder属性时,编辑器也会继承】:
代码区:
preview.html【写html5页面时有预览的功能,预览放在一个iframe中】
页面:
所有代码:
requirejs.html【requirejs模块加载示例:将所有的依赖关系加载到requirejs中,而不是显式的一下子就加载完成。另外页面加载的时候也是,整个页面加载完成后,编辑区域内才加载!惰性加载】
页面demo:
代码:
resize.html【实现代码编辑区域的高度是自动随着代码的多少而显示,因此不会产生上下的滚动条。但是如果代码量过多,页面就会很长】
页面展示【少的代码】:
【多的代码】js代码:实现的关键是红框部分。
rulers.html【尺子】
页面展示:
代码:
runmode.html【运行模式】
页面示例【点击按钮会运行编辑区内的代码。是运行还是仅仅只是展示???】:代码【CodeMirror.runMode
接收3个参数:text、mode、output 】:
search.html【搜索替换:按
Alt
+F
,可在编辑区内进行搜索,只配置了一个快捷键】
页面:
<== 写不下去了,以后有时间再来补充,东西还是很多的,CodeMirror功能也很强大 ==>