html查看器显示javascipts,rails4项目中使用ckeditor+syntaxhighlighter实现代码高亮显示...-CSDN博客

最近在帮师兄的朋友做一个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、在需要编辑器的页面

即可。

其他的跟附件上传的功能见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 = "" + html + "";

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"的属性得以保留并存入数据库。

经过这些操作之后就可以在编辑器中点击按钮插入代码了。当然，在需要显示内容的地方使用，这个在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中加入代码

并在需要高亮显示的网页文件中加入代码：

注意：一般的网上教程都是像上面这行代码来实现着色的，但是在自己的项目中却一直不能实现，原因大概是因为使用了ajax的局部刷新，把SyntaxHighlighter.all(); 改为SyntaxHighlighter.highlight();之后就把问题解决了。

运行你的项目，实际看一下效果吧～～

也是初学rails不久，可能有很多东西还理解不到位，欢迎大家批评指正～