ckeditor syntaxhighlighter代码高亮插件配置分享

2024-12-03 20:43:59

最近由于自己想做一个网站形式的代码库，自已写一个在线文本编辑器，对于现在的我来，确实是很不切实际，呵呵！再说了，现在有一个非常好的在线文本编辑器（ckeditor)了，我和必再去费这等功夫呢！有现成的，拿过用就是的呗！正所谓的拿来主义！不过这个在线文本编辑器，对于我们程序员来说有一个算是缺陷吧！没有代码高亮的功能！这样把代码贴上去，很不好看！今天晚上，我总是把他给弄出来了。当然也采在别人的肩膀上做成的。在此感谢他们的分享！费话不多说了！咱们进入正题吧！

首先去官方网站下载个ckeditor

其次去官方网站下载个syntaxhighlighter ,这个是代码高亮插件。

还有就是请把我下面提供下载的Demo里的syntaxhighlighter/shBrushes.js文件

下载以后，把他们解压，加入项目，如下所示：

然后在ckeditor下面新建一个文件夹，命名为：insertcode，然后在"insertcode"目录下新建一个"plugin.js"，输入以下代码：

CKEDITOR.plugins.add('insertcode', {
  requires: ['dialog'],
  init: function (a) {
    var b = a.addCommand('insertcode', new CKEDITOR.dialogCommand('insertcode'));
    a.ui.addButton('insertcode', {
      label: a.lang.insertcode.toolbar,
      command: 'insertcode',
      icon: this.path + 'images/code.jpg'
    });
    CKEDITOR.dialog.add('insertcode', this.path + 'dialogs/insertcode.js');
  }
});

目录结构如下图：图二

再新建一个images文件夹，放入一个"code.jpg"的图片，如上图所示，当然图片可以从google找一个，16*16大小的就好了。

再新建一个dialogs文件夹，新建一个"insertcode.js"，输入如下代码：

CKEDITOR.dialog.add('insertcode', function (editor) {
  var escape = function (value) {
    return value;
  };
  return {
    title: 'Insert Code Dialog',
    resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
    minWidth: 720,
    minHeight: 480,
    contents: [{
      id: 'cb',
      name: 'cb',
      label: 'cb',
      title: 'cb',
      elements: [{
        type: 'select',
        label: 'Language',
        id: 'lang',
        required: true,
        'default': 'csharp',
        items: [['ActionScript3', 'as3'], ['Bash/shell', 'bash'], ['C#', 'csharp'], ['C++', 'cpp'], ['CSS', 'css'], ['Delphi', 'delphi'], ['Diff', 'diff'], ['Groovy', 'groovy'], ['Html', 'xhtml'], ['JavaScript', 'js'], ['Java', 'java'], ['JavaFX', 'jfx'], ['Perl', 'perl'], ['PHP', 'php'], ['Plain Text', 'plain'], ['PowerShell', 'ps'], ['Python', 'py'], ['Ruby', 'rails'], ['Scala', 'scala'], ['SQL', 'sql'], ['Visual Basic', 'vb'], ['XML', 'xml']]
      }, {
        type: 'textarea',
        style: 'width:700px;height:420px',
        label: 'Code',
        id: 'code',
        rows: 31,
        'default': ''
      }]
    }],
    onOk: function () {
      code = this.getValueOf('cb', 'code');
      lang = this.getValueOf('cb', 'lang');
      html = '' + escape(code) + '';
      editor.insertHtml("<pre class=\"brush:" + lang + ";\">" + html + "</pre>");
    },
    onLoad: function () {
    }
  };
});

接下来，我们就把高亮插件插入到ckeditor里来，找到ckeditor文件夹下的"ckeditor.js"。按ctrl+F查找"about"，找到"fullPage:false,height:200,plugins:'about,basicstyles"，我们在"about"后面增加",insertcode"，这里就变成"plugins:'about,insertcode,basicstyles"。

如图：

继续查找"about"，找到"j.add('about',{init:function(l){var m=l.addCommand('about',new a.dialogCommand('about'));m.modes={wysiwyg:1,source:1};m.canUndo=false;l.ui.addButton('About',{label:l.lang.about.title,command:'about'});a.dialog.add('about',this.path+'dialogs/about.js');}});"，我们在这个分号后面增加"j.add('insertcode', {requires: ['dialog'],init: function(l){l.addCommand('insertcode', new a.dialogCommand('insertcode'));l.ui.addButton('insertcode', {label: l.lang.insertcode.toolbar,command: 'insertcode',icon: this.path + 'images/code.jpg'});a.dialog.add('insertcode', this.path + 'dialogs/insertcode.js');}});"。

如下图：

接下来继续在ckeditor.js查找"i.toolbar_Basic="，这就是CKEditor默认的工具栏了，我们在这里加上",insertcode"，比如我的"['Maximize','ShowBlocks','-','insertcode']"

我添加在如下图选中的文本那个地方：

最后一步：进入"ckeditor\lang"，请注意是分别在"en.js","zh.js","zh-cn.js"中增加",insertcode:'Insert Code'",",insertcode:'插入代碼'",",insertcode:'插入代码'"，一定要按这个顺序加哦。

如下图是en.js中的，zh-cn.js,zh.js我就不一一截图了。

最后在页面上添加如下引用：

<head runat="server">
  <title></title>
  <link type="text/css" rel="stylesheet" href="syntaxhighlighter_3.0.83/styles/shCore.css" />
  <link type="text/css" rel="stylesheet" href="syntaxhighlighter_3.0.83/styles/shThemeDefault.css" />
  <script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
  <script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushes.js"></script>
  <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
  <link type="text/css" rel="Stylesheet" href="syntaxhighlighter_3.0.83/styles/shCoreDefault.css" />
  <script type="text/javascript">    SyntaxHighlighter.all();</script>
</head>

页面的代码如下：

<form id="form1" runat="server">
  <div>
    <asp:TextBox ID="txtcontent" runat="server" TextMode="MultiLine" Height="310px"
      Width="100%"></asp:TextBox>
    <script type="text/javascript">
      CKEDITOR.replace('<%= txtcontent.ClientID %>', { skin: 'office2003' });
    </script>
    </script>--%>
    <asp:Button runat="server" Text="Button" OnClick="Unnamed1_Click" />
  </div>
  <asp:Literal ID="Literal1" runat="server"></asp:Literal>
  </form>

后台代码：

代码如下:

protected void Unnamed1_Click(object sender, EventArgs e)
    {
        this.Literal1.Text = txtcontent.Text;
    }

还有就是在页面的@ Page指令中加入 ValidateRequest="false"，加入后的@Page指令如下：

代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" ValidateRequest="false" %>

否则会报错的。

效果图：

怎么获取这个文本编辑器里的文本今天白天再写吧！该睡觉了，1点多了，O My god!

（O YE！现在总是很完善了的）

我的Demo下载：Cheditor+syntaxhighlighter Demo ,如果还有点不懂，请多多参考这个Demo，或者给我留言吧！

参考博文：http://zhidao.baidu.com/question/302527067.html
http://blog.sina.com.cn/s/blog_5fdcf5c90100uo4r.html
http://www.jb51.net/article/58407.htm

CKEditor中加入syntaxhighlighter代码高亮插件

从官网下载ckeditor,我下载的是CKEditor 3.3.1 .CKEditor与原来的FCKeditor有太大的不同了,作为开发人员,在做自己的博客的时候总是需要贴代码的,只好给它先做一个插入代码的插件了.高亮代码用的是"SyntaxHighlighter ". 1.在"ckeditor/plugins/"目录下新建一个"insertcode"目录,然后在"insertcode"目录下新建一个"plugin
ckeditor syntaxhighlighter代码高亮插件，完美修复

CKeditor的对象跟FCKeditor不大一样,不能直接调用innerHTML和outerHTML了,绕了个大弯子,在当前节点前插入一个新节点,然后删除原先的节点...很傻,不过解决了问题. 顺便给高级配置页多加了一个选项"不自动转换超链接",syntaxhighlighter默认会把代码里的网址转换成超链接,看起来很不爽,现在可以自由设置了,呵呵来个图使用方法: 1. 解压附件到plugins (sablog2.0在include\editor\plugins) 2. 打开C
ckeditor syntaxhighlighter代码高亮插件配置分享

最近由于自己想做一个网站形式的代码库,自已写一个在线文本编辑器,对于现在的我来,确实是很不切实际,呵呵!再说了,现在有一个非常好的在线文本编辑器(ckeditor)了,我和必再去费这等功夫呢!有现成的,拿过用就是的呗!正所谓的拿来主义!不过这个在线文本编辑器,对于我们程序员来说有一个算是缺陷吧!没有代码高亮的功能!这样把代码贴上去,很不好看!今天晚上,我总是把他给弄出来了.当然也采在别人的肩膀上做成的.在此感谢他们的分享!费话不多说了!咱们进入正题吧! 首先去官方网站下载个ckeditor 其次
FCKeditor 和 SyntaxHighlighter 代码高亮插件的整合

Introduction(简介) This is a dialog-based plugin to handle formatting of source code for FCKeditor 2.5.x. It WON'T work with the new CKEditor (yet).(CKEditor 是FCKEditor 的升级版,不过,SyntaxHighlighter 还不能在 CKEditor 中实现代码高亮) It makes use of the SyntaxHighligh
2014最热门的JavaScript代码高亮插件推荐

对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件,Sy
vue 代码高亮插件全面对比测评

全面对比从活跃方面来看从功能方面来看代码高亮是必须的,社区必须活跃,不然修复bug没有一点点参考,太费时间.自动补全缩进,快捷键操作,搜索和替换等功能不是必须的,如果有,能拿来装逼当然最好,不能也不影响使用. 故而挑出了以下几个,再具体分析,逐个调查,查看后续开发,部署的坑,坑少方便的就被我选中. 深入对比 1,ace Ace是一个用JavaScript编写的嵌入式代码编辑器.它与Sublime,Vim和TextMate等原生编辑器的功能和性能相匹配.它可以很容易地嵌入到任何网页和Java
highlight.js 代码高亮插件的使用详解

在网页使用过程中,经常会用到代码的展示.而不同颜色的代码,可以让代码看起来更直观,也更美观. 找了几个不同的插件,觉得highlight的插件比较实用,而且用起来炒鸡简单. 比如这样: 首先,我们先下载一个highlight的js文件. https://highlightjs.org/ 点击get version按钮进入语言选择勾选你常用的语言,在使用插件时会自动检测你要展示的代码的语言,并自动让代码高亮.通常common就足够用了. 然后点击下面的download按钮,下载,解压,里面会有j
SyntaxHighlighter 语法高亮插件的使用教程

首先到这里下载其源码.里面东西挺多的,我们基本上可以把它放到两个文件夹就是.其中shCore.js与shCore.js与clipboard.swf放到js文件夹中,shCore.css还有另一个CSS文件(随你挑一个吧)与所有图片放到style文件夹中.如果你想高亮html或xml代码,那么就在js多放一个shBrushXml.js,如果要高亮javascript代码,就要多加一个shBrushJScript.js代码.最后就是在我们的网页上引用它们. 复制代码代码如下: <link type
解决SyntaxHighlighter 代码高亮不换行问题的解决方法

解决方法: 打开shCoreDefault.css文件,找到对.syntaxhighlighter textarea的定义,在最后加上一句:word-break:break-all !important;就ok了,意思是让代码强制换行显示. 由于每个人调用的css不同,大家可以根据自己的需要修改css
Live Write 的代码高亮插件 Paste Code

然后用了一下VSPaste(原作者网站已经找不到了),感觉代码显示不爽.也用了CodePoste(呵呵,也是看网上找到的),这个感觉还不错的说,不过行数的显示让我觉得有些不爽.本来还想参考一下他的代码的,结果加密了,哈哈. 没办法,只有自己找找资料,自己写一个了.分析了一下,这个插件的难点主要在RTF格式转HTML,以我这么烂的技术是写不出来的.于是在网上找了一个(http://www.codeproject.com/KB/recipes/RtfConverter.aspx),用了几天的时候,写

ckeditor syntaxhighlighter代码高亮插件配置分享

相关推荐

随机推荐