Hello, when using the ckeditor5, I want to add after inserting the picture format. I don't know how to do that. #1255

gongzhiq · 2018-09-21T02:51:00Z

Hello, when using the ckeditor5, I want to add   after inserting the picture format. I don't know how to do that.

Now, insert the image in the format：

<figure class="image ck-widget">
<img src="">
<figcaption class="ck-editor__editable ck-editor__nested-editable">dsfa</figcaption>
</figure>

The format I want is：

<figure class="image ck-widget">
<img src="">
<figcaption class="ck-editor__editable ck-editor__nested-editable">dsfa</figcaption>
</figure>
 

How to insert   after figure

Like this

<image1></image1>
<p><br/></p>
<image2></image2>
<p><br/></p>
<image3></image3>
<p><br/></p>

The text was updated successfully, but these errors were encountered:

ma2ciek · 2018-09-21T11:23:51Z

Hi, @gongzhiq!

I've answered this question on SO - https://stackoverflow.com/a/52442482/2043175 - is that yours?

Basically, I was able to listen to the model changes, iterate over last changes and insert an empty paragraph before every image.

const model = editor.model;
const doc = editor.model.document;

doc.on( 'change:data', () => {
    const changes = doc.differ.getChanges();

    model.change( writer => {
        for ( const entry of changes ) {
            if ( entry.type == 'insert' && entry.name == 'image' ) {
                const image = entry.position.nodeAfter;
                const paragraph = writer.createElement( 'paragraph' );

                writer.insert( paragraph, image, 'before' );
            }
        }
    } );
} );

As I mentioned on the SO, the current implementation inserts a paragraph before each image. writer.insert( paragraph, image, 'after' ) inserts all paragraph after the last image - I'm not sure why it happens. Maybe you will now, @scofalik, @Reinmar?

Reinmar · 2018-09-21T11:27:44Z

You mean that this:

writer.insert( paragraph, image1, 'after' );

/*
<image1></image1>
<image2></image2>
<image3></image3>
*/

Inserts the paragraph after <image3>?

ma2ciek · 2018-09-21T11:43:23Z

Oh, now I see. Images are inserted one by one. So this is what happens:

The first image is inserted
The paragraph is created after the image
The second image is inserted in place of the paragraph, so the paragraph moves down.
The paragraph is inserted after the image

And so on...

I was surprised that iterating over changes in the other direction doesn't solve the problem and now I know why.

Reinmar · 2018-09-21T11:47:41Z

You mean – when you drop multiple images at once? Yep, they are inserted one by one. BTW, I think the above code should use a post-fixer. I didn't notice you listen on change:data. The mechanism of postfixers was created when we realised that doing changes as a result of changes is tricky.

ma2ciek · 2018-09-21T11:56:38Z

This is still tricky and the result is the same as using change:data event. As there is one image in the differ per one post fixer call. So probably it would be better to not use differ in this case and iterate over all root children and add a paragraph between images if they are one after another.

const model = editor.model;
const doc = editor.model.document;
const root = doc.getRoot();

doc.registerPostFixer( writer => {
	// Iterate from the end ato preserve correct positions.
	for ( let i = root.childCount -1 ; i--; i >= 1 ) {
		if ( root.getChild( i ).name === 'image' && root.getChild( i - 1 ).name === 'image' ) {
			const paragraph = writer.createElement( 'paragraph' );

			writer.insert( paragraph, root.getChild( i - 1 ), 'after' );
		}
	}
} );

Reinmar · 2018-09-21T12:17:49Z

Aaa!!! There's a bug in ImageUpload. It uses separate model.change() blocks for each image. Fix that and we're home. I think this was even reported/commented somewhere in the past.

cc @pjasiun

Reinmar · 2018-09-21T12:21:57Z

I cced you, @pjasiun, because I think there was some issue with that piece of code in the past:

https://github.com/ckeditor/ckeditor5-image/blob/565ee70bec8095cef75a91c6c5bb7095f2a9d9a1/src/imageupload/imageuploadediting.js#L63-L86

Do you remember whether we used multiple change blocks on purpose?

jodator · 2018-09-21T12:46:10Z

Aaa!!! There's a bug in ImageUpload. It uses separate model.change() blocks for each image. Fix that and we're home. I think this was even reported/commented somewhere in the past.

It also duplicates the ImageUploadCommand's code AFAICS. The ImageUploadCommand will be able to upload multiple files at once after ckeditor/ckeditor5-image#228 so we can unify editing and command parts (dedup the code) there also.

pjasiun · 2018-09-21T12:54:19Z

For sure using multiple change blocks is incorrect because it will render after each change what might not be expected. However, I do not remember any specific bug related to this case. I also do not know any reason to implement it this way.

Anyway, as @jodator mentioned we will change it soon, so the upload command will be able to handle multiple images what means that the whole action will be executed in a single change block.

ma2ciek · 2018-09-21T13:25:31Z

Anyway, as @jodator mentioned we will change it soon, so the upload command will be able to handle multiple images what means that the whole action will be executed in a single change block.

Great to hear it. So once the PR is merged I'll update the snippet for this question.

jodator · 2018-09-21T13:26:35Z

@pjasiun no. The ImageUploadCommand works this way. The ImageUploadEditing has loop with inner (thus multpile) change blocks and it's code duplicates the code from the command (kinda) on clipboard input.

ma2ciek · 2018-09-21T14:06:20Z

@gongzhiq, note that to create an empty paragraph manually after the image you can use Enter when the image is selected. Similarly to create a paragraph before the image (if it's the first element in document) you can press Shift + Enter. This is a temporary solution, you can read more in #407.

I'm not sure if you know it, that's something I might overlook.

pjasiun · 2018-09-21T14:21:55Z

@pjasiun no. The ImageUploadCommand works this way. The ImageUploadEditing has loop with inner (thus multpile) change blocks and it's code duplicates the code from the command (kinda) on clipboard input.

So I believe it should be changed.

jodator · 2018-09-21T14:30:28Z

So I believe it should be changed.

I also believe in it. More so I think it must be changed :)

gongzhiq · 2018-09-25T02:00:54Z

Thank you. Many good suggestions have been given.

gongzhiq · 2018-10-08T09:30:55Z

@

You mean that this:

writer.insert( paragraph, image1, 'after' );

/*
<image1></image1>
<image2></image2>
<image3></image3>
*/

Inserts the paragraph after <image3>?

Inserts the paragraph after<image1>``<image2>``<image3>

gongzhiq · 2018-10-08T09:34:33Z

Like this

/*
<image1></image1>
<p><br/></p>
<image2></image2>
<p><br/></p>
<image3></image3>
<p><br/></p>
*/

How to do ？

@ma2ciek @Reinmar @jodator @pjasiun

gongzhiq · 2018-10-16T12:17:42Z

https://github.com/ckeditor/ckeditor5/issues/1307

gongzhiq · 2020-05-09T10:57:34Z

modify imageinsertcommand.js

/**
	 * Executes the command.
	 *
	 * @fires execute
	 * @param {Object} options Options for the executed command.
	 * @param {String|Array.<String>} options.source The image source or an array of image sources to insert.
	 */
	execute( options ) {
		const model = this.editor.model;
		var previousNodeName = "";
		var nextNodeName = "";
		
		if (model.document.selection !== null) {
			// 判断前一个元素是否是附件(media, myWidget, image)				
			if (model.document.selection.getFirstPosition().parent.previousSibling !== null) {
				previousNodeName = model.document.selection.getFirstPosition().parent.previousSibling.name;	
			}
			
			// 判断后一个元素是否是附件(media, myWidget, image)	
			if (model.document.selection.getFirstPosition().parent.nextSibling !== null) {
				nextNodeName = model.document.selection.getFirstPosition().parent.nextSibling.name;	
			}
		}
		
		var vContent = this.editor.getData();
		var AddEmptyParagraphForPrevious = "";
		var AddEmptyParagraphForNext = "";
		
		if (previousNodeName === "media" || previousNodeName === "myWidget" || previousNodeName === "image") {
			AddEmptyParagraphForPrevious = "<p class='att_empty_paragraph'><br/></p>";
		} else {
			if (previousNodeName.length === 0) {
				AddEmptyParagraphForPrevious += "<p><br/></p>";
			}
		}
		
		if (nextNodeName === "media" || nextNodeName === "myWidget" || nextNodeName === "image") {
			AddEmptyParagraphForNext = "<p class='att_empty_paragraph'><br/></p>";
		} else {
			if (nextNodeName.length === 0) {
				AddEmptyParagraphForNext += "<p><br/></p>";
			}
		}
		
		model.change( writer => {
			const sources = Array.isArray( options.source ) ? options.source : [ options.source ];

			for ( const src of sources ) {
				insertImage( writer, this.editor, { src }, AddEmptyParagraphForPrevious, AddEmptyParagraphForNext);
			}
		} );
	}

CKEditorBot · 2023-08-31T05:11:16Z

There has been no activity on this issue for the past two years. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

CKEditorBot · 2023-12-15T05:28:18Z

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

CKEditorBot · 2024-01-15T04:02:25Z

We've closed your issue due to inactivity over the last year. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).

ma2ciek self-assigned this Sep 21, 2018

ma2ciek added status:pending type:question This issue asks a question (how to...). labels Sep 21, 2018

pomek mentioned this issue Oct 16, 2018

Hello, I want to add to each picture, how do I do it? #1307

Closed

gongzhiq mentioned this issue Oct 16, 2018

Hello, how is it like this? #1308

Closed

ma2ciek removed their assignment Oct 16, 2018

ma2ciek mentioned this issue Oct 19, 2018

Hello, I found a problem with the code #1319

Closed

Reinmar added pending:feedback This issue is blocked by necessary feedback. and removed status:pending labels Aug 27, 2019

yann-yinn mentioned this issue Mar 21, 2020

Introduce a way to reach unaccessible places (aka magicline and magicblock) - stage I #407

Closed

Chasen-Zhang mentioned this issue Aug 16, 2022

How to add a new line (or or \n) after uploaded image #12274

Closed

CKEditorBot added the status:stale label Aug 31, 2023

CKEditorBot removed the status:stale label Oct 4, 2023

CKEditorBot added the status:stale label Dec 15, 2023

CKEditorBot added resolution:expired This issue was closed due to lack of feedback. and removed status:stale labels Jan 15, 2024

CKEditorBot closed this as not planned Won't fix, can't repro, duplicate, stale Jan 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hello, when using the ckeditor5, I want to add <P><br/></p> after inserting the picture format. I don't know how to do that. #1255

Hello, when using the ckeditor5, I want to add <P><br/></p> after inserting the picture format. I don't know how to do that. #1255

gongzhiq commented Sep 21, 2018 •

edited

Loading

ma2ciek commented Sep 21, 2018

Reinmar commented Sep 21, 2018

ma2ciek commented Sep 21, 2018 •

edited

Loading

Reinmar commented Sep 21, 2018

ma2ciek commented Sep 21, 2018 •

edited

Loading

Reinmar commented Sep 21, 2018

Reinmar commented Sep 21, 2018

jodator commented Sep 21, 2018

pjasiun commented Sep 21, 2018

ma2ciek commented Sep 21, 2018 •

edited

Loading

jodator commented Sep 21, 2018 •

edited

Loading

ma2ciek commented Sep 21, 2018

pjasiun commented Sep 21, 2018

jodator commented Sep 21, 2018

gongzhiq commented Sep 25, 2018

gongzhiq commented Oct 8, 2018

gongzhiq commented Oct 8, 2018 •

edited

Loading

gongzhiq commented Oct 16, 2018

gongzhiq commented May 9, 2020

CKEditorBot commented Aug 31, 2023

CKEditorBot commented Dec 15, 2023

CKEditorBot commented Jan 15, 2024

Hello, when using the ckeditor5, I want to add <P><br/></p> after inserting the picture format. I don't know how to do that. #1255

Hello, when using the ckeditor5, I want to add <P><br/></p> after inserting the picture format. I don't know how to do that. #1255

Comments

gongzhiq commented Sep 21, 2018 • edited Loading

ma2ciek commented Sep 21, 2018

Reinmar commented Sep 21, 2018

ma2ciek commented Sep 21, 2018 • edited Loading

Reinmar commented Sep 21, 2018

ma2ciek commented Sep 21, 2018 • edited Loading

Reinmar commented Sep 21, 2018

Reinmar commented Sep 21, 2018

jodator commented Sep 21, 2018

pjasiun commented Sep 21, 2018

ma2ciek commented Sep 21, 2018 • edited Loading

jodator commented Sep 21, 2018 • edited Loading

ma2ciek commented Sep 21, 2018

pjasiun commented Sep 21, 2018

jodator commented Sep 21, 2018

gongzhiq commented Sep 25, 2018

gongzhiq commented Oct 8, 2018

gongzhiq commented Oct 8, 2018 • edited Loading

gongzhiq commented Oct 16, 2018

gongzhiq commented May 9, 2020

CKEditorBot commented Aug 31, 2023

CKEditorBot commented Dec 15, 2023

CKEditorBot commented Jan 15, 2024

gongzhiq commented Sep 21, 2018 •

edited

Loading

ma2ciek commented Sep 21, 2018 •

edited

Loading

ma2ciek commented Sep 21, 2018 •

edited

Loading

ma2ciek commented Sep 21, 2018 •

edited

Loading

jodator commented Sep 21, 2018 •

edited

Loading

gongzhiq commented Oct 8, 2018 •

edited

Loading