Jump to content

Iframe link embed align feedback


BomAle

Recommended Posts

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 by BomAle
link and image from ticket
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

oembed.thumb.png.d76810b862332b7e715afab59f606685.png

Link to comment
Share on other sites

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...