话不多说,直接上代码!
1、找到编辑器配置文件 \statics\js\ckeditor\config.js打开
2、打开\statics\js\ckeditor\plugins 文件目录,这里是放一些扩展菜单类
新建文件夹并命名为:music,在该文件夹下创建plugin.js 文件,文件内容如下:
CKEDITOR.plugins.add('music', {
init: function(editor) {
//plugin code goes here
var pluginName = 'music';
CKEDITOR.dialog.add('music', function(a) {
var b = a.config;
var escape = function(value) {
return value;
};
return {
title: '插入MP3音频',
resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
minWidth: 350,
minHeight: 200,
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: true,
align: 'center',
label: '浏览服务器'
}]
},{
type: 'hbox',
widths: ['35%', '35%', '30%'],
children: [{
type: 'select',
label: '自动播放',
id: 'myautoplay',
required: true,
'default': '0',
items: [
['是', '1'],
['否', '0']
]
}] //children finish
}
]
}, {
id: 'Upload',
hidden: true,
filebrowser: 'uploadButton',
label: '上传音频',
elements: [{
type: 'file',
accept: '.mp3',
id: 'upload',
label: '上传音频',
size: 38
}, {
type: 'fileButton',
id: 'uploadButton',
label: '上传到服务器上',
filebrowser: 'info:src',
'for': ['Upload', 'upload'] //'page_id', 'element_id'
}]
}],
onOk: function() {
myautoplay = this.getValueOf('info', 'myautoplay');
mysrc = this.getValueOf('info', 'src');
html = '' + escape(mysrc) + '';
a.insertHtml("<audio src=\"" + html + "\" controls=\"controls\" autoplay=\""+ myautoplay +"\" >您的浏览器版本过低,请先升级。</audio>");
},
onLoad: function() { }
};
});
editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
editor.ui.addButton('music', {
label: '插入mp3音频',
command: pluginName,
icon: this.path + 'icon.png'
});
}
});
在"music"文件下,上传菜单图标 ,命名为:icon.png(这里图标可以随意更改)
3、打开 \phpcms\libs\classes\form.class.php 文件,找到editor方法
4、保存并清除浏览器缓存,如果不清除是看不到的。
效果图:
完成,不定期更新phpcms问题,喜欢的给个关注吧!