CKEditor4 添加插入各大视频网站插件

参考链接：

https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_media_embed

https://iframely.com/

https://iframely.com/docs/ckeditor

1.登录织梦后台系统，在画线处添加所需的的视频格式后缀，点击确定

2.修改select_media.php。找到织梦文件夹中include/dialog/select_media.php，找到("#.(rm|rmvb)#i"在185行左右，在这里修改为（rm|mp4|rmvb|flv)，网站就即可上传查看视频文件。

3.网上查找cheditor文件，并替换include目下的ckeditor 文件即可，就可以查看到视频添加按钮。

文档：

http://www.258cn.com/article/dedecms/124.html

跟着它说的做，就可以添加自己的视频，不用调用优酷视频的分享链接，直接上传本地视频到服务器，直接可以在html编辑器里添加，可以上传多种视频格式，而且没有广告，我做了两次了，两次都行。（要注意那些代码的标点符合对不对）工作如下：

1.下载flv的flash播放器flvplayer.swf,并放到根目录的images目录里面(具体放到那个目录可以自己定)。

2.修改/include/inc目录下inc_fun_funAdmin.php查找”$config['extraPlugins'] = ‘dedepage,multipic,addon’”改为”$config['extraPlugins']

=’dedepage,multipic,addon,video’”。

3.在/include/ckeditor/plugins目录创建video文件夹。

4.在刚创建的video文件夹中创建plugin.js文件

(function()

{

CKEDITOR.plugins.add( ‘video’,

{

init : function( editor )

{

var pluginName = ‘video’

CKEDITOR.dialog.add(pluginName, this.path + ‘dialogs/video.js’)

editor.config.flv_path = editor.config.flv_path || ( this.path)

editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName))

editor.ui.addButton( ‘MyVideo’,

{

label : ‘插入视频’,

command: pluginName,

icon: ‘plugins/video/video.gif’ //这是在编辑器上显示的图片,随便百度google搜一个16X16的图片放在更目录/include/ckeditor/images下即可

})

},

requires : [ 'fakeobjects' ]

})

})()

并放入一个图片video.gif，是在编辑器上显示用的图片

5.在上述video文件夹中创建dialogs目录，在dialogs目录中创建video.js

CKEDITOR.dialog.add(‘video’,　function(a){

var b = a.config

var　escape　=　function(value){return　value}

return{

title:　’插入视频’,

resizable:　CKEDITOR.DIALOG_RESIZE_BOTH,

minWidth: 350,

minHeight: 120,

contents:　[{

id: 'info',

label: '常规',

accessKey: 'P',

elements:[

{

type: 'hbox',

widths : [ '80%', '20%' ],

children:[{

id: 'src',

type: 'text',

label: '源文件'

},{

type: 'button',

id: 'browse',

filebrowser: 'info:src',

hidden: false,

style: 'display:inline-blockmargin-top:10px',

align: 'center',

label: a.lang.common.browseServer

}]

},

{

type: ‘hbox’,

widths : [ '35%', '35%', '30%' ],

children:[{

type:　'text',

label:　'视频宽度',

id:　'mywidth',

'default':　'500px',

style:　'width:50px'

},{

type:　'text',

label:　'视频高度',

id:　'myheight',

'default':　'350px',

style:　'width:50px'

},{

type:　'select',

label:　'自动播放',

id:　'myloop',

required:　true,

'default':　'true',

items:　[['是',　'true'],　['否',　'false']]

}]//children finish

}]

}, {

id: ‘Upload’,

hidden: true,

filebrowser: ‘uploadButton’,

label: ‘上传’,

elements: [{

type: 'file',

id: 'upload',

label: '上传',

size: 38

},

{

type: 'fileButton',

id: 'uploadButton',

label: '发送到服务器',

filebrowser: 'info:src',

'for': ['Upload', 'upload']//’page_id’, ‘element_id’

}]

}],

onOk:　function(){

mywidth　=　this.getValueOf(‘info’,　’mywidth’)

myheight　=　this.getValueOf(‘info’,　’myheight’)

myloop　=　this.getValueOf(‘info’,　’myloop’)

mysrc　=　this.getValueOf(‘info’,　’src’)

html　=　”　+　escape(mysrc)　+　”

//编辑器中生成的源代码

flashcode=”<div style=’margin:0 autotext-align:centerwidth:”+mywidth+”height:”+myheight+”’>”

flashcode+=”<object data=\”/dede/images/flvplayer.swf?autostart=”+myloop+”&file=”+mysrc+”&image=&repeat=false\” type=\”application/x-shockwave-flash\”

width=”+mywidth+” height=”+myheight+” align=\”middle\” wmode=\”transparent\”>”

flashcode+=”<param name=\”movie\” value=\”/dede/images/flvplayer.swf?autostart=”+myloop+”&file=”+mysrc+”&image=&repeat=false\” />”

flashcode+=”<param name=\”wmode\” value=\”transparent\” />”

flashcode+=”<param name=\”allowfullscreen\” value=\”true\” />”

flashcode+=”</object></div><p></p>”

a.insertHtml(flashcode)

},

onLoad:　function(){

}

}

})

6.修改/include/ckeditor/目录下ckeditor.inc.php文件,在”$toolbar['Basic']“数组中添加一个”array( ‘MyVideo’)”数组。

7.修改/include/ckeditor/目录下config.js文件，在里面添加”config.filebrowserVideoBrowseUrl = “../include/dialog/select_media.php””

8.在系统基本参数->附件设置->允许的多媒体文件类型加入你要上传的格式

我把上面的修改都封装了包括图片，你只要覆盖就可以，只是第8步还是要添加的，不然服务器不让你上传这种格式。

---