最近在帮师兄的朋友做一个rails项目，需要用到富文本编辑器，尝试了几个比如国产的kindeditor，还有这里要介绍的ckeditor等等
kindeditor有自带的代码插件，可是不知道为什么使用ajax局刷的时候编辑器总是不能正常加载
于是又尝试了ckeditor，发现按照网上的一些教程操作之后可以使用。最主要参考的文章是这篇：http://my.eoe.cn/guanmac/archive/5806.html
其实这篇文章介绍的一些在使用中也会遇到问题，于是做了一些修改。因为基本上没有用到附件上传功能，所以可能一些操作对这些功能也有影响，还请多多指出。
总的思路是：一、将ckeditor加入到项目中——二、将代码输入插件加入到ckeditor的插件中——三、将syntaxhighlighter显示插件加入进去
一、将ckeditor加入到项目中
1、在github下载最新的ckeditor，地址：https://github.com/galetahub/ckeditor 并解压，ckeditor-master/vendor/assets/javascripts/目录下的ckeditor文件夹复制到你项目的vendor/assets/javascripts/下；将ckeditor-master/app/assets/javascripts/ckeditor/目录下的init.js.erb和override.js.erb文件移至项目的vendor/assets/javascripts/ckeditor/目录下。
2、在gemfile中输入两个插件
gem 'ckeditor'
gem 'paperclip'
3、运行
bundle install
安装插件。
4、运行
rails generate ckeditor:install
5、运行
rails generate ckeditor:install --orm=active_record --backend=paperclip
6、创建数据表
并执行
rake db:migrate
7、在各文件中添加如下代码
#config/application.rb
class Application < Rails::Application
config.autoload_paths += %W(#{config.root}/app/models/ckeditor)
end
#config/routes.rb
mount Ckeditor::Engine => "/ckeditor" #这个可能已经有了
#config/environments/production.rb
#config/environments/development.rb
config.assets.precompile += Ckeditor.assets
8、加入代码
#app/assets/javascripts/application.js
//= require ckeditor/override
9、在需要编辑器的页面
<%= javascript_include_tag "ckeditor/init" %>
<%= f.cktext_area :content %>
即可。
其他的跟附件上传的功能见http://my.eoe.cn/guanmac/archive/5806.html 就好。对这部分没有研究
二、将代码输入插件加入到ckeditor的插件中
这里介绍两种方式，分别是自己写插件和使用pbckcode
1）自己写插件
1、在vendor/assets/javascripts/ckeditor/plugins/目录下新建文件夹insertcode
2、在文件夹下新建文件“plugin.js”，并写入代码如下：
CKEDITOR.plugins.add('insertcode',
{
init: function(editor)
{
//plugin code goes here
var pluginName = 'Insertcode';
CKEDITOR.dialog.add(pluginName, this.path + 'insertcode.js');
editor.config.flv_path = editor.config.flv_path || (this.path);
editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
editor.ui.addButton('Insertcode',
{
label: '插入代码', //这个好像是鼠标移到按钮上显示的文字
command: pluginName,
icon: this.path + 'insertcode.png'
});
}
});
3、在文件夹下新建文件“insertcode.js”，并写入代码如下：
CKEDITOR.dialog.add('Insertcode', function(editor){
var escape = function(value){return value;};
return{
title: '插入代码',
resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
minWidth: 600,
minHeight: 420,
contents: [{
id: 'cb2',
name: 'cb2',
label: 'cb2',
title: 'cb2',
elements: [{
type: 'select',
label: '代码语言',
id: 'langgg',
required: true,
'default': 'csharp',
items: [ ['C#', 'csharp'], ['C++', 'cpp'], ['CSS', 'css'], ['Delphi', 'delphi'], ['JavaScript', 'js'], ['Java', 'java'],['PHP', 'php'], ['Python', 'py'], ['Ruby', 'rails'],['SQL', 'sql'], ['XML', 'xml']]
}, {
type: 'textarea',
style: 'width:590px;height:350px',
label: '代码',
id: 'codeddd',
rows: 20,
'default': ''
}]
}],
onOk: function(){
code = this.getValueOf('cb2', 'codeddd');
lang = this.getValueOf('cb2', 'langgg');
html = '' + escape(code) + '';alert(code);alert(lang);
var text = "<pre class=\"brush:" + lang + "\">" + html + "</pre>";
editor.insertHtml(text,'unfiltered_html');
},
onLoad: function(){}
};
});
注意倒数第五行 editor.insertHtml(text,'unfiltered_html'); 一句，使用了第二个参数，insertHtml的用法可以参见ckeditor的官方文档
items:项之后的语言对室可以插入的语言种类，以 ['C#', 'csharp']为例，显示为C#，生成的代码为class="brush:csharp"，所以，为了配合syntaxhighlighter高亮，请注意csharp与syntaxhighlighter着色库中的代码种类相同
4、文件夹下加一张图片，名称为“insertcode.png”
5、在vendor/assets/javascripts/ckeditor/config.js中写入代码：
CKEDITOR.editorConfig = function( config ) {
config.language = 'zh-cn';
config.toolbar = [
[ 'Source', '-', 'Bold', 'Italic','Underline','Strike','-','Subscript','Superscript' ],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'], ['Maximize','Preview'],['Insertcode']
];
config.extraPlugins = 'insertcode';
CKEDITOR.config.allowedContent = true;
};
注意 CKEDITOR.config.allowedContent = true; 一句，这句的作用跟 editor.insertHtml(text,'unfiltered_html'); 一同，使得class="brush:XXX"的属性得以保留并存入数据库。
经过这些操作之后就可以在编辑器中点击按钮插入代码了。 当然，在需要显示内容的地方使用 <%= raw XXXX %>，这个在rails里面不难理解
手动添加插件的方法比较直观，代码量也不大，理解和修改起来也比较容易，但是有几个不太算问题的问题：插入代码时的编辑实在是太不够用户友好了，既不能自动补全和缩进，又不能直接高亮显示，这就用到了接下来要介绍的插件pbckcode
2）使用pbckeditor
pbckeditor插件的下载地址：https://github.com/prbaron/PBCKCode
使用步骤：
1、解压后将文件夹名称改为 pbckcode，并放入到ckeditor的plugins目录下
2、在vendor/assets/javascripts/ckeditor/config.js中写入代码：
config.toolbar = [
[ 'Source', '-', 'Bold', 'Italic','Underline','Strike','-','Subscript','Superscript' ],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],['pbckcode'],
['Maximize','Preview']
];
config.extraPlugins = 'pbckcode';
config.pbckcode = {
modes : [ ['HTML', 'html'], ['CSS', 'css'], ['PHP', 'php'], ['JS', 'javascript'],["C#", "csharp"],["Java", "java"],['c/c++','c_cpp'],['Python','python'] ],
highlighter : "SYNTAX_HIGHLIGHTER",
};
mode是设置语言选项的，含义跟手写插件中的含义相同。 highlighter表示使用哪种着色库，这里选择的当然是syntaxhighlighter。需要指出的是，在syntaxhighlighter中，c++对应的类型是cpp，而pbckcode中对应的则是c_cpp，为了对应以及保持原有的自动缩进和高亮功能，可以修改pbckcode/dialogs/ace/目录中的文件，把mode-c_cpp.js改名为mode-cpp.js，并将文件中所有的c_cpp替换为cpp。
运行你的rails项目，感受pbckcode带来的快感吧～
三、将syntaxhighlighter显示插件加入进去
现在的工作，其实只是编辑器插入带有着色标签的代码段，如果直接raw出来是没有任何高亮和着色效果的。想要实现显示效果，还需要加入syntaxhighlighter的支持
步骤：
1、下载，地址：http://alexgorbatchev.com/SyntaxHighlighter/download/ 解压后重新命名文件夹为syntaxhighlighter，将文件夹放到跟ckeditor同级目录
2、在syntaxhighlighter/scripts文件夹下新建shBrushes.js文件，将所有打算支持的语言种类对应的shXXX.js文件中的主要代码全部拷贝进去。不懂的shXXX.js就不要管了
3、在app/views/layouts/application.html.erb中加入代码
<%= stylesheet_link_tag "syntaxhighlighter/styles/shCore" %>
<%= stylesheet_link_tag "syntaxhighlighter/styles/shThemeDefault" %>
<%= javascript_include_tag "syntaxhighlighter/scripts/shCore" %>
<%= javascript_include_tag "syntaxhighlighter/scripts/shBrushes" %>
并在需要高亮显示的网页文件中加入代码：
<script type="text/javascript">SyntaxHighlighter.all();</script>
注意：一般的网上教程都是像上面这行代码来实现着色的，但是在自己的项目中却一直不能实现，原因大概是因为使用了ajax的局部刷新，把SyntaxHighlighter.all(); 改为SyntaxHighlighter.highlight();之后就把问题解决了。
运行你的项目，实际看一下效果吧～～
也是初学rails不久，可能有很多东西还理解不到位，欢迎大家批评指正～
183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
