Giter VIP home page Giter VIP logo

Comments (9)

aldatsa avatar aldatsa commented on May 24, 2024 1

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.

LiamDawe avatar LiamDawe commented on May 24, 2024

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.

LiamDawe avatar LiamDawe commented on May 24, 2024

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.

aldatsa avatar aldatsa commented on May 24, 2024

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.

LiamDawe avatar LiamDawe commented on May 24, 2024

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.

aldatsa avatar aldatsa commented on May 24, 2024

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.

LiamDawe avatar LiamDawe commented on May 24, 2024

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.

aldatsa avatar aldatsa commented on May 24, 2024

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.

LiamDawe avatar LiamDawe commented on May 24, 2024

Yup, totally my bad on that bit, live and learn eh πŸ‘

from ckeditor-html5-audio.

Related Issues (18)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.