FCKeditor 編輯器插入代碼功能實(shí)現(xiàn)步驟
更新時(shí)間：2009年11月24日 02:07:52 作者：
4步輕松打造可以應(yīng)用于任何FCK編輯器的CMS及其他程序,一個(gè)Fckeditor編輯器的插件，it560獨(dú)家首發(fā)教程,無需增加字段，不修改代碼，完全綠色環(huán)保。
功能強(qiáng)大得不得了，可以插入的語言包括：C/C++，XML/HTML，JavaScript，CSS，C#，Java，PHP，Python，Ruby，SQL，ASP/Visual Basic，可選擇在前臺(tái)顯示語言名稱、顯示行號(hào)、是否允許折疊等功能，而且還有語法著色功能，比你想像的還要完美。而且可分為以文本域顯示代碼和有運(yùn)行按鈕的可執(zhí)行方式顯示。特向大家分享！
安裝方法如下：
1.下載壓縮包后，將文件夾insertcode拷貝到fckeditor\editor\plugins\目錄下，然后修改fckeditor/fckconfig.js此文件，在此文件中FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;下面加入以下代碼：
FCKConfig.Plugins.Add('insertcode');
2.打開fckeditor\editor\lang文件夾里的zh-cn.js，在DlgDivInlineStyle : "CSS 樣式",（注意這句后面一定要加一個(gè)逗號(hào)“,”）下面加入以下代碼
//Plugins
InsertCodeBtn : "插入代碼"
3.為了可以使用插入代碼功能，需要在相應(yīng)的頁面加入CSS代碼(insertcode.css)，和下面的Js代碼。
========================================================
比如在文章模板頁鏈接Css文件：
<link rel="stylesheet" type="text/css" href="/fckeditor/insertCode.css">
或者直接把css代碼拷貝到模板的css文件中。
并在文章模板頁加入以下的js代碼。
<script>
//以下是實(shí)現(xiàn)復(fù)制的代碼，請(qǐng)自己添加
//javascript
function $(id)
{
return document.getElementById(id);
}
//復(fù)制文本
function copyIdText(id)
{
copy( $(id).innerText,$(id) );
}
function copyIdHtml(id)
{
copy( $(id).innerHTML,$(id) );
}
function copy(txt,obj)
{
if(window.clipboardData)
{
window.clipboardData.clearData();
window.clipboardData.setData("Text", txt);
alert("復(fù)制成功！")
if(obj.style.display != 'none'){
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.collapse(false);
}
}
else
alert("請(qǐng)選中文本，使用 Ctrl+C 復(fù)制!");
}
</script>
4.修改fckeditor/fckconfig.js文件，在編輯器控制面板中加入按鈕，在調(diào)用工具欄參數(shù)的Media后面加入insertcode（注意正確加上標(biāo)點(diǎn)符號(hào)，否則會(huì)報(bào)錯(cuò)）。如下所示：
FCKConfig.ToolbarSets[ "standard"] = [
['Source','Paste','PasteText','PasteWord','-','Undo','Redo','-','Bold','Italic','Underline','StrikeThrough','TextColor','Table','-','JustifyLeft','JustifyCenter','JustifyRight','OrderedList','UnorderedList','-','Image','Attach','Flash','Media','InsertCode'],完成以上操作后，此時(shí)啟動(dòng)fckeditor編輯器應(yīng)該在編輯器的**上多了一個(gè)圖標(biāo)，點(diǎn)擊此圖標(biāo)即可添加你的代碼了。如果報(bào)錯(cuò)，提示找不到工具項(xiàng)，那是FCKEDITOR的緩存沒清除，退出后臺(tái)或更新緩存，刷新一下，重新進(jìn)入就可以看到代碼插入圖標(biāo)了。
不知道怎么上傳附件到這里 - -#,我發(fā)個(gè)下載地址吧 :-) ,注冊(cè)個(gè)號(hào)，頂2貼就行!
文件打包下載
安裝方法如下：
1.下載壓縮包后，將文件夾insertcode拷貝到fckeditor\editor\plugins\目錄下，然后修改fckeditor/fckconfig.js此文件，在此文件中FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;下面加入以下代碼：
FCKConfig.Plugins.Add('insertcode');
2.打開fckeditor\editor\lang文件夾里的zh-cn.js，在DlgDivInlineStyle : "CSS 樣式",（注意這句后面一定要加一個(gè)逗號(hào)“,”）下面加入以下代碼
//Plugins
InsertCodeBtn : "插入代碼"
3.為了可以使用插入代碼功能，需要在相應(yīng)的頁面加入CSS代碼(insertcode.css)，和下面的Js代碼。
========================================================
比如在文章模板頁鏈接Css文件：
<link rel="stylesheet" type="text/css" href="/fckeditor/insertCode.css">
或者直接把css代碼拷貝到模板的css文件中。
并在文章模板頁加入以下的js代碼。
復(fù)制代碼 代碼如下:
<script>
//以下是實(shí)現(xiàn)復(fù)制的代碼，請(qǐng)自己添加
//javascript
function $(id)
{
return document.getElementById(id);
}
//復(fù)制文本
function copyIdText(id)
{
copy( $(id).innerText,$(id) );
}
function copyIdHtml(id)
{
copy( $(id).innerHTML,$(id) );
}
function copy(txt,obj)
{
if(window.clipboardData)
{
window.clipboardData.clearData();
window.clipboardData.setData("Text", txt);
alert("復(fù)制成功！")
if(obj.style.display != 'none'){
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.collapse(false);
}
}
else
alert("請(qǐng)選中文本，使用 Ctrl+C 復(fù)制!");
}
</script>
4.修改fckeditor/fckconfig.js文件，在編輯器控制面板中加入按鈕，在調(diào)用工具欄參數(shù)的Media后面加入insertcode（注意正確加上標(biāo)點(diǎn)符號(hào)，否則會(huì)報(bào)錯(cuò)）。如下所示：
FCKConfig.ToolbarSets[ "standard"] = [
['Source','Paste','PasteText','PasteWord','-','Undo','Redo','-','Bold','Italic','Underline','StrikeThrough','TextColor','Table','-','JustifyLeft','JustifyCenter','JustifyRight','OrderedList','UnorderedList','-','Image','Attach','Flash','Media','InsertCode'],完成以上操作后，此時(shí)啟動(dòng)fckeditor編輯器應(yīng)該在編輯器的**上多了一個(gè)圖標(biāo)，點(diǎn)擊此圖標(biāo)即可添加你的代碼了。如果報(bào)錯(cuò)，提示找不到工具項(xiàng)，那是FCKEDITOR的緩存沒清除，退出后臺(tái)或更新緩存，刷新一下，重新進(jìn)入就可以看到代碼插入圖標(biāo)了。
不知道怎么上傳附件到這里 - -#,我發(fā)個(gè)下載地址吧 :-) ,注冊(cè)個(gè)號(hào)，頂2貼就行!
文件打包下載
相關(guān)文章
首先,FCKEDITOR的性能是非常好的,用戶只需很少的時(shí)間就可以載入FCKEDITOR所需文件.對(duì)于其他在線編輯器來 說,這幾乎是個(gè)很難解決的難題2009-05-05
這篇文章主要介紹了ueditor編輯器不能上傳圖片問題的解決方法,需要的朋友可以參考下2015-05-05
我用fckeditor 上傳圖片時(shí)，只要圖片一大，上傳到服務(wù)器后就變小了，而且圖片顏色也失真了。2009-07-07
UEditor 默認(rèn)字體和字號(hào)的修改方法
這篇文章主要介紹了UEditor 默認(rèn)字體和字號(hào)的修改方法,需要的朋友可以參考下2017-03-03
xhEditor的異步載入實(shí)現(xiàn)代碼，需要的朋友可以參考下。2009-11-11
Ueditor和CKeditor 兩款編輯器的使用與配置方法
這篇文章主要介紹了Ueditor和CKeditor 兩款編輯器的使用與配置方法,需要的朋友可以參考下2017-03-03
UEditor編輯文章出現(xiàn)多余空行問題的解決辦法
這篇文章主要介紹了UEditor編輯文章出現(xiàn)多余空行問題的解決辦法,問題表現(xiàn)為編輯文章時(shí),會(huì)在文章的首尾各多出一個(gè)空行,需要的朋友可以參考下2014-07-07
FCKeditor 編輯器插入代碼功能實(shí)現(xiàn)步驟
4步輕松打造可以應(yīng)用于任何FCK編輯器的CMS及其他程序,一個(gè)Fckeditor編輯器的插件，it560獨(dú)家首發(fā)教程,無需增加字段，不修改代碼，完全綠色環(huán)保。2009-11-11
這篇文章主要為大家介紹了幾款好用的前端編輯器，還在因?yàn)橹恢酪粋€(gè)編輯器被同事嘲笑嗎？看完給他上一課?。。〗ㄗh讀者朋友們收藏，總有一款適合你2021-10-10
FCKeditor 2.0版終于出來了，之所以用“終于”這個(gè)詞，是因?yàn)樵谶@一版本上加上了眾望所歸的FLASH插入功能。2009-02-02