如何在Drupal 中设置 Ckeditor模块 使用Syntaxhighlighter代码高亮

Question

如题所述

Answer 1

1，安装<a href="http://www.drupalla.com/project/ckeditor" class="alinks-link" title="模块介绍：FCKEditor是用常用的网版的页文本编辑器， Drupal的FCKEditor模块也已有很长的历史了，其与IMCE, Image Browser等模块结合起来使用也是非常的爽。不过现在，FCKEditor升级了新版本，换了个新皮肤，做了些优化，将名称更改为：CKEditor。安装方式和FCKeditor一模一样，没有任何变化，而且也可以和IMCE集成。">Ckeditor 模块。
首先下载 Ckeditor 模块，并安装， 然后下载 Ckeditor libraries，解压到/sites/all/libraries，进入后台设置，
Drupal6：Administer > Site Configuration > Ckeditor
Drupal7：Administer > Config > Content > Ckeditor

配置你准备用到Syntaxhighlighter的配置文件。同时要确保
确保你的用户角色已获准访问这个Ckeditor的配置
确保你的可见性设置正确

2，安装Syntax Highlighter模块和库
下载Syntax Highlighter 模块，并且安装
下载Syntax Highlight library，解压到/site/all/libraries
进入Administation > Site Configuration > Syntax highlighter（Drupal6）或 Administation > Config > Content > Syntaxhighlighter（Drupal7），勾选你想打开的格式。

3，安装Syntax highlighter Ckeditor plugin
下载Ckeditor plugin解压到sites/all/module/ckeditor/plugins/syntaxhighlight
然后编辑/sites/all/modules/ckeditor/ckeditor.config.js
增加28行跟75行
?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

/*
<a href="/project/copyright" class="alinks-link" title="模块介绍：可以设定网站整体和单篇内容的著作权/授权声明。管理者可以设定可选用的著作权种类，呈现在区块或页尾里。手册页面（Book）可以选择性地设定所有子页面为同一著作权声明，并让每一份手册或区域有其自己的著作权声明。">Copyright</a> (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/

/*
WARNING: clear browser's cache after you modify this file.
If you don't do this, you may notice that browser is ignoring all your changes.
*/
CKEDITOR.editorConfig = function(config) {
config.indentClasses = [ 'rteindent1', 'rteindent2', 'rteindent3', 'rteindent4' ];

// [ Left, Center, Right, Justified ]
config.justifyClasses = [ 'rteleft', 'rtecenter', 'rteright', 'rtejustify' ];

// 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 <a href="/project/wysiwyg" class="alinks-link" title="模块介绍：“What You See Is What You Get” 的首字母缩写，即有“所见即所得”的意思。 Drupal 默认只提供简单的文本框，并未加载任何编辑器。这对于大多数干接触 Drupal 的国内用户来讲，真是十分的不方便 :D WYSIWYG 是用于集成“所见即所得”编辑器的接口，通过使用 WYSIWYG 模块，能够为 Drupal 集成数十种国内外流行的所见即所得编辑器，管理员可根据自己的喜好来选择不同的编辑器。 目前用得比较多的编辑器有：CKEditor, TinyMCE, FCKE">WYSIWYG</a>.
// Uncommenting this line doesn't mean the user will not be able to type PHP
// code in the source. This kind of prevention must be done in the server
// side
// (as does Drupal), so just leave this line as is.
config.protectedSource.push(/<\?[\s\S]*?\?>/g); // PHP Code
config.protectedSource.push(/<code>[\s\S]*?<\/code>/gi); // Code tags
config.extraPlugins = '';
config.extraPlugins += (config.extraPlugins ? ',syntaxhighlight' : 'syntaxhighlight' );

// Define as many toolbars as you need, you can change toolbar names and remove or add buttons.
// List of all buttons is here: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.toolbar_Full

// This toolbar should work fine with "Filtered HTML" filter
config.toolbar_DrupalFiltered = [
['Source'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker', 'Scayt'],
['Undo','Redo','Find','Replace','-','SelectAll','RemoveFormat'],
['<a href="/project/image" class="alinks-link" title="模块介绍：让有特定权限的用户可以上传图片到网站里，并且会自动产生缩图。图片可以使用在文章里（例如透过tinymce编辑工具进行选取），或是作成简单的网络相簿。">Image</a>','Flash','Table','HorizontalRule','<a href="/project/smiley" class="alinks-link" title="模块介绍： 让文本编辑器支持表情">Smiley</a>','SpecialChar'],
['Maximize', 'ShowBlocks'],
'/',
['Format'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiRtl','BidiLtr'],
['<a href="/project/link" class="alinks-link" title="模块介绍：与 File Field 和 Image Field 类似，Link 也为 CCK 增加了一种扩展类型，即链接字段。通过使用链接字段，用户可以向节点中添加链接，链接包括 URL，标题及可选的 target 属性。">Link</a>','Unlink','Anchor','<a href="/project/linkit" class="alinks-link" title="模块介绍：通过使用一个自动完成字段，使节点、用户、视图和术语支持内部链接。">Linkit</a>','LinkToNode','LinkToMenu'],
['DrupalBreak', 'DrupalPageBreak']
];

/*
* DrupalBasic will be forced on some smaller textareas (if enabled)
* if you change the name of DrupalBasic, you have to update
* CKEDITOR_FORCE_SIMPLE_TOOLBAR_NAME in ckeditor.module
*/
config.toolbar_DrupalBasic = [ [ 'Format', 'Bold', 'Italic', '-', 'NumberedList','BulletedList', '-', 'Link', 'Unlink', 'Image' ] ];

/*
* This toolbar is dedicated to users with "Full HTML" access some of commands
* used here (like 'FontName') use inline styles, which unfortunately are
* stripped by "Filtered HTML" filter
*/
config.toolbar_DrupalFull = [
['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','-','BidiRtl','BidiLtr'],
['Link','Unlink','Anchor','Linkit','LinkToNode', 'LinkToMenu'],
'/',
['Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks'],
['DrupalBreak', 'DrupalPageBreak', 'Code']
];

/*
* Append here extra CSS <a href="/project/rules" class="alinks-link" title="模块介绍：可以设置一些规则，当某事件发生时，自动执行某些动作。比如有人回复就自动给作者发信等等。drupal自带的trigger太简单，这个功能比较全，用起来还挺方便。">rules</a> that should be applied into the editing area.
* Example:
* config.extraCss = 'body {color:#FF0000;}';
*/
config.extraCss = '';
/**
* Sample extraCss code for the "marinelli" theme.
*/
var themeName = Drupal.settings.ckeditor.theme;
if (typeof themeName == "object") {
themeName = Drupal.settings.ckeditor.theme[0];
}
if (themeName == "marinelli") {
config.extraCss += "body{background:#FFF;text-align:left;font-size:0.8em;}";
config.extraCss += "#primary ol, #primary ul{margin:10px 0 10px 25px;}";
}
if (themeName == "newsflash") {
config.extraCss = "body{min-width:400px}";
}

/**
* CKEditor's editing area body ID & class.
* See http://drupal.ckeditor.com/tricks
* This setting can be used if CKEditor does not work well with your theme by default.
*/
config.bodyClass = '';
config.bodyId = '';
/**
* Sample bodyClass and BodyId for the "marinelli" theme.
*/
if (themeName == "marinelli") {
config.bodyClass = 'singlepage';
config.bodyId = 'primary';
}
};