TinyMCE4集成CodeMirror插件

TinyMCE wysiwyg 编辑器是一款非常基本的HTML源代码编辑器。作者实现了一款针对TinyMCE的插件使得编辑HTML源代码的经历更加令人愉快。这款插件基于卓越的CodeMirror代码编辑器,由Marijn Haverbeke开发。

CodeMirror4TinyMCE项目链接:http://www.avoid.org/codemirror-for-tinymce4/

这款插件提供了如下功能:

  1. HTML, Javascript和PHP代码语法高亮
  2. 显示行号
  3. 高亮当前编辑行
  4. 自动缩进
  5. 多重Undo/Redo
  6. 搜索/替换功能
  7. 等等...

说明:

  • 下载和安装TinyMCE4并确保其可以在缺省设置下运行
  • 下载CodeMirror插件的源文件(codemirror.zip 或者 codemirror.tar.gz)
  • 将下载到的文件解压至tinymce/plugins目录。新建一个文件夹命名为codemirror
  • 下载CodeMirror(3.13或以上版本),链接地址:http://codemirror.net/codemirror-latest.zip
  • 解压codemirror-latest.zip到刚才创建的plugins/codemirror目录下。一个命名为CodeMirror的目录将被生成。

在TinyMCE中激活codemirror插件:

plugins:['codemirror']

可选的,在TinyMCE工具栏中添加代码按钮:

toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code'

测试:你应该能再工具菜单中看到源代码项。点击此按钮即可开始编辑HTML源代码。

示例:


tinymce.init({
  selector: '#html',
  plugins: 'codemirror',
  toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code',
  codemirror: {
    indentOnInit: true, // Whether or not to indent code on init. 
    path: 'CodeMirror', // Path to CodeMirror distribution
    config: {           // CodeMirror config object
       mode: 'application/x-httpd-php',
       lineNumbers: false
    },
    jsFiles: [          // Additional JS files to load
       'mode/clike/clike.js',
       'mode/php/php.js'
    ]
  }
});

本文链接:http://bookshadow.com/weblog/2014/03/01/codemirror4tinymce/
请尊重作者的劳动成果,转载请注明出处!书影博客保留对文章的所有权利。

如果您喜欢这篇博文,欢迎您捐赠书影博客: ,查看支付宝二维码