Jump to content

Community

Iframe link embed align feedback


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 post
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 post
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 post
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 post
Share on other sites
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy