CodeMirror学习(4)

multiplex.html【示例针对html,复杂的标签嵌套问题】
html结构:

multiplex_html_code.pn
对应的页面展示:
multiplex_demo.png
可以看出:嵌套的尖括号被正确的解析了,并且被渲染成了橙黄色【<<>>】,在style中定义。但是<>还是原来的文本显示。
需要引入的文件:
multiplex_link.png
js代码:
multiplex_js_code.png


mustache.html【mustache是一种前端的渲染模板,类似handlebars,此功能就是突出显示模板里的语法】

html结构:
mustache_html.png
对应的页面展示【可以看出和mustache相关的语法都被突出了颜色】:
mustache_demo.png

需要引入的文件:
mustache_link.png
js代码:
mustache_js.png

panel.html【在编辑器的前后添加对应的面板,该面板可以删除。没想到实际的用处???】

先看示例的页面显示:
panel_demo.png
对应的html结构:
panel_html.png

页面引入的文件:
panel_link.png
js代码【代码没仔细看,同样是CodeMirror的API,不熟悉。】:
panel_js.png

placeholder.html【给编辑输入区添加类似input输入框placeholder功能一样的功能】

页面展示【那段英文大致就是,当编辑区没有value,placeholder占位符就会显示,并且当源textarea有placeholder属性时,编辑器也会继承】:
placeholder_demo.png

代码区:
placeholder_code.png

preview.html【写html5页面时有预览的功能,预览放在一个iframe中】

页面:
preview_demo.png
所有代码:
preview_code.png

requirejs.html【requirejs模块加载示例:将所有的依赖关系加载到requirejs中,而不是显式的一下子就加载完成。另外页面加载的时候也是,整个页面加载完成后,编辑区域内才加载!惰性加载】

页面demo:
requirejs_demo.png
代码:
requirejs_code.png

resize.html【实现代码编辑区域的高度是自动随着代码的多少而显示,因此不会产生上下的滚动条。但是如果代码量过多,页面就会很长】

页面展示【少的代码】:
autoresize_demo.png
【多的代码】
autoresize_demo2.png

js代码:
autoresize_code.png
实现的关键是红框部分。

rulers.html【尺子】

页面展示:
rulers_demo.png
代码:
rulers_code.png

runmode.html【运行模式】
页面示例【点击按钮会运行编辑区内的代码。是运行还是仅仅只是展示???】:

runmode_demo.png
代码【CodeMirror.runMode接收3个参数:text、mode、output 】:
runmode_code.png


search.html【搜索替换:按Alt+F,可在编辑区内进行搜索,只配置了一个快捷键】
页面:


<== 写不下去了,以后有时间再来补充,东西还是很多的,CodeMirror功能也很强大 ==>


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容

  • 前些日子从@张鑫旭微博处得一份推荐(Front-end-tutorial),号称最全的资源教程-前端涉及的所有知识...
    谷子多阅读 4,164评论 0 44
  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 23,673评论 8 183
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,453评论 1 19
  • 这本是花开的季节 你却悄然而至 白白净净好不美妙 你也是在跟那刚露头的花骨朵 争先呼吸这美妙的泥土的芬芳吧? 就像...
    小泉眼阅读 245评论 0 0
  • 原以为我是人类 你们这些凶残的低等动物 原以为我是強者 你们这些被圈养的乞讨者 原以为你们不敢把我怎么样 你们这些...
    澄默时节阅读 632评论 33 25