先到Github上查看官方说明并下载插件https://github.com/iametza/ckeditor-html5-audio/blob/master/README.md
解压到ckeditor的\ckeditor\plugins文件夹里
在CKEDITOR_CONFIGS里设置
'extraPlugins': ','.join([
'html5audio',
]),
toolbar:'full',
这里注意,用full全功能是没问题的,如果你要自定义的话,一定要首字母大写,我用小写的被坑的找不到妈妈,像这样就可以了
{'name': 'insert', 'items': ['Image', 'Html5audio']},
部署到生产环境中我发现一个问题,无法上传音频文件。因为我服务器上用的是nginx,大文件上传要进行设置
vim /etc/nginx/nginx.conf
在http{}中输入:
client_max_body_size 8M;(配置请求体缓存区大小, 不配的话)
client_body_buffer_size 128k;(设置客户端请求体最大值)
fastcgi_intercept_errors on;
然后reload一下,问题解决
nginx -t
nginx -s reload
今天强迫症发了,要把浏览服务器的按钮去除,找到ckeditor/plugins/html5audio/dialogs/html5audio.js 注释以下代码即可
// {
// type: 'button',
// id: 'browse',
// // v-align with the 'txtUrl' field.
// // TODO: We need something better than a fixed size here.
// style: 'display:inline-block;margin-top:14px;',
// align: 'center',
// label: editor.lang.common.browseServer,
// hidden: true,
// filebrowser: 'info:url'
// }
因为这个浏览服务器界面调用的是上传图片的那个页面,所以不太适用这个声音文件,如果要用的话,可以自己写一个适用音频文件的浏览页面。
网友评论