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/
请尊重作者的劳动成果,转载请注明出处!书影博客保留对文章的所有权利。

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

Pingbacks已关闭。

评论
  1. pongpong1983 pongpong1983 发布于 2014年12月24日 16:13 #

    博主你好, 请教一个问题, 我按照http://www.avoid.org/codemirror-for-tinymce4/ 把codemirror加到tinymce作为plugin,但是当我在HTML source code里面写代码,保存后代码的换行全不见了。

    google了一些,试着把下面几行添到tinyMCE.init

    forced_root_block : true,
    force_br_newlines : false,
    force_p_newlines : true,
    convert_newlines_to_brs : false

    但是换行消失的问题依然存在,请问博主有什么解决办法?

    另外除了tinymce, zinnia还有没有其它code editor好推荐的?
    谢谢!

  2. 在线疯狂 在线疯狂 发布于 2014年12月24日 16:39 #

    关于“换行消失”这个问题我也没有什么太好的建议。。。除了tinymce,建议你试一下ckeditor,个人感觉ckeditor的易用性比tinymce要好一些,zinnia也可以很好的支持ckeditor。可以参考一下这篇博文:http://bookshadow.com/weblog/2014/08/18/django-blog-zinnia-ckeditor/

  3. pongpong1983 pongpong1983 发布于 2014年12月25日 13:24 #

    谢谢博主,我已经换成ckeditor了:)

张贴您的评论