ckeditor for wordpress 添加 syntaxhighlighter 按钮

代码的高亮一直来都是个问题,很多东西只能凑和着来,就像本文要说的 syntaxhighter 一样,解析真的好慢呀,不过高亮效果却是不错的smiley

在ckeditor for wordpress 的基础上添加 syntaxhighter 按钮支持,以方便添加代码,这个可不能少。修改步骤如下:

  1. SyntaxHighlighter Plugin 插件,此 ckeditor 插件是由 Lajox 写的,项目地址:http://code.google.com/p/lajox/,下载 SyntaxHighlighter Plugin 即可,之后解压至 ckeditor for wordpress 插件目录下的 plugins 目录。
  2. 修改 ckeditor for wordpress 插件目录下 ckeditor.config.js 文件,首先在 config.toolbar_WordpressFull 字段下添加 syntaxhighlight 按钮,然后在下面调用插件,完整的 ckeditor.config.js 是类似于下面片断的:
  3. 在 wordpress 后台的 ckeditor for wordpress 插件选项中,修改 Basic settings 下 Editor toolbar 为wordpress full,之后就可以在编辑的时候使用 wordpress full 工具栏了,而我们的syntaxhighlight便是在这个工具栏里面放着。至此,就完成了,粘贴代码来回切换源代码和可视窗口之间已经不会出现转义混乱的情况了,当然,有了 ckeditor 和这个按钮,应该不需要经常切换了吧。
CKEDITOR.editorConfig = function(config) {
	// The minimum editor width, in pixels, when resizing it with the resize handle.
	config.resize_minWidth = 450;
 
	// Protect PHP code tags (<?...?>) so CKEditor will not break them when
	// switching from Source to WYSIWYG.
	config.protectedSource.push(/<\?[\s\S]*?\?>/g);
 
	// Define toolbars, you can remove or add buttons.
	// List of all buttons is here: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.toolbar_Full
 
	// WordPress basic toolbar
	config.toolbar_WordpressBasic = [ [ 'Bold', 'Italic', '-', 'NumberedList','BulletedList', '-', 'Link', 'Unlink', 'Image' ] ];
 
	// WordPress full toolbar
	config.toolbar_WordpressFull = [
			['Source'],
			['Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker', 'Scayt'],
			['Undo','Redo','Find','Replace','-','SelectAll','RemoveFormat'],
			['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],
			'/',
			['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
			['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
			['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
			['Link','Unlink','Anchor'],
			'/',
			['Format','Font','FontSize'],
			['TextColor','BGColor'],
			['Maximize', 'ShowBlocks', 'syntaxhighlight'],['MediaEmbed']
		 ];
    config.extraPlugins += (config.extraPlugins ? ',syntaxhighlight' : 'syntaxhighlight' );
    CKEDITOR.plugins.addExternal('syntaxhighlight', ckeditorSettings.pluginPath + 'plugins/syntaxhighlight/');
};

About the Author

在讀研究生,化學/化工專業,主要關注學佛、計算化學、C++、Python、計算機、古文化、哲學、思維方向,渴求與有共同興趣的朋友交流,詳情請查看“關于”頁面。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

Copyright © 2012 勿慢牛 - All Rights Reserved. - Admin - Powered by WordPress