FCKeditor 編輯器插入代碼功能實現步驟_網頁編輯器

來源:互聯網
上載者:User
功能強大得不得了,可以插入的語言套件括:C/C++,XML/HTML,JavaScript,CSS,C#,Java,PHP,Python,Ruby,SQL,ASP/Visual Basic,可選擇在前台顯示語言名稱、顯示行號、是否允許摺疊等功能,而且還有文法著色功能,比你想像的還要完美。而且可分為以文本域顯示代碼和有運行按鈕的可執行方式顯示。特向大家分享!
安裝方法如下:

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 樣式",(注意這句後面一定要加一個逗號“,”)下面加入以下代碼
//Plugins
InsertCodeBtn : "插入代碼"


3.為了可以使用插入代碼功能,需要在相應的頁面加入CSS代碼(insertcode.css),和下面的Js代碼。
========================================================
比如在文章模板頁連結Css檔案:
<link rel="stylesheet" type="text/css" href="/fckeditor/insertCode.css">
或者直接把css代碼拷貝到模板的css檔案中。
並在文章模板頁加入以下的js代碼。

複製代碼 代碼如下:

<script>
//以下是實現複製的代碼,請自己添加
//javascript
function $(id)
{
return document.getElementById(id);
}
//複製文本
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("複製成功!")
if(obj.style.display != 'none'){
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.collapse(false);
}
}
else
alert("請選中文本,使用 Ctrl+C 複製!");
}
</script>


4.修改fckeditor/fckconfig.js檔案,在編輯器控制台中加入按鈕,在調用工具列參數的Media後面加入insertcode(注意正確加上標點符號,否則會報錯)。如下所示:
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'],完成以上操作後,此時啟動fckeditor編輯器應該在編輯器的**上多了一個表徵圖,點擊此表徵圖即可添加你的代碼了。如果報錯,提示找不到工具項,那是FCKEDITOR的緩衝沒清除,退出後台或更新緩衝,重新整理一下,重新進入就可以看到代碼插入表徵圖了。

不知道怎麼上傳附件到這裡 - -#,我發個下載地址吧 :-) ,註冊個號,頂2貼就行!

檔案打包下載

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.