Iframe link embed align feedback

[BomAle]

I would report a feedback with alignment of internal link rich embed

Currently there is not a possibility to align the block inside ckeditor, I think this should be a option to align it but the default "justify" ckeditor widget don't catch iframe block because javascript code remove the parent paragraphs <p> (CKEDITOR.plugins._replaceLinkWithEmbed) and the only allowed content alignable is

	this.allowedContent = {
		'caption div h1 h2 h3 h4 h5 h6 p pre td th li': {
		// Do not add elements, but only text-align style if element is validated by other rule.
		propertiesOnly: true,
		styles: this.cssClassName ? null : 'text-align',
		classes: this.cssClassName || null
	}
};

// In enter mode BR we need to allow here for div, because when non other
// feature allows div justify is the only plugin that uses it.
if ( editor.config.enterMode == CKEDITOR.ENTER_BR )
	this.allowedContent.div = true;

\applications\core\dev\ckeditor\plugins\justify\plugin.js

I tried to submit a ticket into invisionpower.zendesk support for report it but the reply about "In order to assist you with the issue, you'll need to reactivate the application"

An example below

 

paragraph right

paragraph right

Edited May 7, 2020 by BomAle
link and image from ticket

[luca.mayo]

1 hour ago, BomAle said:

I would report a feedback with alignment of internal link rich embed

Currently there is not a possibility to align the block inside ckeditor, I think this should be a option to align it but the default "justify" ckeditor widget don't catch iframe block because javascript code remove the parent paragraphs <p> (CKEDITOR.plugins._replaceLinkWithEmbed) and the only allowed content alignable is

	this.allowedContent = {
		'caption div h1 h2 h3 h4 h5 h6 p pre td th li': {
		// Do not add elements, but only text-align style if element is validated by other rule.
		propertiesOnly: true,
		styles: this.cssClassName ? null : 'text-align',
		classes: this.cssClassName || null
	}
};

// In enter mode BR we need to allow here for div, because when non other
// feature allows div justify is the only plugin that uses it.
if ( editor.config.enterMode == CKEDITOR.ENTER_BR )
	this.allowedContent.div = true;

\applications\core\dev\ckeditor\plugins\justify\plugin.js

I tried to submit a ticket into invisionpower.zendesk support for report it but the reply about "In order to assist you with the issue, you'll need to reactivate the application"

An example below

  Reveal hidden contents

paragraph right

paragraph right

I too would like this problem to be solved.

 

UP

[Askancy]

I needed to need to attach an article to a topic, only after losing half a day to put it in the middle I gave up...

Can you fix this? it is clearly a bug... 

[BomAle]

I suggest to edit the plugin file \applications\core\dev\ckeditor\plugins\ipsautolink\plugin.js like following code:

CKEDITOR.plugins.add( 'ipsautolink', {
	init: function( editor ) {
		editor.widgets.add( 'ipsembedded', {
			inline: false, //WHY NOT INLINE?????
			upcast: function( element ) {
				if ( ( element.name == 'div' && element.hasClass( 'ipsEmbeddedVideo' ) ) || ( element.name == 'iframe' && !_.isUndefined( element.attributes['data-embedcontent'] ) ) ) {
					return true;
				}
			},
			//+++ADDED http://origin-docs.ckeditor.com/ckeditor4/docs/?print=/api/CKEDITOR.plugins.widget.definition#property-styleToAllowedContentRules
			styleableElements: 'div(ipsEmbeddedVideo); iframe{data-embedcontent}'
			//add data function for control align style ,data:function(){}
		});
		ips.utils.emoji.getEmoji(function(emoji){
			new CKEDITOR.plugins.ipsautolink( editor, emoji );
		});
	},
	//+++ADDED 
	afterInit: function ( editor ) {
		function setupAlignCommand (value) {
			var command = editor.getCommand('justify' + value);
			if (command) {
				if (value in { right:1,left:1,center:1 }) {
					command.on('exec', function (event) {
						var widget = getSelectedWidget(editor);
						if (widget && widget.name === 'ipsembedded') {
							widget.setData({ 'align': value });
							event.cancel();
						}
					});
				}
				command.on('refresh', function (event) {
					var widget = getSelectedWidget(editor),
						allowed = { left:1,center:1,right:1 },
						align;

					if (widget) {
						align = widget.data.align;
						/*if ( enabled === undefined )
							enabled = editor.filter.checkFeature( editor.widgets.registered.ipsembedded.features.align );

						if ( !enabled )
							this.setState( CKEDITOR.TRISTATE_DISABLED );
						else {*/
						this.setState(
							( align == value ) ? (
								CKEDITOR.TRISTATE_ON
							) : (
								( value in allowed ) ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED
							)
						);
						//}

						event.cancel();
					}
				});
			}
		}

		function getSelectedWidget (editor) {
			var widget = editor.widgets.focused;
			if (widget && widget.name === 'ipsembedded') {
				return widget;
			}
			return null;
		}

		setupAlignCommand('left');
		setupAlignCommand('right');
		setupAlignCommand('center');
	}
} );

I don't test it

[luca.mayo]

don't work on 4.10 @BomAle

[Askancy]

On 5/12/2020 at 11:51 AM, Tech-crew.it said:

don't work on 4.10

haven't tried the BomAe script, but probably the problem is in the display:block of "ipsRichEmbed". if you put display: inline-block; in ipsRichEmbed, it will be enough for ckeditor to put the oembed into a div/p in order to choose its position with the text-align.

Hopefully they solve this problem because anyone who uses an oembed for an article in his blog/pages the effect is really bad.