FCKeditor 编辑器插入代码功能实现步骤

功能强大得不得了，可以插入的语言包括：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贴就行!

文件打包下载

赞 (0)

相关推荐

  • javascript fckeditor编辑器取值与赋值实现代码

    获取编辑器中HTML内容 复制代码 代码如下: function getEditorHTMLContents(EditorName) { var oEditor = FCKeditorAPI.GetInstance(EditorName); return(oEditor.GetXHTML(true)); } 获取编辑器中文字内容 复制代码 代码如下: function getEditorTextContents(EditorName) { var oEditor = FCKeditorAPI.G

  • 页面上存在多个FckEditor编辑器的验证方法

    有时我们需要在一个页面上使用多个Fck的实例,首先需要按照id获取fck的实例.例如: 复制代码 代码如下: <FCKeditorV2:FCKeditor ID="fckDescription" runat="server" ToolbarSet="Basic" Height="250"> </FCKeditorV2:FCKeditor> 使用FCKeditorAPI.GetInstance获取Fck实

  • FCKEditor网页编辑器 几点使用心得

    1.挂接事件,比如onkeydown事件,要在FCKeditor_OnComplete里实现: 复制代码 代码如下: function FCKeditor_OnComplete( editorInstance ) { if (document.all) // IE editorInstance.EditorDocument.attachEvent("onkeypress", FCKeditor_OnKeyup) ; else// other browser editorInstance

  • FCKeditor 网页在线编辑器的使用方法

    它不需要安装任何形式的客户端,兼容绝大多数主流浏览器,支持ASP.Net.ASP.ColdFusion .PHP.Jsp.Active-FoxPro.Lasso.Perl.ython 等编程环境. 官方网站 http://www.fckeditor.net/ 官方文档 http://wiki.fckeditor.net/ 下载地址 http://www.fckeditor.net/download/default.html FCKeditor安装和配置 下载FCKeditor2.63.zip和F

  • javascript 获取FCKeditor内容

    形式如: 复制代码 代码如下: varoEditor=FCKeditorAPI.GetInstance('content'); varcontent=oEditor.GetXHTML(true); ************************************************* 利用Javascript取和设FCKeditor值也是非常容易的,如下: 复制代码 代码如下: // 获取编辑器中HTML内容 function getEditorHTMLContents(Editor

  • Js FCKeditor的值获取和修改的代码小结

    利用Javascript取和设FCKeditor值也是非常容易的,如下: // 获取编辑器中HTML内容 function getEditorHTMLContents(EditorName) { var oEditor = FCKeditorAPI.GetInstance(EditorName); return(oEditor.GetXHTML(true)); } // 获取编辑器中文字内容 function getEditorTextContents(EditorName) { var oEd

  • FCKeditor 编辑器插入代码功能实现步骤

    功能强大得不得了,可以插入的语言包括:C/C++,XML/HTML,JavaScript,CSS,C#,Java,PHP,Python,Ruby,SQL,ASP/Visual Basic,可选择在前台显示语言名称.显示行号.是否允许折叠等功能,而且还有语法着色功能,比你想像的还要完美.而且可分为以文本域显示代码和有运行按钮的可执行方式显示.特向大家分享! 安装方法如下: 1.下载压缩包后,将文件夹insertcode拷贝到fckeditor\editor\plugins\目录下,然后修改fcke

  • 向fckeditor编辑器插入指定代码的方法

    function insertHTMLToEditor(obj) {       var oEditor = FCKeditorAPI.GetInstance("content");       if(oEditor.EditMode == FCK_EDITMODE_WYSIWYG)       {              oEditor.InsertHtml(obj)       }       else      {               return false;    

  • CKEditor 附插入代码的插件

    CKEditor 附插入代码的插件

    按照惯例,先来段废话:CKEditor是新一代的FCKeditor,是一个重新开发的版本.CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站. 从官网下载ckeditor,我下载的是ckeditor_3.0.2.CKEditor与原来的FCKeditor有太大的不同了,作为开发人员,在做自己的博客的时候总是需要贴代码的,只好给它先做一个插入代码的插件了.高亮代码用的是"SyntaxHighlighter". 1.在"cked

  • 使用Js获取、插入和更改FCKeditor编辑器里的内容

    之前在一个系统里使用了FCKeditor编辑器,由于项目需求需要在FCKeditor里添加一个自定义的按钮用于实现自己的需求 主要是在点击该按钮时删除或添加FCKeditor编辑器里的内容 其实是一个很简单的需求,本来以为在FCKeditor可以很容易的实现 在Google上搜索自定义按钮,插件开发,经过近二个小时的摸索最终还是没有实现不知是我太笨还是自定义插件太难啦 通过JS方式来处理 1.在页面中添加checkbox元素并绑定事件,选中该元素时将在FCKeditor内容里添加"{#book#

  • 一款支持插入表情的编辑器实现代码(简单思路挺重要)

    下面是一个表情列表,为了简单我直接在li里面放图片的文件名称,而class 属性用来存放对应的标记 复制代码 代码如下: <ul id="faceList"> <li class="wx">0.gif</li> <li class="pz">1.gif</li> <li class="se">2.gif</li> </ul> 接下来

  • ThinkPHP中FCKeditor编辑器的使用方法

    而且可以用直接上传和ajax两种方式处理内容.为了给一些还没能成功地集成fckeditor的同侪们一些启发与帮助, 兹将我的经验与体会描述如下:应用目的:将FCKeditor编辑器集成到Thinkphp中,使用户能够在线像编辑Word一样处理即将发表的文字与图像. 应用软件与环境:apache服务器2.0以上版本,PHP版本5.0以上,mysql5.0以上:Thinkphp版本1.5或以上,Fckeditor版本2.x. 应用步骤: 1.下载FCKeditor2.x版本,将解压后的文件夹FCKe

  • element ui富文本编辑器的使用效果与步骤(quill-editor)

    目录 效果展示:(可以上传图片及其视频) 第一步.首先安装富文本编辑器插件 第二步.然后在main.js文件中,全局注册 第三步.在vue界面中使用quill-editor 第四步:配置video.js(要有上传视频且回显的功能需要配置) 总结 效果展示:(可以上传图片及其视频) 可以拖拽图片大小及其位置 第一步.首先安装富文本编辑器插件 cnpm install vue-quill-editor --save cnpm install quill-image-drop-module --sav

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

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

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

  • 针对PHP环境下Fckeditor编辑器上传图片配置详细教程

    开启Fckeditor上传图片功能 考虑到目录安全性问题,默认Fckeditor2.6.6上传功能并未开启,所以第一步我们必须开启Fckeditor上传功能,这里需要注意,由于PHP版本Fckeditor上传功能需要用到chomod函数对新建目录进行权限设置,所以请务必确认在启用Fckeditor上传功能时PHP环境的用户具有创建和更改上传目录的权限. 如果没有开启Fckeditor上传功能,在点击插入/编辑图像按钮,选择上传,在选择完要上传的文件后点击发送到服务器上按钮时会报错误信息如下 复制

  • FCKeditor编辑器添加图片上传功能及图片路径问题解决方法

    FCKeditor编辑器添加图片上传功能及图片路径问题解决方法

    现在很多CMS系统因为安全原因会把后台编辑器里的上传功能给去除,但这样一来对实际使用过程造成了很多麻烦,今天我们以ASPCMS系统的FCKeditor编辑器为例,说明一下如何增加图片上传功能. 1． 打开网站后台编辑器里的admin/editor/fckconfig.js这个文件 找到FCKConfig.ImageUpload = false 这句,把false改成true就行啦. FCKConfig.ImageBrowser = false ; 这里也同样把false改成true 2． 看一下

随机推荐