TinyMCE wysiwyg 编辑器是一款非常基本的HTML源代码编辑器。作者av01d实现了一款针对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/
请尊重作者的劳动成果，转载请注明出处！书影博客保留对文章的所有权利。

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