探讨fckeditor在Php中的配置详解

前言:
  FCKeidtor是个国外的多语言编辑器,你可以对其配置文件进行简单修改使之支持目前常用Web开发语言的应用,下面我就讲讲FCKeditor的最新版本2.4.2在php的具体配置过程,有不足和出错的地方,欢迎指正。

精简:
  正因为这个编辑器是支持多语言的,所以首先我们针对使用对其做相应的冗余文件删除。

1、临时文件及文件夹删除:从根目录下开始删除一切以“_”开头的文件及文件夹,因为他们为临时文件和文件夹。删除这类临时文件及文件夹之后,我们还要删除一些根目录下的多余文件,根目录下我们只保留fckconfig.js(配置文件)、fckeditor.js(js方式调用文件)、fckeditor.php(php方式调用文件,新版本通过该文件统一调用php4或者php5的调用文件,fckeditor_php4.php/fckeditor_php5.php你可以根据自己服务器使用的情况删减,建议都保留)、fckeditor_php4.php(php4的调用文件)、fckeditor_php5.php(php5的调用文件)、fckstyles.xml(样式)、fcktemplates.xml(模板)文件和editor文件夹。
2、editor/lang目录:存放的是多语言配置文件,因为我们只可能用到en和zh-cn(简体中文)所以,根据我的选择,我删掉其他的语言配置文件。
3、editor/skins界面目录:默认带有三个界面(default:默认界面,加载速度相对较快;office2003:相对pp的界面,不过速度确实要慢些;silver:银白色界面,加载速度也相对较快),可以自行决定是否删除其中一两个。
4、editor/filemanager/browser/default/connectors目录:存放编辑器所支持的Web动态语言,我们以php为例所以保留php目录,test.html文件可以帮助你查看某语言下的上传设置等(具体上传设置我将在后面的配置作较为详细讲解),可以自行决定是否删除。
5、editor/filemanager/upload目录:同理。
到此精简完成,你会发现整个编辑器确实“瘦身”不少,呵呵

基本配置:
下面我开始对编辑器进行简单配置(并非每步都必须,可根据自己的需要参考修改):
1、默认语言
打开fckconfig.js文件(注意此文件是utf-8编码哦),找到FCKConfig.AutoDetectLanguage = true ;(第56行)此句作用为自动检测语言,默认为true,即表示编辑器会根据系统语言自动检测加载相应的语言,我们将其改为false,不让其检测,然后将FCKConfig.DefaultLanguage = 'en';(编辑器默认语言,第57行)改为简体中文"zh-cn"。
2、字体列表
依然打开fckconfig.js,因为此编辑器为外国人编写,所以默认不提供中文字体,我们为其加入,找到FCKConfig.FontNames(第142行)加入“宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;”其他字体可根据自己需要自行加入。
3、文件上传
FCKeditor的文件管理程序在editor/filemanager/文件夹下,分为浏览(browser)和上传(upload)两种。“浏览”是指浏览服务器已存在文件并可以选择,也可以上传本地文件至服务器;上传是指快速上传,在窗口中点“上传”选项,选择本地文件后上传就行,但是不能查看服务器上已有上传文件,相对而言不太方便,只是操作更为快捷。也就是说FCKeditor中有一个文件浏览,有两个文件上传,而这些设置是分散在多个文件中,配置相对复杂,下面我大致讲一下:
在FCKeditor中共有三个文件跟上传功能有关,一个是js文件,两个是php文件,前者关闭后界面中不出现相关窗口或按钮,后者关闭后相关功能不可用。
js文件即是指的fckconfig.js文件,在以前旧版本的fckconfig.js中首先你必需开启如下几项:
浏览上传功能:
 
FCKConfig.LinkBrowser = true ; //文件
FCKConfig.ImageBrowser = true ; //图片
FCKConfig.FlashBrowser = true ; //Flash

快速上传功能:

FCKConfig.LinkUpload = true ; //同上
FCKConfig.ImageUpload = true ; //同上
FCKConfig.FlashUpload = true ; //同上

即把这几项设为true,而我们今天使用的2.4.2的fckconfig.js中默认已经是开启上传开关显示功能的,所以,如果你要将该编辑器作为前台使用(fckeditor上传漏洞问题一直没有得到较好的改善),考虑到安全性你可能需要关闭文件上传功能,那么你只需要将这几项设置为false即可(当然两个php文件你也不要开启上传功能哦)。
如果你要使用文件上传功能,那么我们继续配置:
依然在fckconfig.js文件中,fckeditor对语言默认支持的是asp,找到以下两句,进行相应修改:

var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py(第182行)
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php(第183行)

我们将其均改为'php':

var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py(第182行)
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php

在2.4.2版本中,我们发现增加了对更多文件后缀名的支持,这个应该是为了解决上传漏洞所作的些许改动,不过作用不大。
*.AllowedExtensions:(其中*号代表:FCKConfig.LinkUpload、FCKConfig.ImageUpload等)表示允许上传的文件后缀名,为空表示允许所有文件,你可根据自己需要设置上传文件后缀名,一定程度增加安全性,设置的格式可以参考它已有的后缀名设置。
*.DeniedExtensions:同上,表示禁止上传的文件后缀名。
注:你设置了允许上传的,当然禁止的也就不必要设置了,本人推荐设置允许的,毕竟禁止的后缀名列表不能罗列完全,可能还有很多我们不曾想到的后缀名。
对js文件的配置到此已经完成,下面我们进行两个php文件在上传方面的设置:
文件浏览上传修改:
打开editor/filemanager/browser/default/connectors/php/config.php文件,找到:
$Config['Enabled'] = false ;(第28行)将false改为true,即允许上传。
$Config['UserFilesPath'] = '/userfiles/' ;(第32行)为定义上传目录,可根据自己情况进行修改,我将其改为upload目录。
注:注意FCKeditor是不支持虚拟目录的,你的所有路径都是针对网站根目录的绝对路径。
文件快速上传修改:

打开文件editor/filemanager/upload/php/config.php文件,找到
$Config['Enabled'] = false ;(第28行)将false改为true。
$Config['UserFilesPath'] = '/UserFiles/' ;(第35行)同“文件浏览上传”的上传目录。
$Config['UseFileType'] = false ; (第32行)改为true,不然上传文件不会放在上传目录中
在该文件中,还有一项:
$Config['UserFilesAbsolutePath'] = '' ;(第41行)
这项的作用是设定上传的绝对路径,比如,你想指定上传文件到D:/Web/upload/下,你可以指定它的值为你的绝对路径,注意,如果你指定了该值,那你也要对$Config['UserFilesPath'] = '/UserFiles/' ;作相同的设置。
到此上传基本配置已经完成,整个编辑器最基本的配置也已经结束了,你可以通过下列代码对其进行调用测试了:
[php]<?php
include("/fckeditor/fckeditor.php"); // 包含fckeditor类,fckeditor目录放在网站根目录下
$BasePath = "/fckeditor/"; // 编辑器路径
$oFCKeditor = new FCKeditor('jayliao'); // 创建一个fckeditor对象,表单的名称为jayliao
$oFCKeditor->BasePath   = $BasePath;
$oFCKeditor->Value   = 'test'; // 设置表单初始值

// 还可设置以下部分(“=”包含部分),并非必须:
//==================================================================================//
$oFCKeditor->Width = '100%'; // 编辑器宽度,类中有默认值,如果不想修改可不管此项
$oFCKeditor->Height= '300'; // 同width,此处为高$oFCKeditor->ToolbarSet
$oFCKeditor->ToolbarSet = 'JayLiao'; // 默认编辑器工具栏有Basic(基本工具)和Default(所有工具)两种选择,JayLiao为本人自定义的工具条,如有需要可参考后文中的说明新建或修改工具条
$oFCKeditor->Config['SkinPath'] = '/fckeditor/editor/skins/office2003/'; // 设置编辑器皮肤
//==================================================================================//

$oFCKeditor->Create(); // 调用类中方法,必须
?>[/php]
赶紧测试一下吧,是不是很激动,终于可以看到这个强大的编辑器了。不过,马上你会发现在上传以中文命名的文件时会出现乱码,这到底是怎么回事呢?呵呵,不怕,下面我们就对其进行简单修改问题很快就解决的:
我们为上传文件以时间+随机数作为其新名字,打开:editor/filemanager/upload/php/upload.php,找到:
[php]$sFileName = $oFile['name'] ;[/php]
替换为:
[php]$sFileName = $oFile['name'] ;
$sOriginalFileName = $sFileName ;
$sExtension = substr( $sFileName, ( strrpos($sFileName, '.') + 1 ) ) ;
$sExtension = strtolower( $sExtension ) ;
$sFileName = date("YmdHis").rand(100, 200).".".$sExtension;[/php]
哈哈,你会发现“快速上传”的乱码已经解决,就这么简单,高兴之余不要忘了,同样,还需要修改“浏览”的上传,修改文件:editor/filemanager/browser/default/connectors/php/commands.php,修改内容同上。
另:你上传的中文文件不做以上命名修改可能在服务器上并非乱码,如果你只是为了在浏览的时候让编辑器正确显示该类文件名,那你可以作如下修改,打开:editor/filemanager/browser/default/connectors/php/util.php,修改ConvertToXmlAttribute函数,将:

return utf8_encode( htmlspecialchars( $value ) ) ;
修改为:

return iconv( "GBK", "UTF-8", htmlspecialchars($value) ) ;
这样,你的编辑器应该已经能正确显示中文名,不过强烈建议你修改上传文件的命名,中文名可能存在诸多不便。
当完成以上设置后,fckeditor已经能满足我们的日常使用需要,不过我们却又发现一个问题,那就是上传后的文件我们却无法删除,这样会使网站上的垃圾文件(主要是图片)日益增多,那我们是否能够通过对编辑器的修改能较为方便的管理删除无用上传文件呢?我们不难想到fckeditor的浏览文件功能,对该功能进行适当的扩展,对日常所上传的文件进行管理就变得相当简单易行了,那我们赶紧动手吧:
增加该功能我们修改的页面为:fckeditor/editor/filemanager/browser/default/frmresourceslist.html
第一步,在页面的body区域增加如下代码:

<div id="showFile" style="float:left; display:none; background-color:#999999"></div>
<iframe id="iframe_del" name="iframe_del" width="0" height="0" scrolling="no"></iframe>
<div id="body_content"></div>

说明:第一对<div></div>的作用是当我们把鼠标移动到所上传的文件上时显示其相关信息;<iframe></iframe>标签的作用是供我们删除上传文件时做动作响应窗口的,即是将我们的删除动作在iframe中运行,目的是实现伪无刷新删除效果;最后一对<div></div>的作用是显示上传文件及文件夹的列表(2.4较以前版本对<body></body>标签中内容作了调整,老版该页面以<table></table>作为存放列表的容器,而新版直接将显示容器在js中生成,为了使文件显示div和iframe两组标签正常使用,故在body标签中加入一对<div></div>标签,使之能正常使用,在我的尝试中,倘若不这样修改似乎有错,当然不排除我方法不当的原因)

第二步,在文件的js代码区中加入:

代码如下:

// add by jayliaoscu @ 2007-04-23 /*{{{{*/
// 显示文件显示层
function showDiv( fileUrl )
{
var name = fileUrl;
//获取文件类型
var suffix = name.substring(name.lastIndexOf(".")+1);

var div= document.getElementById("showFile");
div.content = "";
div.style.position = "absolute";
div.content += "<table width='256' border='0' cellpadding='3' cellspacing='1' bgcolor='#737357'><tbody><tr><td height='23' align='left' bgcolor='#C7C78F'><table width='100%' height='100%' border='0' cellpadding='0' cellspacing='0'><tbody><tr><td width='47%'> <a href='javascript:' onClick='hiddenDiv();'><font color='#000000' style='text-decoration:none;'>关闭</font></a></td><td width='53%' align='right'><a href='javascript:' onclick='delFile(/"" + fileUrl + "/");'><font color='#000000' style='text-decoration:none;'>删除</font></a> </td></tr></tbody></table></td></tr>";
if (suffix=='gif' || suffix=="jpg" || suffix=="jpeg" || suffix=="bmp" || suffix=="png")
{
 div.content += "<tr><td align='center' bgcolor='#C7C78F'><img src='" + fileUrl + "' onload='if(this.width>250) this.width=250' style='margin:3px;'></td></tr>";
}
else
{
 div.content += "<tr><td height='35' align='center' bgcolor='#C7C78F'><strong>该类型不能预览</strong></td></tr>";
}
div.content += "</tbody></table>";
div.innerHTML = div.content;
div.style.display = "";
div.style.top = event.y+document.body.scrollTop+10;
div.style.left = event.x+document.body.scrollLeft+30;
}
// 隐藏文件显示层
function hiddenDiv()
{
var div= document.getElementById("showFile");
div.style.display ="none";
}
// 在iframe中删除文件
function delFile( fileUrl )
{
if(!confirm('你确定删除该文件?'))
return;
var url = '/fckeditor/del_file.php?filePath='+ fileUrl;
window.open(url, "iframe_del");
Refresh();
}
///*}}}*/

第三步,修改本页面原有js
修改:


代码如下:

oListManager.Clear = function()
{
document.body.innerHTML = '' ;
}

为:


代码如下:

oListManager.Clear = function()
{
hiddenDiv();
document.getElementById("body_content").innerHTML = '' ; // body_content为我们在body区域增加的div标签
}

找到:


代码如下:

var sLink = '<a href="#" onclick="OpenFile(/'' + fileUrl.replace( /'/g, '///'') + '/');return false;">' ;

修改为:


代码如下:

var sLink = '<a href="#" onmouseover="showDiv(/'' + fileUrl + '/');" onclick="OpenFile(/'' + fileUrl.replace( /'/g, '///'') + '/');return false;">' ;     // 即是文件信息显示功能

修改:


代码如下:

function Refresh()
{
LoadResources( oConnector.ResourceType, oConnector.CurrentFolder ) ;
}

为:


代码如下:

function Refresh()
{
hiddenDiv(); // 所作修改,为了刷新列表时默认隐藏文件显示层
LoadResources( oConnector.ResourceType, oConnector.CurrentFolder ) ;
}

修改函数:GetFoldersAndFilesCallBack,找到:


代码如下:

document.body.innerHTML = oHtml.ToString() ;

修改为:


代码如下:

document.getElementById("body_content").innerHTML = oHtml.ToString() ;

最后,增加一个文件删除页面del_file.php(该文件路径和增加的js函数delFile(fileUrl)中的调用一致),作用为删除文件,给出成功与否的操作提示,参考代码:


代码如下:

[php]<?php
$filePath = "..".trim($_GET['filePath']);
if ( $filePath )
{
@unlink($filePath);
echo "<script>alert('删除成功。');</script>";
}
else
{
echo "<script>alert('删除错误,可能文件不存在或者已经删除。');</script>";
}
?>[/php]

至此,我对于fckeditor的修改基本完成,当然这些修改只是对fckeditor修改使用的抛砖引玉,给大家一个参考,希望对初学者有所帮助。后面对编辑器的修改过程比较匆忙,并未修改一步完成一步文档书写,所以,难免有所出错,望见谅,如果你有什么问题和错误发现欢迎联系我互相讨论,共同进步。
另附:
配置文件(fckconfig.js)中主要配置项目如下,根据自己看情况配置:

1.FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称
2.FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 编辑区的样式表文件
3.FCKConfig.BaseHref = ''; // 相对链接的基地址
4.FCKConfig.Debug = true/false; // 是否开启调试功能,当调用FCKDebug.Output()时,会在调试窗中输出内容
5.FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/'; // 设置皮肤
6.FCKConfig.AutoDetectLanguage = true/false ; // 是否自动检测语言
7.FCKConfig.DefaultLanguage = 'zh-cn' ; // 设置默认语言
8.FCKConfig.ContentLangDirection = 'ltr/rtr'; // 默认文字方向,ltr左,rtr右
9.FCKConfig.FillEmptyBlocks = true/false ; // 使用这个功能,可以将空的块级元素用空格来替代
10.FCKConfig.FormatSource = true/false; // 切换到代码视图时,是否自动格式化代码
11.FCKConfig.FormatOutput = true/false; // 当输出内容时是否自动格式化代码
12.FCKConfig.FormatIndentator = ""; // 当在“源码格式”下缩进代码使用的字符
13.FCKConfig.GeckoUseSPAN = true/false; // 是否允许SPAN标记代替B,I,U标记
14.FCKConfig.StartupFocus = true/false; // 开启时是否FOCUS到编辑器
15.FCKConfig.ForcePasteAsPlainText = true/false;// 强制粘贴为纯文本
16.FCKConfig.ForceSimpleAmpersand = true/false; // 是否不把&符号转换为XML实体
17.FCKConfig.TabSpaces = 0/1; // TAB是否有效
18.FCKConfig.TabSpaces = 4; // TAB键产生的空格字符数
19.FCKConfig.ShowBorders = true/false; // 是否合并边框
20.FCKConfig.ToolbarStartExpanded = true/false; // 页面载入时,工具栏是否展开,点“展开工具栏”时才出现
21.FCKConfig.ToolBarCanCollapse = true/false; // 是否允许展开折叠工具栏
22.FCKConfig.ToolbarSets = object ; // 编辑器的工具栏,可以自行定义,删减,可参考已存在工具栏
23.FCKConfig.EnterMode = 'p'; // 编辑器中直接回车,在代码中生成,可选为p | div | br
24.FCKConfig.ShiftEnterMode = 'br'; // 编辑器中Shift+回车,在代码中生成,可选为p | div | br
25.FCKConfig.ContextMenu = 字符串数组; // 右键菜单的内容
26.FCKConfig.FontColors = ""; // 文字颜色列表
27.FCKConfig.FontNames = ""; // 字体列表
28.FCKConfig.FontSizes = ""; // 字号列表
29.FCKConfig.FontFormats = ""; // 文字格式列表
30.FCKConfig.StylesXmlPath = ""; // CSS样式列表的XML文件的位置
31.FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置
32.FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼写检查器
33.FCKConfig.IeSpellDownloadUrl = ""; // 下载拼写检查器的网址
34.FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/'; // 表情文件存放路径
35.FCKConfig.SmileyImages = ''; // 表情文件名称列表,具体参考默认设置
36.FCKConfig.SmileyColumns = 8; // 表情窗口显示表情列数
37.FCKConfig.SmileyWindowWidth = 320; // 表情窗口显示宽度,此窗口会因为表情文件的改变而作调整
38.FCKConfig.SmileyWindowHeight = 240; // 表情窗口显示高度,此窗口会因为表情文件的改变而作调整
39.FCKConfig.FullPage = true/false; // 是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容

时间: 2013-06-07

将FCKeditor导入PHP+SMARTY的实现方法

本文实例讲述了将FCKeditor导入PHP+SMARTY的实现方法.分享给大家供大家参考.具体分析如下: 提取Fckeditor时,采用如下,PHP用$_POST['p_info']得到FCKeditor的值. 补充: 1 .此处basepath 的路径一定要和上面include的路径一样.否则会找不到文件 另外,对于这个输入内容的变量,如果要把它存入数据库教程,它的变量名为你建立对象的名字.例如上面就是 "p_info". 2. 在FCKeditor/_samples/里面有个ph

fckeditor粘贴Word时弹出窗口取消的方法

本文实例讲述了fckeditor粘贴Word时弹出窗口取消的方法.分享给大家供大家参考.具体方法如下: 用fckeditor作为用户发布的编辑框,允许用户发布Word.默认的情况下,粘取进word时,提示是否清除word样式,选择"是"则弹出一个框,需要再粘贴一次来清除word样式.这个操作很麻烦,因此要取消. 开始找到的方法是把ckeditor/" target="_blank">fckeditoreditorjs下的fckeditorcode_i

Smarty中调用FCKeditor的方法

本文实例讲述了Smarty中调用FCKeditor的方法,分享给大家供大家参考.具体实现方法如下: FCKeditor是目前互联网上最好的在线编辑器. smarty是一个使用PHP写出来的模板PHP模板引擎,它提供了逻辑与外在内容的分离,简单的讲,目的就是要使用PHP程序员同美工分离,使用的程序 员改变程序的逻辑内容不会影响到美工的页面设计,美工重新修改页面不会影响到程序的程序逻辑,这在多人合作的项目中显的尤为重要. 在Smarty中调用FCKeditor的文件: 复制代码 代码如下: requ

FCKeditor smarty 编辑器的应用PHP

感谢csdn社区 hsboy用户的帖子 原文: 6 楼hsboy(PHP it!)回复于 2006-03-05 18:44:07 得分60 假设 1.你要用fckeditor编辑的内容通过$smarty->assign('content', $content)传递到模板 2.fckeditor编辑器放在当前被调用的php程序所在目录(注意不是模板文件所在的目录)的fckeditor目录下 则模板只需这样写即可: 复制代码 代码如下: <script type="text/javasc

fckeditor编辑器下的自定义分页符实现方法

这里我们小编参考了几篇文章特为大家整理下,用到的朋友多支持一下了. 进行长文章分页,编辑人员在控制分页符的时候手工插入很麻烦,所以修改了FCK的插入分页符的插入字符: 修改方法: 打开/editor/js/ 找到fckeditorcode_gecko.js和fckeditorcode_ie.js 因为fck有二个js文件.fckeditorcode_gecko.js是针对非ie的.一个是针对ie的.所以我们需要更改二个js的文件. 这样方便我们以后插入分页时,就不需要那么一大串的了. 找到: v

实例(Smarty+FCKeditor新闻系统)

以下是主文件index.php的内容: 复制代码 代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <?php  require('./global.php');  require('./smarty/libs/Smarty.class.php');  require('./mysql.php');  require('./FCKeditor/fck

FCKeditor + SyntaxHighlighter 让代码高亮着色插件

FCKeditor是现在最为流行的开源编辑器,SyntaxHighlighter是一个用JS实现的代码高亮显示插件,可以最小化修改您的程序实现效果,最终效果截图: 演示网页: 下载FCKeditor + SyntaxHighlighter插件包:fck_SyntaxHighlighter我们打包版 下面分步介绍如何在FCKeditor环境中使用SyntaxHighlighter. 后台FCKeditor编辑器的修改 1.将包解压后,把 insertcode 文件夹上传到 FCKeditor编辑器

prettify 代码高亮着色器google出品

在<head></head>标签之间加入这两行代码: 复制代码 代码如下: <link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"/> <script src="http://google-code-prettify.go

2014最热门的JavaScript代码高亮插件推荐

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

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

CKEditor中加入syntaxhighlighter代码高亮插件

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

SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色

上网搜索了一下相关的文章不少,大同小异,本人一直使用的是CKeditor的文字编辑器,所以偿试使用网上很多网友介绍的SyntaxHighlighter配合CKEditor插件的方式实现.可能是因为SyntaxHighlighter和CKEditor版本不同,过程中遇到了一些问题,解决的同时也根据个人理解做部分调整,所以本文所描述的方法仅供参考. 一.SyntaxHighlighter简介 SyntaxHighlighter(原名:dp.SyntaxHighlighter)是一套在浏览器上对各种代

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

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

asp.net 为FCKeditor开发代码高亮插件实现代码

所以就为FCKeditor写了个InsertCode的插件.整个插件的制作过程非常简单:FCKeditor插件开发请参考FCKeditor官网的文档: http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Customization/Plug-ins 首先,我们在FCKeditor/editor/plugins目录下新建一个insertcode目录,并在insertcode目录下新建一个fckplugin.js文件. 在新建的fckpl

防止SyntaxHighlighter.js的代码高亮时闪一下的解决方法

SyntaxHighlighter.js是一个代码高亮的JS插件,使用也很简单,但是由于是浏览器段执行JS代码来着色,会出现视觉上闪一下的效果.比如你的20行代码网页打开显示高度为100px,但是SyntaxHighlighter高亮后该区域高度变为120px 加上颜色的变化,这样的体验特别不好. 解决原理:把pre标签的样式定义为 高亮后的样式即可 解决方法:在shCoreDefault.css文件加上如下样式 pre { line-height:22px !important; backgr

Windows Live Writer 实现代码高亮

为了实现代码高亮,之前找了很多插件,但是效果都不是很理想.经过研究终于找到一个完美的解决方案,这个解决方案具有如下优点: 代码简洁,用<pre>标签实现代码高亮,不会生成太多Html标签. 支持多种语言,包括c#,c++,php,python等10多种语言. 扩充方便,可以通过简单二次开发实现对其它语言的支持. 使用方便,把代码复制到代码高亮转换窗口即可. 下面一步步介绍如何配置WLW+wordpress的代码高亮解决方案: 1.准备工作: 下载 precode code snippet ma