现在位置首页 / 前端开发 /正文

CodeMirror在富文本编辑器中的应用(一)-- 集成sublime编辑

作者: 释梵 | 2015年6月23日| 热度:℃ | 评论: |参与:

        最近给 wfEditor 添加源码编辑支持的功能, 用到了目前应用最广的 CodeMirror, 这里简单描述一下使用过程。

        效果如下, Demo: http://webfuture.cn/wfEditor/index.html 

        


一、包管理

         wfEditor 依赖包如果在百度CDN无法获取,将使用 npm 包管理, 直接下载 codemirror,并且添加依赖。  

npm install codemirror --save

        你还可以直接到github下载源代码 https://github.com/codemirror/CodeMirror, 或者通过 bower 安装


二、AMD引入

        由于 wfEditor 使用 require 进行前端模块管理, 源代码的代码量相对较小, 期望用户在不使用源码功能情况下,不必要前置加载  CodeMirror 相关代码, 故只是在点击 相关图标 的时候才进行加载:

    

require([
    "../node_modules/codemirror/lib/codemirror",// 引入脚本
    "../node_modules/codemirror/keymap/sublime",// 期望支持sublime-keymap
    "../node_modules/codemirror/mode/htmlmixed/htmlmixed", //使用 mode: "text/html" 
    "css!../node_modules/codemirror/lib/codemirror.css", // 基本样式引入
    "css!../node_modules/codemirror/theme/monokai.css" // 期望使用sublime-monokai 主题高亮显示
], function(CodeMirror){
    md_mirror = CodeMirror.fromTextArea(markdown[0], {
        value: editor.html(),  // 原编辑器的内容作为参数
        lineNumbers: true,     //显示行号
        mode: "text/html",      //
        keyMap: "sublime",
        smartIndent: true,
        showCursorWhenSelecting: true,
        theme: "monokai"
    });
    // md_mirror.setValue()  &&  md_mirror.getValue()
});

        使用 md_mirror.setValue()  &&  md_mirror.getValue() 进行设置和获取


三、 js-beautify 支持

        由于编辑器的内容没有进行HTML格式化输出, 为了显示和编辑方便, 在引入 codemirror 的同时,引入 js-beautify 进行格式化

        安装过程与 codemirror 相同,js-beautify 同样支持 npm 和 bower。

        相关API可以直接查阅 github 上文档 https://github.com/beautify-web/js-beautify


四、emmet 支持

       codemirror 官方的emmet插件是CMD模块, wfEditor使用AMD模块, 无法直接使用。 

         通过emmet 官网 http://emmet.io/download/ 找到一些在线使用的例子中,jsFiddle使用的emmet.js 是经过改装的类AMD模块,

         直接下载其源代码 http://jsfiddle.net/js/emmet.js , 打开观察, 发现内部集成了 为进行包管理的 underscore.js, wfEditor 已默认引入, 删除相应代码, 然后 uglify-js emmet.js


详细源代码查看:  https://github.com/shy2850/wfEditor/blob/master/js/ext/code.js#L82



点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询