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

澳门新浦京娱乐游戏 17

最近由于自己想做一个网站形式的代码库,自已写一个在线文本编辑器,对于现在的我来,确实是很不切实际,呵呵!再说了,现在有一个非常好的在线文本编辑器

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

在线编辑内容的时候,那些基于 JavaScript
的编辑器帮了我们大忙,这些所见即所得(WYSIWYG)编辑器,给我们提供了类似
Office?的操作体验。如今,任何网站内容管理系统(CMS)和博客系统都需要一个这样的编辑器。本文精选了5个基于
JavaScript?的编辑器,5个基于 jQuery 框架的编辑器。 MarkitUp – jQuery

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

首先去官方网站下载个ckeditor

Official Website | Demo
澳门新浦京娱乐游戏 1

参考博文:_5fdcf5c90100uo4r.html

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

markItUp!
它不是一个“全功能,乱用”的编辑器。相反,它是一个非常轻量级的,可定制的和灵活的文本编辑器,以满足发展的需要,在其CMSes
,博客,论坛或网站。 markItUp
!不是一个WYSIWYG编辑器,它是简易实用的文本编辑器。
快速移植和使用
支持键盘快捷键 支持Ajax的动态预览 兼容的浏览器: IE7, Safari 3.1, Firefox
2, Firefox 3. IE6 and Opera 9+ as-is. 许可: MIT/GPL 文件:
便携,节省资源,只有 6.5Kb. jWYSIWYG – jQuery

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

Official Website | Demo
澳门新浦京娱乐游戏 2

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

jWYSIWYG,此插件是一个内置的内容编辑器,允许编辑HTML内容。这是一种替代WYMeditor与便捷实用的功能。文件大小不到
17Kb和26Kb总额只有9Kb 18Kb的代码和7Kb便携。
GNU General Public License
v2 小巧轻便 支持Ajax的动态预览 兼容主流浏览器 Lightweight RTE- jQuery

澳门新浦京娱乐游戏 3

Official Website | Demo
澳门新浦京娱乐游戏 4

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

这一丰富文本编辑器尽可能的简单容易的改变我们基本的编辑需求。
超轻量级,只有 7kb 兼容主流浏览器 简洁,优雅 GNU General Public License
HTMLBox – jQuery

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’);
  } });

Official Website | Demo
澳门新浦京娱乐游戏 5

目录结构如下图:图二

HTMLBox,跨浏览器的,开源的HTML /
XHTML文本基础上的jQuery库。通过了Mozilla Firefox , Inrernet浏览器,
Netscape和Safari浏览器的测试。一体化的HtmlBox易于集成到CMS,论坛,留言板,博客中。

易于集成 兼容主流浏览器. 大小只有 15kb (最小 11kb ) 支持XHTML输出.
支持Ajax的动态预览
有完整的用户手册,这将引导您完成每一步的整合HtmlBox到您的应用和定制它。
D Small Rich Text Editor – jQuery

澳门新浦京娱乐游戏 6

Official Website | Demo
澳门新浦京娱乐游戏 7

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

丰富的文本编辑器,应用了IFRAME元素,功能非常全,能满足我们复杂的文本编辑。
大小(~18k) ! (便携/Minified JS, Plugins & CSS合起来有12k w/o GZIP, HTML
can be reduced to ~3k using GZIP, Images (w/o emoticons) are less than
3k) 兼容主流浏览器 支持所有的基本功能 支持插件功能 图片上传,通过AJAX
实现(使用的是 AjaxFileUpload plugin). 可以调整文本区域。 支持XHTML 1.0
验证 和 过滤(Note: this refers to the editor’s markup and not to it’s
generated content which may or may not be valid!). 具有 HTML 修正功能
WYMEditor – jQuery

再新建一个dialogs文件夹,新建一个”insertcode.js”,输入如下代码:

Official Website澳门新浦京娱乐游戏 , | Demo
澳门新浦京娱乐游戏 8

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 () {     }   }; });

WYMeditor是一个基于网络的WYSIWYM (你所看到的你的意思)的XHTML编辑器。
WYMeditor的主要概念是离开的细节文件的视觉版面,并把重点放在它的结构和意义,同时努力为用户提供舒适的文本编辑器

XHTML strict + CSS compliant 没有字体或文本格式, 大小或颜色 –
它们是基于您的css样式的 便于集成至您的应用程序中 无需安装,这是100
%的Javascript代码编写的-无插件,不延时 支持Image, link, table 支持 CSS
有APIs,支持插件 自由和开放源码 兼容主流浏览器 TinyMCE – non-jQuery

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

Official Website | Demo
澳门新浦京娱乐游戏 9

如图:

TinyMCE是一个独立的平台,基于Web的Javascript的 HTML
WYSIWYG编辑器,是开源的。超强的HTML文本或其他元素转换能力,以编辑实例。

易于集成-只需要几行代码 自定义-主题和插件,阻止无效的要素和属性。
兼容主流浏览器 – Mozilla, MSIE, FireFox, Opera, Safari and Chrome.
轻量级的 – PHP/.NET/JSP/Coldfusion GZip compressor, Makes TinyMCE 75%
smaller and a lot faster to load. 兼容AJAX- Compatible – You can easily
use AJAX to save and load content! 支持国际化 – Multilanguage support
using language packs. 开源 – Free under the LGPL license, millions of
ppl help test and improve this editor every day. fckeditor – Non-jQuery

澳门新浦京娱乐游戏 10

Official Website | Demo
澳门新浦京娱乐游戏 11

 继续查找”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’);}});”。

此HTML文本编辑器具有类似于MS Word一样的功能。它轻量级,无需安装
兼容主流浏览器 支持XHTML 1.0 可以定制自己的CSS 字体格式: type, size,
color, style, bold, italic, etc 文本格式: alignment, indentation,
bullets list, etc 支持 Cut, Paste, and Paste as Plain Text, Undo and
Redo Paste from Word cleanup with auto detection
支持插入图片,上传,预览 单击右键有下拉菜单 支持 插件 有智能拼写检查程序
轻量级的和快速的 自动检测和个性化的浏览器 Yahoo YUI Rich Text Editor –
Non-jQuery

 如下图:

Official Website | Demo
澳门新浦京娱乐游戏 12

澳门新浦京娱乐游戏 13

The Rich Text Editor是Yahoo
YUI开发的,它可以取代标准HTML文本;支持文本字体选择,加粗,斜体
,有序列表,无序列表,链接,拖放图片,工具栏通过插件是可扩展,能够实现高度的个性化设置.

Xinha – Non-jQuery

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

Official Website | Demo
澳门新浦京娱乐游戏 14

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

Xinha (pronounced like Xena, the Warrior
Princess)是一个功能强大的所见即所得的HTML编辑器组件,在支持目前所有的浏览器。其configurabilty和可扩展性,可以很容易地
生成合适的内容,无限制

澳门新浦京娱乐游戏 15

来源:

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

JavaScript
的编辑器帮了我们大忙,这些所见即所得(WYSIWYG)编辑器,给我们提供了类似
Office?的操作体验。…

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

澳门新浦京娱乐游戏 16

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

<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”
%>

否则会报错的。

效果图:

澳门新浦京娱乐游戏 17

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

(O YE!现在总是很完善了的)

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

参考博文:

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图