Comments (9)
Are you using a custom toolbar? In that case you should add 'Html5audio' to the toolbar (note that the first letter is uppercase).
For example:
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
...
{ name: 'insert', items: [ 'Html5audio', 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] }
...
];
};
Best regards
from ckeditor-html5-audio.
I don't think it's custom, I'm using an adjusted config file, but it's mostly from what we downloaded when adjusting the default plugins and so on:
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Subscript,Superscript';
config.contentsCss = [ '/templates/default/css/content.css', '/templates/default/css/reset.css' ];
config.height = 500;
config.bodyClass = 'article';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// we don't want an empty <p></p> as content
config.ignoreEmptyParagraph = false;
// allow these tags to accept classes
config.extraAllowedContent = 'hr(*)';
config.extraAllowedContent = 'audio(*)';
config.extraAllowedContent = 'source(*)';
config.extraAllowedContent = 'code';
config.extraAllowedContent = 'a(*)';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
config.extraPlugins = 'widget';
config.extraPlugins = 'widgetselection';
config.extraPlugins = 'lineutils';
config.extraPlugins = 'html5audio';
config.extraPlugins = 'html5video';
config.extraPlugins = 'youtube';
config.removePlugins = 'about';
config.youtube_responsive = true;
config.youtube_related = false;
config.youtube_privacy = true;
config.youtube_disabled_fields = ['chkAutoplay','chkResponsive','txtWidth','txtHeight','chkRelated','chkPrivacy'];
config.linkShowTargetTab = false
};
from ckeditor-html5-audio.
From what I understand, I don't think yours works with groups? As you either set groups or set it directly with items, I'm using groups.
from ckeditor-html5-audio.
It's strange. I've just downloaded CKEditor and HTML5audio plugin with its dependencies. After adding these lines to the config.js file the icon showed in the 'insert' group without problems:
config.extraPlugins = 'widget';
config.extraPlugins = 'lineutils';
config.extraPlugins = 'html5audio';
Can you check the permissions of the plugin's folder (plugins/html5audio)?
from ckeditor-html5-audio.
As it turns out the issue was two fold:
At some point we upgraded ckeditor and the config we made didn't include widget in the package, but the old one included it originally so the widget plugin folder was actually empty (woops).
Also, certain plugins override each other, we had it like this:
config.extraPlugins = 'widget';
config.extraPlugins = 'widgetselection';
config.extraPlugins = 'lineutils';
config.extraPlugins = 'html5audio';
config.extraPlugins = 'html5video';
config.extraPlugins = 'youtube';
Youtube would show, but the html5 audio/video plugins would not.
You need to bundle them together:
config.extraPlugins = 'widget,widgetselection,lineutils,html5audio,youtube,html5video';
If you don't do it like that, whatever is last ends up overwriting previous plugins in ckeditor.
from ckeditor-html5-audio.
I'm glad that you found a fix for the issue.
If it's not indiscreet, are you going to use our plugin in GamingOnLinux.com? It would be an honour :)
from ckeditor-html5-audio.
Yup, we are indeed using it there. We used to have a podcast done by the community and this was to help us insert it.
Now I'm updating our custom media uploader to support audio files, naturally I need this plugin to show them in our ckeditor when uploaded and we hit the insert button.
Nothing major this time, just a quick sound comparison between two keyboards and noticed it wasn't working today (probably hasn't for a while due to the issues I mentioned above).
Thanks for the plugin, makes life easier π
from ckeditor-html5-audio.
For future reference, using config.extraPlugins more than once overwrites the declaration. The extraPlugins option expects a list of comma separated plugins.
CKEditor's documentation: https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-extraPlugins
from ckeditor-html5-audio.
Yup, totally my bad on that bit, live and learn eh π
from ckeditor-html5-audio.
Related Issues (18)
- Missing icon for the context menu in built version.
- Multiple streams playing after d'n'd audio widget with autoplay set to true. HOT 3
- Can you add a βposter β property? HOT 5
- Added Chinese language HOT 4
- Error using html5audio plugin HOT 5
- Html5audio doesn't work with Drupal CKEditor module HOT 1
- editor disappears after adding html5audio
- Doesn't work with the Basic Package
- Scroll controler doesn't work HOT 6
- progress bar
- play audio file once only HOT 1
- Going back and forth to source code edition removes attributes and styles
- Upload with only filebrowser/filetools? HOT 1
- DLL Compatible
- Problem with icon? HOT 1
- Review Russian translation HOT 2
- Undefined resource fetched while opening the audio dialog.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ckeditor-html5-audio.