GVKun编程网logo

FCKeditor安装FLV视频插件，适用所有CMS（fcp插件安装）

18

这篇文章主要围绕FCKeditor安装FLV视频插件，适用所有CMS和fcp插件安装展开，旨在为您提供一份详细的参考资料。我们将全面介绍FCKeditor安装FLV视频插件，适用所有CMS的优缺点，解

这篇文章主要围绕FCKeditor安装FLV视频插件，适用所有CMS和fcp插件安装展开，旨在为您提供一份详细的参考资料。我们将全面介绍FCKeditor安装FLV视频插件，适用所有CMS的优缺点，解答fcp插件安装的相关问题，同时也会为您带来*源码分享让DEDECMS支持FLV视频、CKEditor/FCKEditor 使用 CKeditor 3.0.1 快速使用教程（含插入图片）、CKEditor/FCKEditor 使用FCKeditor 2.6.5 快速使用教程（含插入图片）、ckeditor添加插入flv视频的插件的实用方法。

本文目录一览：

FCKeditor安装FLV视频插件，适用所有CMS（fcp插件安装）

FCKeditor安装FLV视频插件，适用所有CMS（fcp插件安装）

　

现在很多博客、CMS和论坛等WEB程序都使用了FCKeditor编辑器，根据自己网站的需要不同，有些网站需要添加FLV播放器功能，那么怎么实现这个功能呢，一些网站主来咨询烈火网小编，现在就来教大家安装FCKeditor安装FLV视频插件，这款插件是国外人专门为fckeditor制作的强大FLV视频播放器插件，可以自定义播放器界面色彩，支持单文件即XML文档列表调用。 

首先downloadFCKeditor安装FLV视频插件，然后将文件夹flvplayer拷贝到fckeditor\editor\plugins\目录下，然后修改fckeditor/fckconfig.js此文件，在此文件中FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;下面加入以下代码： 

FCKConfig.Plugins.Add( 'flvPlayer','zh-cn') ; 
其中zh-cn对应lang文件夹下的语言包文件名； 

然后在编辑器控制面板中加入视频按钮： 

FCKConfig.ToolbarSets[ "Default"] = [ 
['Source','DocProps','-','Save','NewPage','Preview','-','Templates','flvPlayer'], 

完成以上操作后，此时启动fckeditor编辑器需要在编辑器的toolbar上多了一个图标，点击此图标即可添加你的FLV视频文件了。

本文章网址：http://www.ppssdd.com/code/7540.html。转载请保留出处，谢谢合作！

*源码分享让DEDECMS支持FLV视频

*源码分享让DEDECMS支持FLV视频

　

今天想要在织梦CMS源码的网站上传一个FLV视频教程，却发现织梦CMS默认不支持播放flv视频，只好自己想方案解决，在网上搜索下，还真有解决的办法。 

修改办法：

*步，请大家打开/include/FCKeditor/editor/dia日志/dede_media.htm

然后在 if(playtype=="rm" || (playtype=="-" && (rurl.indexOf('.rm')>0 || rurl.indexOf('.rmvb')>0 || rurl.indexOf('.ram')>0)) ) { revalue = "<embed src='"+ rurl +"' quality='hight' wmode='transparent' type='audio/x-pn-realaudio-plugin' autostart='true' controls='IMAGEWINDOW,ControlPanel,StatusBar' console='Clip1' width='"+ widthdd +"' height='"+ heightdd +"'></embed>\r\n"; }  

的下面添加以下内容： //播放代码flv开始 else if(playtype=="flv" || (playtype=="-" && (rurl.indexOf('.flv')>0 || rurl.indexOf('.swf')>0)) ) { revalue = "<object id='player' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' name='player' width='"+ widthdd +"' height='"+ heightdd +"'> \r\n<param name='movie' value='/plus/player.swf'>\r\n<param name='allowfullscreen' value='true'>\r\n<param name='allowscriptaccess' value='always'>\r\n<param name='flashvars' value='file="+ rurl +"'>\r\n</object>";//播放代码flv开始结束 }  

第二步，请大家上传player.swf到/plus目录。

本文章网址：http://www.ppssdd.com/code/24984.html。转载请保留出处，谢谢合作！

CKEditor/FCKEditor 使用 CKeditor 3.0.1 快速使用教程（含插入图片）

CKEditor/FCKEditor 使用 CKeditor 3.0.1 快速使用教程（含插入图片）

因为直接把内容作为字符串给编辑器的 Value 属性赋值使用的是 JavaScript 代码，要让 JS 代码不受内容中双引号、换行等的干扰，只有先读入到 textarea 最方便。

使用 CKeditor 3.0.1
复制代码 代码如下:

<textarea cols="90" rows="10" id="content" name="content">cftea</textarea>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
<!--
CKEDITOR.replace("content");
//-->
</script>

可以看出，3.x 版本的使用非常方便，也不用担心会形成两个同名的 content。实际上 textarea 的 id 省略了也是可以的，因为 CKEditor 会先按 name 来查找，查找不到，再按 id 来查找。

并且编辑器会在 textarea 的位置替换原有的 textarea。

设置编辑器皮肤、宽高
复制代码 代码如下:

<textarea cols="90" rows="10" id="content" name="content">cftea</textarea>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
<!--
CKEDITOR.replace("content",
{
skin: "kama", width:700, height:300
});
//-->
</script>

skin 值应该是 ckeditor/skins 文件夹下的某个文件夹名称，如果指向不存在的皮肤，则不会显示编辑器。

设置值、取值

设置值

CKEDITOR.instances.content.setData(""); // content 就是前面 CKEDITOR.replace 的第一个参数值
或
复制代码 代码如下:

var editor = CKEDITOR.replace("content");
editor.setData("");

取值

alert(CKEDITOR.instances.content.getData()); // content 就是前面 CKEDITOR.replace 的第一个参数值
或

var editor = CKEDITOR.replace("content");
alert(editor.getData());
插入图片

若要演示此示例，最好是放在按钮的事件处理程序中，目的是有些延迟。

CKEDITOR.instances.content.insertHtml("<img src=...>");
您可能感兴趣的文章:

CKEditor/FCKEditor 使用FCKeditor 2.6.5 快速使用教程（含插入图片）

CKEditor/FCKEditor 使用FCKeditor 2.6.5 快速使用教程（含插入图片）

其开源协议是基于 GPL, LGPL 和 MPL 的。官方网站：http://ckeditor.com/

一般来说，我们在编辑内容时，先是读入到 textarea，再将 textarea 的内容赋给编辑器。因为直接把内容作为字符串给编辑器的 Value 属性赋值使用的是 JavaScript 代码，要让 JS 代码不受内容中双引号、换行等的干扰，只有先读入到 textarea 最方便。

使用 FCKeditor 2.6.5
复制代码 代码如下:

<div><textarea id="fckcontent" name="content">cftea</textarea></div>
<script type="text/javascript" src="fckeditor/fckeditor.js"></script>
<script type="text/javascript">
<!--
var oFCKeditor = new FCKeditor("fckcontent");
oFCKeditor.BasePath = "fckeditor/"; // fckeditor 文件夹位置。
oFCKeditor.Create();
//-->
</script>

本来应该用 display:none 将 textarea 隐藏起来，不过为了查看效果，这里不隐藏。

这样编辑器就自动与 fckcontent 关联起来了，打开网页时 FCKeditor 自动读取 textarea 的内容，提交时又自动将其内容（自动为 XHTML）赋给 textarea。

注意，我们 textarea 的 id 和 name 值不一样，为什么呢？

这里应该是这个版本不太完善的地方，如果我们把 textarea 的 id 和 name 值设置为一样，那么 FCKeditor 文本区的 name 值也是 content，在服务器端 Request.Form("content").Count 就会有两个，我们服务器端取值就稍稍有点不方便，得用 Request.Form("content")(0)。如果我们将 id 设为 fckcontent，那么 FCKeditor 文本区的 name 就是 fckcontent，与 textarea 不同名。

设置编辑器宽高

var oFCKeditor = new FCKeditor("fckcontent", 500, 300);
或
复制代码 代码如下:

var oFCKeditor = new FCKeditor("fckcontent");
oFCKeditor.Width = 500;
oFCKeditor.Height = 300;

设置工具条

var oFCKeditor = new FCKeditor("fckcontent", 500, 300, "Basic");
注意第四个参数，其可选值有 Basic、Default，注意大小写不可搞错，分别表示基本工具条、默认工具条（全部按钮）。

设置初始值、设置值、取值

设置初始值

实际上设置初始值很少用，因为一般都是与 textarea 关联的，故只是简单列出来一下，不深究。说明一下，如果关联的 textarea 存在，则赋初始值是没有用的。

var oFCKeditor = new FCKeditor("fckcontent2", 500, 300, "Default", "");
或
复制代码 代码如下:

var oFCKeditor = new FCKeditor("fckcontent2", 500, 300, "Default");
oFCKeditor.BasePath = "fckeditor/";
oFCKeditor.Value = "cftea"; // 必须在 Create 之前
oFCKeditor.Create();

设置值

若要演示此示例，最好是放在按钮的事件处理程序中，目的是有些延迟，否则会说 FCKeditorAPI 未定义。
复制代码 代码如下:

var oEditor = FCKeditorAPI.GetInstance("fckcontent");
oEditor.SetHTML("");

取值

若要演示此示例，最好是放在按钮的事件处理程序中，目的是有些延迟，否则会说 FCKeditorAPI 未定义。
复制代码 代码如下:

var oEditor = FCKeditorAPI.GetInstance("fckcontent");
alert(oEditor.GetXHTML()); // 还有个类似方法是 GetHTML，但不推荐用 GetHTML。

您这样做很危险：
复制代码 代码如下:

var oEditor = FCKeditorAPI.GetInstance("fckcontent");
oEditor.SetHTML("");
alert(oEditor.GetXHTML()); // 这里的值并不一定是上一句赋的值。因为他们太近了，值还没来得及赋，就已经 alert 了。

插入图片

若要演示此示例，最好是放在按钮的事件处理程序中，目的是有些延迟，否则会说 FCKeditorAPI 未定义。

FCKeditorAPI.GetInstance("fckcontent").InsertHtml("<img src...>");

ckeditor添加插入flv视频的插件

ckeditor添加插入flv视频的插件

首发：个人博客，更新&纠错&回复

昨天写在网页中播放flv的博文的时候，想在博文中插入视频，但是发现无法实现。
因为用的编辑器是ckeditor，决定自己写个插件插入视频。
官方的教程在这里，写得很好，又简明又清楚。

写一个插件需要建立的文件夹和文件如图所示：

主目录video（此目录名即插件名）要放到ckeditor的plugins文件夹下，其中包含最主要的文件plugin.js。
如果需要对话框，则需要dialogs文件夹和与插件同名的js文件，本例中即video.js。
图标放在icons文件夹下，命名为xxx.png，大小为16*16像素。

主文件plugin.js内容如下：

CKEDITOR.plugins.add( ''video'', {
    icons: ''video'',
    init: function( editor ) {
        editor.addCommand( ''video'', new CKEDITOR.dialogCommand( ''videoDialog'' ) );

        editor.ui.addButton( ''Video'', {
            label: ''视频'',
            command: ''video'',
            toolbar: ''insert''
        });

        CKEDITOR.dialog.add( ''videoDialog'', this.path + ''dialogs/video.js'' );
    }
});

其中涉及“video”的地方基于约定都要与插件名保持一致，不要挑战这个约定，毫无必要且毫无意义。

弹出对话框文件video.js内容如下：

CKEDITOR.dialog.add( ''videoDialog'', function ( editor ) {
    return {
        title: ''视频属性'',
        minWidth: 400,
        minHeight: 200,

        contents: [
            {
                id: ''flv'',
                label: ''VIDEO URL'',
                elements: [
                    {
                        type: ''text'',
                        id: ''flvLink'',
                        label: ''输入视频路径'',
                        validate: CKEDITOR.dialog.validate.notEmpty( "视频路径不能为空！" )
                    }
                ]
            }
        ],

        onOk: function() {
            var dialog = this;
            var url = dialog.getValueOf(''flv'', ''flvLink'');

            var video = editor.document.createElement( ''video'' );
            video.setAttribute(''src'', url);
            editor.insertElement( video );
        }
    };
});

其中contents定义对话框中的选项卡和表单项，onOk是点击对话框的“确定”按钮时触发的回调函数。
显然onOk这个函数是重中之重。最关键的有两个步骤：
1)从对话框表单中取值，即示例代码中的var url = dialog.getValueOf(''flv'', ''flvLink'');
2)向编辑器中插入内容，即示例代码中的editor.insertElement( video );
这两个步骤要根据具体需要自行实现。

插件编写完成后在页面js中显式引入之即可：

    CKEDITOR.replace( ''editor'', {
        language: ''zh-cn'',
        extraPlugins : ''video''
    } );

示例代码已上传到github。
TODO:目前只能插入指定url的视频，视频上传没做，可以仿照图片上传的功能来实现。

 

长期欢迎项目合作机会介绍，项目收入10%用于酬谢介绍人。新浪微博：@冷镜，QQ：908789432。


关于FCKeditor安装FLV视频插件，适用所有CMS和fcp插件安装的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于*源码分享让DEDECMS支持FLV视频、CKEditor/FCKEditor 使用 CKeditor 3.0.1 快速使用教程（含插入图片）、CKEditor/FCKEditor 使用FCKeditor 2.6.5 快速使用教程（含插入图片）、ckeditor添加插入flv视频的插件的相关知识，请在本站寻找。

本文标签：

上一篇DedeCms5.6发布新闻时自动加上Keywords链接（网站添加新闻怎么添加）

下一篇DedeCms5.6新闻页Keywords自动添加超链接的教程（如何制作新闻网页链接）

相关文章