TinyMCE wysiwyg 编辑器是一款非常基本的HTML源代码编辑器。作者av01d实现了一款针对TinyMCE的插件使得编辑HTML源代码的经历更加令人愉快。这款插件基于卓越的CodeMirror代码编辑器,由Marijn Haverbeke开发。
CodeMirror4TinyMCE项目链接:http://www.avoid.org/codemirror-for-tinymce4/
这款插件提供了如下功能:
- HTML, Javascript和PHP代码语法高亮
- 显示行号
- 高亮当前编辑行
- 自动缩进
- 多重Undo/Redo
- 搜索/替换功能
- 等等...
说明:
- 下载和安装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/
请尊重作者的劳动成果,转载请注明出处!书影博客保留对文章的所有权利。
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好推荐的?
谢谢!
在线疯狂 发布于 2014年12月24日 16:39 #
关于“换行消失”这个问题我也没有什么太好的建议。。。除了tinymce,建议你试一下ckeditor,个人感觉ckeditor的易用性比tinymce要好一些,zinnia也可以很好的支持ckeditor。可以参考一下这篇博文:http://bookshadow.com/weblog/2014/08/18/django-blog-zinnia-ckeditor/
pongpong1983 发布于 2014年12月25日 13:24 #
谢谢博主,我已经换成ckeditor了:)