`

运行代码,插入媒体,插入代码,上传附件for FCKeditor

 
阅读更多
不求别人,但求自己!自己动手给Fckeditor增加插件..

顺便 给大家 完美版 Fckeditor 2.6.2
(包含 runcode[运行代码] Media[插入媒体]  InsertCode[插入代码] FileUpload[上传附件]

separator[插入截断符] newpage[插入分页符])

runcode[运行代码] for UBB (这里是作为插件来进行设置)



最近在调试 HighLighter for Bo-Blog's Fckeditor
HighLighter[高亮显示] 组件等制作好了将一同传上来


完美版 Fckeditor 2.6.2
下载: Fckeditor 2.62 完美版 For Bo-Blog.rar (339.71 KB)

使用说明:
1. 上传 Fckeditor 到 默认的插件目录 下
2. 修改 模板文件
比如我们用的是 Bo-Blog
那么我们就在 template/您的模板/elements.php  里 在相应位置加上面那句代码
比如 在 <title>{pagetitle}{blogname} - {blogdesc}</title> 下面添加:

<link rel="stylesheet" href="editor/fckeditor/editor/plugins/insertcode/insertcode.css">
查看截图:
1111111.jpg22222.jpg333.jpg444.jpg
insertcode.jpg


============================
运行代码 RunCode for Bo-Blog UBB
下载:    运行代码(runcode) for Bo-Blog UBB.rar (2.34 KB)

至于运行代码 效果演示: http://www.newzz.fr.cr/read.php?123

下面我给大家逐跳给大家讲解如何添加到 Fckeditor:

insertcode.jpg (26.75 KB)

 

insertcode.jpg

 
等高亮。。。
离开了BO-BLOG,但还是一直关注BO-BLOG。
冰剑博客:www.binjoo.net
 
先来说说 插入媒体 功能 如何添加的吧:

请先下载:媒体插件For FCKeditor:
下载: 多媒体插件 For FCKeditor.rar (4.94 KB)

按照以下具体步骤:

步骤一:  将 media整个文件夹 拷贝至 editor/plugins/下。

步骤二:  修改fckconfig.js,在文件末尾增加如下一行代码,FCKConfig.Plugins.Add('Media', 'en,zh-cn') ;

步骤三:  修改fckconfig.js,找到toolbar按钮设置的部分, FCKConfig.ToolbarSets中添加 'Media'

(注意大小写 js是区分大小写的 Media和media是不同的)
 

忘了应该先上传 最原始版的

Fckeditor 2.62 编辑器原始版本:

下载: Fckeditor 2.6.2编辑器.rar (336.6 KB)

此 编辑器为 Fckeditor 2.62  上传到相应文件夹下即可使用
已经包含了  编辑器自带的含 插入/删除编号列表 插入/删除项目列表 引用文字 插入flash 等 (但不支持 插入媒体文件)

和拓展了 FileUpload[上传附件]  separator[插入截断符]  newpage[插入分页符] 等功能

此为 编辑器原始版本。 建议大家使用 此版进行增设 功能
 
本帖最后由 lajox 于 2009-5-10 06:24 编辑

接下来说说 插入代码 功能 如何添加的吧:

请先下载:插入代码InsertCode for Bo-Blog FCKeditor:

下载插入代码 InsertCode for Bo-Blog FCKeditor.rar (32.63 KB)

首先把insertcode整个文件夹放在FCK的plugins文件夹下,在
Bo-blog中就是 editor/FCKeditor/editor/plugins 。
然后把fck_editorarea.css 复制到FCKeditor/editor/css下,
直接覆盖。
修改FCKeditor/fckconfig.js文件,在
FCKConfig.Plugins.Add( 'Media', 'zh-cn' ) ;下面加上如下

一行:
如:
//在FCKConfig.Plugins.Add( 'Media', 'zh-cn' ) ;下面加上

如下一行:   
FCKConfig.Plugins.Add( 'insertcode' ) ;   


然后修改FCKConfig.ToolbarSets,
大致如下:(不用复制下面代码,只需掌握修改方法即可!)
FCKConfig.ToolbarSets["Default"] = [   
    ['Source','FontName','FontSize'],   
    ['TextColor','BGColor'],   
   
['Image','Media','Flash','Table','Smiley','SpecialChar']
,   
    ['ShowBlocks','Preview','FitWindow'],   
    '/',   
    ['PasteText','Templates','Find','RemoveFormat'],   
    ['Undo','Redo'],   
    ['-','Bold','Italic','Underline','StrikeThrough'],   
   
['OrderedList','UnorderedList','-','Outdent','Indent','B
lockquote'],   
    ['JustifyLeft','JustifyCenter','JustifyRight'],   
    ['Link','Unlink','Rule'],   
    ['Subscript','Superscript','-','InsertCode']   // No comma for the last row.  注:这里添加了 'InsertCode'  
] ;   
   
   
FCKConfig.ToolbarSets["Basic"] = [     
       ['Source','Bold','Italic','TextColor','Image','Link','-','InsertCode']    // 注:这里添加了 'InsertCode'
] ;  

最后,千万别忘记修改FCKeditor/editor/lang  下的语言文件
,  
在语言文件(zh-cn.js & zh.js & en.js) 里逐一在最后一行
加上
InsertCodeBtn    :    "插入代码"
     
InsertCodeBtn    :    "插入代碼"
InsertCodeBtn    :    "InsertCode"

比如:
// About Dialog   
DlgAboutAboutTab    : "关于",   
DlgAboutBrowserInfoTab  : "浏览器信息",   
DlgAboutLicenseTab  : "许可证",   
DlgAboutVersion     : "版本",   
DlgAboutInfo        : "要获得更多信息请访问 ",  

InsertCodeBtn   :   "插入代码"   
};  


最后
在模板文件里加上
<link rel="stylesheet" href="editor/fckeditor/editor/plugins/insertcode/insertcode.css">
比如我们用的是 Bo-Blog
那么我们就在 template/您的模板/elements.php  里 在相应位置加上面那句代码
比如 在 <title>{pagetitle}{blogname} - {blogdesc}</title> 下面添加一句:
<link rel="stylesheet" href="editor/fckeditor/editor/plugins/insertcode/insertcode.css">
 
本帖最后由 lajox 于 2009-5-9 22:40 编辑

至于上传附件 代码实现很简单:

只需修改文件 editor/fckeditor/editordef.php 即可:


末尾的 eot 之前的上一行 添加 以下代码即可:

<br>--[<a href="javascript: showhidediv('FrameUpload');" title="{$lna[741]}" class="thickbox"  style="color:olive;font-weight:900">{$lna[741]}</a>]--
<div id="FrameUpload" style="display: none;"><iframe width=90% frameborder=0 height=200 frameborder=0 src='admin.php?act=upload&useeditor={$useeditor}'></iframe></div>


插入截断符 和 插入分页符:

--[<a href="javascript: fckAddText('[separator]');" title="{$lna[701]}" class="thickbox" style="color:olive;font-weight:900">{$lna[701]}</a>]--[<a href="javascript: fckAddText('[newpage]');" title="{$lna[702]}" class="thickbox" style="color:olive;font-weight:900">{$lna[702]}</a>]--
 
本帖最后由 lajox 于 2009-5-10 06:59 编辑

已经把 高亮显示 整和到了Fckeditor 中了:

放出来给 大家:

Fckeditor 2.62 (相对)完美版 For Bo-Blog
下载: Fckeditor 2.62 (相对)完美版 For Bo-Blog.rar (366.83 KB)

功能说明:
在 原Fckeditor基础上 添加 了 以下 几个插件:

插入代码 InsertCode
插入媒体 Media
插入高亮显示代码 HighLighter
上传附件 FileUpload
插入截断符 [separator]
插入分页符 [newpage]

小问题:
经测试 发现 用 高亮显示HighLighter 编辑和发表 的文章 在 火狐浏览器中 显示有点 错误,ie完整无错!
但在 ie 下 编辑和发表的文章 均能在 火狐和 ie 下 完整无错!
所以建议 一定要 使用 高亮显示功能的 话 请用 ie来发表 文章!!!
正因为有这么点小问题 所以叫 (相对)完美版
======================================================
使用说明:
1. 上传 Fckeditor 到 默认的插件目录 下
2. 修改 模板文件
比如我们用的是 Bo-Blog
那么我们就在 template/您的模板/elements.php  里 在相应位置加上面那句代码
比如 在 <title>{pagetitle}{blogname} - {blogdesc}</title> 下面添加:
<link rel="stylesheet" href="editor/fckeditor/editor/plugins/insertcode/insertcode.css">
<link rel="stylesheet" href="editor/fckeditor/editor/plugins/HighLighter/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css">
效果截图:
222.jpg

1111.jpg
 
本帖最后由 lajox 于 2009-5-17 00:02 编辑

接下来说说 插入高亮代码 功能 如何添加的吧:

请先下载:插入高亮代码HighLighter(SyntaxHighlighter) for Bo-Blog FCKeditor:

下载插入高亮代码 HighLighter(SyntaxHighlighter) for Bo-Blog FCKeditor.rar (29.31 KB)
还可以为fckeditor加入代码高亮显示,我用的是SyntaxHighlighter.
先把 HighLighter 复制到 editor/fckeditor/editor/plugins 下
使用方法:

1、在您的FCKeditor的配置文件中(一般为fckconfig.js或custom.config.js)
配置其中的FCKConfig.ToolbarSets,添加HighLighter。
如:
    FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
        ....
        .... ['FitWindow','ShowBlocks','-','About','HighLighter']

// No comma for the last row. 注:我在这里添了'HighLighter'] ;
当然,你可以放到别的工具栏,不过记得注意大小写。


2、根据你指定的plugin目录,注册plugin
如: 在 fckconfig.js 最后一行 添加:
    // 代码语法高亮插件
    FCKConfig.Plugins.Add( 'HighLighter', 'zh-cn,en' ) ;

记得注意大小写。

3、OK,你会发现你的FCK工具栏的图片多了一个 图标。你就可以使用语法高亮显示功能了。
最后,在模板文件里加上
<link rel="stylesheet" href="editor/fckeditor/editor/plugins/HighLighter/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css">
比如我们用的是 Bo-Blog
那么我们就在 template/您的模板/elements.php  里 在相应位置加上面那句代码
比如 在 <title>{pagetitle}{blogname} - {blogdesc}</title> 下面添加一句:
<link rel="stylesheet" href="editor/fckeditor/editor/plugins/HighLighter/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css">

转自 http://bbs.bo-blog.com/viewthread.php?tid=23520&page=1

分享到:
评论

相关推荐

    fckeditor(支持上传附件)

    在使用fckeditor上传附件时,必须注意安全问题。这包括防止跨站脚本攻击(XSS)、文件注入攻击以及非法文件类型的上传。开发者应确保服务器端有适当的验证和过滤机制,以限制上传的文件类型,防止恶意代码的执行。 **...

    FCKeditor 2.6中添加插入视频和音频功能

    在本例中,"fckplugin.js"文件将包含实现视频和音频插入功能的代码。开发者需要定义一个插件类,继承自FCKeditor的Plugin基类,并实现其接口,包括GetInfo(获取插件信息)和Execute(执行插件命令)等方法。 2. **...

    fckeditor2.66 for ASP中文版

    2. **插入媒体**:使用“插入图像”、“插入链接”等按钮,可以方便地添加图片、链接和超链接。 3. **上传文件**:FCKeditor 通常会有一个文件管理器,允许用户上传本地文件到服务器,并在编辑器中引用这些文件。 ...

    在Lotus中嵌入Fckeditor上传代码

    "在Lotus中嵌入Fckeditor上传代码"这个主题涉及到在Lotus Notes应用中集成FCKeditor,一个流行的开源富文本编辑器,以实现更加美观且功能强大的附件上传功能。FCKeditor以其易于使用和高度自定义的特性,被广泛用于...

    FCKeditor2.63 ejiyuan修改版加入多媒体media for .Net2.0

    这意味着用户可以通过这个编辑器插入和管理音频、视频等多媒体元素,这在创建富媒体内容时非常有用,比如在博客、论坛或者内容管理系统中。 【标签】中的"FCKeditor"是这个编辑器的基础,它是一个JavaScript库,...

    FCKeditor源代码。。。。

    1. **富文本编辑**:FCKeditor提供了类似Word的富文本编辑体验,用户可以轻松地进行文字格式化、插入图片、链接、表格等操作。 2. **跨浏览器兼容**:它支持多种主流浏览器,如Internet Explorer、Firefox、Chrome和...

    【免费】FCKEditor 媒体插件!

    除了基本的媒体插入,FCKEditor的媒体插件还支持一些高级功能,如预览、自动播放、循环播放等。这些可以通过在插入媒体时调整属性参数来实现。此外,如果你需要更自定义的播放器功能,还可以考虑编写或使用第三方的...

    扩展FCKeditor的视频插入功能支持多种格式插件 for z-blog.rar

    FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用。它可和PHP、javascript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的编程语言相结合...

    jsp版fckeditor 工程源代码(可上传图片)

    此工程源代码的亮点在于它支持图片上传功能,这意味着用户可以通过FCKeditor在网页内容中插入并上传本地图片。 "集成了fckeditor,并且可上传图片的jsp应用" 描述进一步确认了FCKeditor的集成,并强调了图片上传...

    如何在FCKeditor 2.6中添加插入视频和音频功能

    FCKeditor由一系列插件构成,这些插件负责提供特定的功能,如图片上传、链接创建等。为了实现视频和音频插入,我们需要创建或利用现有的多媒体插件。 1. **创建或修改插件** - 插件开发通常涉及创建一个新目录,...

    fckeditor for jsp 的jar包

    这个是一个我修改过的fckeditor for jsp 的jar包的源代码,是fckeditor-2.3的,我修改了ConnectorServlet.java和SimpleUploaderServlet.java两个文件 我在这两个文件中都是加了一个静态变量encoding,private static...

    fckeditor for asp.net

    在实际应用中,为了更好地利用fckeditor for asp.net,开发者需要了解如何配置编辑器的设置,如何通过服务器端代码(如C#或VB.NET)与编辑器进行交互,以及如何处理用户提交的富文本内容。同时,掌握JavaScript和ASP...

    fckeditor2.6.3 for php

    FCKeditor支持用户在文本中插入图片,这需要设置图片上传功能。在`fckeditor`文件夹中,有一个名为`UserFiles`的目录,这是默认的上传文件存储位置。你需要确保PHP有写入此目录的权限,并根据实际需求配置编辑器的`...

    fckeditor for asp(配置完成版)

    `UploadFile`目录可能用于存放用户通过FCKeditor上传的文件,这是FCKeditor默认的上传路径,可以在这里配置服务器端的文件存储规则和权限控制。 在实际应用中,开发者需要了解ASP的基本语法,以及如何在ASP页面中...

    fckeditor 2.6 带media插件

    这意味着可能有特定的Java服务器端组件或接口与FCKeditor配合使用,例如处理上传的媒体文件,验证权限,或者生成适应服务器环境的嵌入代码。 5. **操作流程**:用户在编辑器中触发Media插件后,一般会弹出一个...

    jsp中使用FCKEditor

    4. **创建编辑器实例**:在JSP页面中,通过JavaScript代码创建FCKEditor实例。以下是一个简单的例子: ```javascript var oFCKeditor = new FCKeditor('editorContent') ; oFCKeditor.BasePath = '/js/fckeditor/...

    FCKeditor配置for java

    **FCKeditor配置for Java** FCKeditor是一款流行的开源富文本编辑器,广泛应用于Web开发中,为用户提供类似于Microsoft Word的界面,使用户能够轻松创建和编辑HTML内容。在Java Web开发环境中,集成FCKeditor可以...

    FCKeditor视频上传插件

    而"视频上传插件"是FCKeditor的一个扩展功能,旨在方便用户在编辑内容时直接上传并嵌入视频,提升用户体验。 在FCKeditor视频上传插件中,通常会包含针对不同视频格式的支持。常见的视频格式有MP4、FLV、WMV、AVI、...

    fckeditor运行包

    2. **丰富的编辑功能**:FCKeditor提供了类似于Microsoft Word的界面,支持文本格式化、插入图片、链接、表格、列表、视频等多媒体元素,以及HTML代码的直接编辑。 3. **自定义配置**:开发者可以根据需求调整编辑...

Global site tag (gtag.js) - Google Analytics