ckeditor+代码高亮
更新提示:现在大家可以不必像我这样为了实现代码高亮的功能,去修改ckeditor编辑器,大家可以去使用百度编辑器(Ueditor)他有代码高亮的功能,还蛮好用的,我的个人网站就是的百度编辑器的。欢迎大家去我的博客看看。
最近由于自己想做一个网站形式的代码库,自已写一个在线文本编辑器,对于现在的我来,确实是很不切实际,呵呵!再说了,现在有一个非常好的在线文本编辑器(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.cnblogs.com/html8/archive/2011/07/29/2121427.html
转载于:https://www.cnblogs.com/koeltp/archive/2012/03/31/2426259.html
ckeditor+代码高亮相关推荐
- ckeditor4.4.6添加代码高亮
研究了很久才发现,在 ckeditor4.4.6中添加代码高亮超级简单啊,下面直接上过程 ckeditor4.4.6支持自定义代码高亮,利用Code Snippet插件并默认启用highlight.j ...
- CKEditor代码高亮显示插件Code Snippet安装及使用方法
CKEditor网页编辑器 CKEditor 即 FCKEDITOR .FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写.具备功能强大.配置容易.跨浏览器.支持 ...
- 博客园自定义页面风格设计 后续篇(页面设计模式及代码高亮 鼠标点击效果升级)...
前言 在之前所写过的博客园自定义页面风格设计篇中,我们已经说明了其中两种风格的页面设计,鼠标图案的修改,公告栏的设置,背景音乐的制作,关于CSS以及用Canvas和requestAnimFrame做动 ...
- 在博客园添加Lisp(或其它)代码高亮
由于我这一段对Emacs很有兴趣,发了不少关于这玩意儿的文章.但博客园的代码高亮并不支持Emacs Lisp,之前一直也没怎么管,前几天看见李杀的这篇 Syntax Coloring with Goo ...
- idea中properties配置文件没有代码提示及代码高亮问题解决方案
idea中properties配置文件没有代码提示及代码高亮问题解决方案 参考文章: (1)idea中properties配置文件没有代码提示及代码高亮问题解决方案 (2)https://www.cn ...
- 博客园Markdown模式的MATLAB代码高亮方案
前言 博客园随笔写作可以使用 Markdown 进行编辑,当展示代码时,可以使用下面的语法来对代码块进行展示: ```language code-content ``` 一般来说,指明了 lang ...
- FCKeditor 2.4.3精简优化带代码高亮(Dphighlighter)插件版
FCKeditor 2.4.3精简优化带代码高亮(Dphighlighter)插件版 转自:http://www.sablog.net/blog/archives/288/ 不要问我有没有上传功能,或 ...
- Word中使用代码高亮插件
Word中使用代码高亮插件 1.下载并安装:SyntaxHighlighter4Word.zip 解压,然后双击bin\word2010\Kong.SyntaxHighlighter.Word2010 ...
- Discuz7使用syntaxhighlighter_2.0.320实现代码高亮
Discuz7使用syntaxhighlighter_2.0.320实现代码高亮 一.修改./templates/default/discuzcode.htm文件 在function tpl_code ...
- 代码高亮_微信公众号代码高亮美化工具 Markdown Nice
微信公众号代码高亮美化工具 使用 Chrome 浏览器把右侧生成的页面直接拷贝到微信中即可. https://www.mdnice.com/ // 目录[TOC] 1. Markdown Nice 简 ...
最新文章
- Autocad 3D 完全学习教程
- Java 基础 之 continue和 break
- ubuntu上建立mini2440 qt编译环境
- 异步实现,查询大量数据时的加载
- 服务器控件转换成HTML
- 围绕sqlite构建一个简单的Typescript ORM
- 翁恺老师C语言学习笔记(十)指针_指针运算
- python天气数据分析可视化_python可视化爬虫界面之天气查询
- 【深度学习之美】激活引入非线性,池化预防过拟合(入门系列之十二)
- 那些必须要知道的Javascript
- SysUtils.UpperCase、SysUtils.LowerCase - 大小写转换
- ctf 改变图片高度_CTF中.htaccess文件的利用
- U盘容量变小后修复的方法
- iOS app上架app store流程详解
- ios设置tabbar背景颜色_IOS UITabBarViewController 修改背景颜色
- MYS-6ULX-IOT 开发板测评——实现简单的物联网应用
- InsecureProgramming-master——abo4
- g2o学习记录(4)cmake-gui再次编译g2o及不太完美的处理cs.h错误[20190323已找到完美解决方案](非干货纯记录,可不看)
- 微信小程序3天刷量开流量主
- HTML5+CSS3小实例:自定义滤镜实现液体加载动画
热门文章
- kubernetes kubeadm init kube-apiserver.yaml already exists
- github API 实例 python源码 爬取用户信息
- JavaSE基础———对象数组和集合Collection
- jquery mysql php_PHP+jQuery+MySQL来实现一个在线测试项目
- javascript基础之拖拽(2)(详细篇)---FileReader对象,blod对象
- LayaAir 位图添加遮罩与滤镜
- php rsa2 微博,微博登录分析
- 阶段3 1.Mybatis_11.Mybatis的缓存_8 mybatis的二级缓存
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_02 递归_4_练习_递归打印多级目录...
- UnityWebReqest和WWW,请求web数据打包到Android手机上,报错 Unknown error记录